一、简介
- 关键帧动画，也是CAPropertyAnimation的子类
结构图.png
二、与CABasicAnimation的区别
-
CABasicAnimation：
- 只能从一个数值（fromValue）变到另一个数值（toValue）
-
CAKeyframeAnimation：
- 会使用一个NSArray保存这些数值
CABasicAnimation可看做是只有2个关键帧的CAKeyframeAnimation关键帧动画
三、属性说明
values 关键帧数组
- 上述的NSArray对象。里面的元素称为
“关键帧”(keyframe)。 - 动画对象会在指定的时间（duration）内，依次显示values数组中的每一个关键帧
path 路径轨迹
- path：可以设置一个CGPathRef、CGMutablePathRef，让图层按照
路径轨迹移动。 - path只对CALayer的anchorPoint和position起作用。
- 注意：
如果设置了path，那么values关键帧将被忽略
keyTimes：关键帧所对应的时间点
- keyTimes：可以为对应的关键帧指定对应的时间点，其取值范围为0到1.0
- keyTimes中的每一个时间值都对应values中的每一帧。如果没有设置keyTimes，各个关键帧的时间是平分的
四、实例
-
实例：
关键帧动画.gif- 控制器的view上，1.绿色的view，椭圆路径位移；2._redLayer 抖动动画
代码实现：如下
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *greenView;
@property (nonatomic, weak) CALayer *redLayer;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 1. 添加redLayer图层 到view.layer上
CALayer *layer = [CALayer layer];
_redLayer = layer;
layer.backgroundColor = [UIColor redColor].CGColor;
layer.frame = CGRectMake(50, 50, 200, 200);
[self.view.layer addSublayer:_redLayer];
}
- (void)touchesBegan:(nonnull NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event{
/** 2. 绿色的view，椭圆路径位移 */
[self positionChange];
/** _redLayer 抖动 动画 */
[self anim];
}
- (void)positionChange{
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.keyPath = @"position";
anim.duration = 2;
// 取消反弹
// 告诉在动画结束的时候不要移除
anim.removedOnCompletion = NO;
// 始终保持最新的效果
anim.fillMode = kCAFillModeForwards;
// Oval 椭圆 路径轨迹
anim.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)].CGPath;
// 将动画对象添加到 绿色视图的layer上去
[_greenView.layer addAnimation:anim forKey:nil];
}
/**
* _redLayer 抖动动画
*/
- (void)anim{
CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];
anim.duration = 0.3;
anim.keyPath = @"transform";
NSValue *value = [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
NSValue *value1 = [NSValue valueWithCATransform3D:CATransform3DMakeRotation((15) / 180.0 * M_PI, 0, 0, 1)];
NSValue *value2 = [NSValue valueWithCATransform3D:CATransform3DMakeRotation((-15) / 180.0 * M_PI, 0, 0, 1)];
anim.values = @[value,value1,value2];
anim.repeatCount = MAXFLOAT;
[_redLayer addAnimation:anim forKey:nil];
}
@end
