梳理 iOS 常见的动画之 CABasicAnimation

CABasicAnimation

CABasicAnimation 是 iOS 中的基本动画，主要包括有下面的几种动画方式,

keypath	value	note
position.x,y	NSNumber @(50)	x,y 位置
opacity	@(0.5)	透明度范围0.0 - 1.0
transform.scale	@(2)	缩放的倍数
contents	(id)([UIImage imageNamed:@"222.jpeg"].CGImage)	内容的变化
transform.rotation.x,y,z	@(M_PI * 2.0)	旋转的角度
backgroundColor	(__bridge id _Nullable)([UIColor blueColor].CGColor)	颜色
cornerRadius	@(50)	圆角
borderWidth	@(10)	边框宽度
borderColor	(__bridge id _Nullable)([UIColor blueColor].CGColor)	边框颜色
bounds	[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)]	bound

下面是几个重要的属性:

常用的属性

起始状态

fromValue 表示动画从什么状态开始

byValue 表示动画的偏量

toValue 表示的是结果

toValue = fromValue + byValue

beginTime

beginTime 动画延迟开始的时间当多个动画同时作用一个个体,让动画执行顺序错开

 positionAnima.beginTime = CACurrentMediaTime() + 0.5;
 在其他动画开始后的 0.5 秒 执行这个动画

timingFunction

动画执行的速度函数 f(x),系统默认给出了几个常用的

/** Timing function names. **/

kCAMediaTimingFunctionLinear        匀速
kCAMediaTimingFunctionEaseIn        先慢后快
kCAMediaTimingFunctionEaseOut       先快后慢
kCAMediaTimingFunctionEaseInEaseOut  慢-快-慢
kCAMediaTimingFunctionDefault       默认

也可以使用,贝塞尔曲线两个端的比例

+ (instancetype)functionWithControlPoints:(float)c1x :(float)c1y :(float)c2x :(float)c2y;

关于贝塞尔请看贝塞尔曲线

removedOnCompletion

removedOnCompletion 的作用，是否保留动画结束的状态，比如你动画分两部分，第一部分1.5 秒缩小0.5，移除屏幕，第二部分从屏幕外回到初始位置，如果第一段始终为YES，在第二段动画的过程中，还是之前未缩放之前的大小，效果移除了。如果是NO，大小就是缩小0.5之后的

fillMode

kCAFillModeForwards 不回到原状态 kCAFillModeBackwards 动画结束以后回到原来位置 kCAFillModeBoth 好像和 kCAFillModeForwards 没什么区别 kCAFillModeRemoved 好像和 kCAFillModeBackwards 没什么区别

其他

repeatCount 动画重复的次数 autoreverses 是否逆动画结束后是否逆回去,默认是NO

几个小例子

position.x

位移添加了延时, 移动速度按照贝塞尔曲线

  CABasicAnimation *positionAnima = [CABasicAnimation animationWithKeyPath:@"position.x"];
    positionAnima.duration = 1.5;
    positionAnima.fromValue = @([UIScreen mainScreen].bounds.size.width / 2.0);
    positionAnima.toValue = @(-_myImageView.frame.size.width / 2);
    positionAnima.fillMode = kCAFillModeForwards;
    positionAnima.removedOnCompletion = NO;
    // 在 add 前面 添加 delegate 代理方法才能实现
    positionAnima.delegate = self;
    positionAnima.autoreverses = YES;
    // 位移延时
    positionAnima.beginTime = CACurrentMediaTime() + 1;
    // 位移的速度贝塞尔 曲线
    positionAnima.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.25 :0.1 :0.25 :1.0];
    [self.myImageView.layer addAnimation:positionAnima forKey:@"position.x"];

更改UIImageView 的 image

/// 内容改变
    CGImageRef image = [UIImage imageNamed:@"222.jpeg"].CGImage;
    CABasicAnimation *contentAnima = [CABasicAnimation animationWithKeyPath:@"contents"];
    contentAnima.duration = 1.5;
    contentAnima.fromValue = (id)self.myImageView.image.CGImage;
    contentAnima.toValue = (id)([UIImage imageNamed:@"222.jpeg"].CGImage);
    contentAnima.fillMode = kCAFillModeForwards;
    contentAnima.autoreverses = NO;
    contentAnima.removedOnCompletion = NO;
    [self.myImageView.layer addAnimation:contentAnima forKey:@"contents"];

参考：

Apple 文档

贝塞尔曲线