梳理 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"];
contents
更改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"];
参考: