将反弹效果添加到UIImageView的外观中

adi*_*dit 14 iphone core-animation objective-c ipad

当我要将UIImageView显示为子视图时,如何添加反弹效果?我必须使用CoreAnimation来做到这一点吗?我现在唯一的猜测是使用CAKeyframeAnimation,如果有更好的方法,请告诉我.这是我目前的代码:

 CABasicAnimation * theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
    theAnimation.delegate = self;
    theAnimation.duration = 1.0;
    theAnimation.fromValue = [NSNumber numberWithFloat:notif.center.y];
    theAnimation.toValue = [NSNumber numberWithFloat:notif.center.y-20];
    theAnimation.repeatCount = 3;
Run Code Online (Sandbox Code Playgroud)

Jan*_*ano 30

使用CABasicAnimation的y轴动画:

CGPoint origin = self.imageView.center;
CGPoint target = CGPointMake(self.imageView.center.x, self.imageView.center.y+100);
CABasicAnimation *bounce = [CABasicAnimation animationWithKeyPath:@"position.y"];
bounce.duration = 0.5;
bounce.fromValue = [NSNumber numberWithInt:origin.y];
bounce.toValue = [NSNumber numberWithInt:target.y];
bounce.repeatCount = 2;
bounce.autoreverses = YES;
[self.imageView.layer addAnimation:bounce forKey:@"position"];
Run Code Online (Sandbox Code Playgroud)

如果要实现收缩和增长,则必须添加CGAffineTransformMakeScale,例如:

// grow
CGAffineTransform transform = CGAffineTransformMakeScale(1.3, 1.3);
imageView.transform = transform;
Run Code Online (Sandbox Code Playgroud)

  • 效果很棒!! :)确保在项目中添加QuatzCore框架.谢谢. (2认同)

Zor*_*ayr 7

Swift中的 Bouncy(扩展/缩小)动画:

var selected: Bool {
  willSet(selected) {
    let expandTransform:CGAffineTransform = CGAffineTransformMakeScale(1.2, 1.2);
    if (!self.selected && selected) {
      self.imageView.image = SNStockCellSelectionAccessoryViewImage(selected)
      self.imageView.transform = expandTransform
      UIView.animateWithDuration(0.4,
        delay:0.0,
        usingSpringWithDamping:0.40,
        initialSpringVelocity:0.2,
        options: .CurveEaseOut,
        animations: {
          self.imageView.transform = CGAffineTransformInvert(expandTransform)
        }, completion: {
          //Code to run after animating
          (value: Bool) in
      })

    }
  }
}

var imageView:UIImageView
Run Code Online (Sandbox Code Playgroud)

如果imageView被正确地添加到视图作为一个子视图,之间切换selected = falseselected = true应该交换图像与弹性的动画.SNStockCellSelectionAccessoryViewImage只根据当前选择状态返回不同的图像,如下所示:

private let SNStockCellSelectionAccessoryViewPlusIconSelected:UIImage = UIImage(named:"PlusIconSelected")!
private let SNStockCellSelectionAccessoryViewPlusIcon:UIImage = UIImage(named:"PlusIcon")!

private func SNStockCellSelectionAccessoryViewImage(selected:Bool) -> UIImage {
  return selected ? SNStockCellSelectionAccessoryViewPlusIconSelected : SNStockCellSelectionAccessoryViewPlusIcon
}
Run Code Online (Sandbox Code Playgroud)

下面的GIF示例有点慢,实际动画发生得更快:

                                       UIImageView弹跳动画Gif