CoreAnimation核心动画

CoreAnimation核心动画,类的关系图:
image

目录: (介绍4种动画):
  • CABasicAnimation
  • 关键帧动画CAKeyframeAnimation
  • Group组动画
  • CATransition转场动画

① CABasicAnimation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CABasicAnimation
* keyPath: 需要改变的属性
* fromValue: 起始值
* toValue: 结束值
* duration: 动画持续时间
* repeatCount: 循环次数
* fillMode: 动画执行结束后的操作(设置次值,需要removedOnCompletion=NO)
* removedOnCompletion: 运行一次是否移除动画
*/
CABasicAnimation * anim1 = [[CABasicAnimation alloc] init];
anim1.keyPath = @"position.x";
anim1.fromValue = @(10);
anim1.toValue = @(300);
anim1.duration = 5;
anim1.repeatCount = INT_MAX;
anim1.fillMode = kCAFillModeForwards;
anim1.removedOnCompletion = NO;
[myLayer addAnimation:anim1 forKey:nil];

② 关键帧动画CAKeyframeAnimation:
方法一:

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 关键帧动画
* keyPath: 需要改变的属性
* values: 关键帧的CGPoint
* duration: 动画持续时间
*/
CAKeyframeAnimation * anim2 = [[CAKeyframeAnimation alloc] init];
anim2.keyPath = @"position";
NSValue * v1 = [NSValue valueWithCGPoint:CGPointMake(300, 125)];
NSValue * v2 = [NSValue valueWithCGPoint:CGPointMake(300, 300)];
NSValue * v3 = [NSValue valueWithCGPoint:CGPointMake(125, 300)];
anim2.values = @[v1,v2,v3];
anim2.duration = 5;
[myLayer addAnimation:anim2 forKey:nil];

方法二:

1
2
3
4
5
6
7
8
9
10
11
/* 关键帧动画
* keyPath: 需要改变的属性
* path: 动画轨迹
* duration: 动画持续时间
*/
CAKeyframeAnimation * anim2 = [[CAKeyframeAnimation alloc] init];
anim2.keyPath = @"position";
UIBezierPath * path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 300)];
anim2.path = path.CGPath;
anim2.duration = 5;
[myLayer addAnimation:anim2 forKey:nil];

③ Group组动画:

1
2
3
4
5
6
7
8
9
10
11
/* Group组动画
* keyPath: 需要改变的属性
* animations: 动画数组
* duration: 动画持续时间
* repeatCount: 重复次数
*/
CAAnimationGroup * group = [CAAnimationGroup new];
group.animations = @[anim1,anim2];
group.duration = 5;
group.repeatCount = INT_MAX;
[myLayer addAnimation:group forKey:nil];

④ CATransition转场动画:
分享简书的一篇文章:https://www.jianshu.com/p/39c051cfe7dd

  • FillMode解释:
    1
    2
    3
    4
    5
    6
    fillMode的作用就是决定当前对象过了非active时间段的行为. 比如动画开始之前,动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用. 下面来讲各个fillMode的意义。

    kCAFillModeRemoved: 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
    kCAFillModeForwards: 当动画结束后,layer会一直保持着动画最后的状态
    kCAFillModeBackwards: 这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始.你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态
    kCAFillModeBoth: 理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.