荼菜的ios笔记–core animation 核心动画 二、 CAPropertyAnimation 三、 CABasicAnimation(基本动画) 四、 CAKeyframeAnimation(关键帧动画) 五、 CAAnimationGroup(组动画) 六、 CATransition(转场动画)

TuCai

前言:前些天学习核心动画时参考了一些别人的经验贴,之前是保存在自己的为知笔记里里的,只记录了一些适合自己的片段,因此有些出处来自于前人大神,但当时链接当时并未记录,望谅解。

#概念#

  • Core Animation可以用在 Mac OS X 和 iOS平台. Core Animation的动画执行过程是在后台操作的.不会阻塞主线程. 要注意的是, Core Animation是直接作用在CALayer上的.并非UIView。
  • 使用步骤:
    1、创建一个CAAnimation对象
    2、设置一些动画的相关属性
    3、给CALayer添加动画(addAnimation:forKey: 方法)
    4、停止CALayer动画(removeAnimationForKey: 方法)
    注意:1. 当你将animation加入layer层以后,你就无法再更改动画效果了。2.注意: 如果当动画正在执行的时候, 将程序退出到后台, 那么当程序再次进入前台的时候就不执行了。原因: 因为再次进入前台后动画已经被删除了。解决: anim.removedOnCompletion = NO;

CAAnimation类是所有动画对象的父类,负责控制动画的持续时间和速度等,是个抽象类,不能直接使用,应该使用它具体的子类,CAAnimation的继承结构如下图:
CAAnimation继承结构

##属性:

  • duration:动画的持续时间,默认为0.25秒
  • repeatCount:动画的重复次数
  • repeatDuration:动画的重复时间
  • removedOnCompletion:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode属性为kCAFillModeForwards
  • fillMode:决定当前对象在非active时间段的行为.比如动画开始之前,动画结束之后
  • beginTime:可以用来设置动画延迟执行时间,若想延迟2s,就设置为CACurrentMediaTime()+2,CACurrentMediaTime()为图层的当前时间
  • timingFunction:速度控制函数,控制动画运行的节奏

    1
    2
    3
    4
    5
    6
    枚举参数:
    (1)kCAMediaTimingFunctionLinear 时间曲线函数,匀速
    (2)kCAMediaTimingFunctionEaseIn 时间曲线函数,由慢到特别快
    (3)kCAMediaTimingFunctionEaseOut 时间曲线函数,由快到慢
    (4)kCAMediaTimingFunctionEaseInEaseOut 时间曲线函数,由慢到快
    (5)kCAMediaTimingFunctionDefault 系统默认
  • delegate:动画代理,一般设置隐式代理,该代理是NSObject的分类,不需要遵守协议
    anim.delegate = self;
    (1)- (void)animationDidStart:(CAAnimation )anim;
    核心动画开始时执行
    (2)- (void)animationDidStop:(CAAnimation
    )anim finished:(BOOL)flag;
    核心动画执行结束后调用

二、 CAPropertyAnimation

是CAAnimation的子类,也是个抽象类,要想创建动画对象,应该使用它的两个子类:CABasicAnimation和CAKeyframeAnimation

属性:@property(nullable, copy) NSString keyPath;
类方法:+ (instancetype)animationWithKeyPath:(nullableNSString
)path;

keyPath参数:通过指定CALayer的一个属性名做为keyPath里的参数(NSString类型),并且对CALayer的这个属性的值进行修改,达到相应的动画效果。比如,指定@”position”为keyPath,就修改CALayer的position属性的值,以达到平移的动画效果。

例子:CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@”position.y”];

keyPath参数

keyPath参数

三、 CABasicAnimation(基本动画)

属性:

  • fromValue : keyPath相应属性的初始值
  • toValue : keyPath相应属性的结束值,到某个固定的值(类似transform的make含义)注意:随着动画的进行,在长度为duration的持续时间内,keyPath相应属性的值从fromValue渐渐地变为toValue.如果fillMode = kCAFillModeForwards和removedOnComletion = NO;那么在动画执行完毕后,图层会保持显示动画执行后的状态,但实质上,图层的属性值还是动画执行前的初始值,并没有真正被改变.比如: CALayer的postion初始值为(0,0),CABasicAnimation的fromValue为(10,10),toValue为 (100,100),虽然动画执行完毕后图层保持在(100,100) 这个位置,实质上图层的position还是为(0,0);
  • byValue:不断进行累加的数值(类似transform非make方法的含义)
    CABasicAnimation animation = [CABasicAnimation animationWithKeyPath:@”transform.rotation.z”];
    animation.byValue = @(M_PI
    2);

四、 CAKeyframeAnimation(关键帧动画)

和CABasicAnimation的区别:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray(values)保存这些数值,实现多个点间的动画效果,CABasicAnimation可看做是最多只有2个关键帧的CAKeyframeAnimation

属性:

  • 1.values:NSArray对象,里面的元素称为”关键帧”(NSValue类型),动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧( NSValue)
    //设置动画属性NSValue p1 = [NSValue valueWithCGPoint:CGPointMake(50, 150)];NSValue p2 = [NSValue valueWithCGPoint:CGPointMake(250, 150)];NSValue p3 = [NSValue valueWithCGPoint:CGPointMake(50, 550)];NSValue p4 = [NSValue valueWithCGPoint:CGPointMake(250, 550)];
    animKey.values = @[p1, p2, p3, p4];

  • 2.path:可以设置一个CGPathRefCGMutablePathRef,让层跟着路径移动,path只对CALayer的anchorPoint(锚点)和position起作用,如果设置了path,那么values将被忽略
    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 100, 250, 100)];
    animKey.path = path.CGPath;

  • 3.keyTimes:(keyTimes属性指定的是当前状态节点到初始状态节点的时间占动画总时长的比例
    。若果不设置keyTimes则匀速播放)可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧,当keyTimes没有设置的时候,各个关键帧的时间是平分的

  • 4.rotationMode:旋转模式
    (1)如果为nil或不设置效果为

旋转模式效果1

(2)设置为kCAAnimationRotateAuto 或 kCAAnimationRotateAutoReverse 会随着旋转的角度做 ”自转“

旋转模式效果2

五、 CAAnimationGroup(组动画)

可以保存一组动画对象,将CAAnimationGroup对象加入层后,组中所有动画对象可以同时并发运行
属性:
animations:动画组,用来保存一组动画对象的NSArray,默认情况下,一组动画对象是同时运行的,也可以通过设置动画对象的beginTime属性来更改动画的开始时间。

栗子🌰🔽

CAAnimationGroup.gif

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
- (void)viewDidLoad {
    [super viewDidLoad]; 
    self.button.frame = CGRectMake(150, 100, 50, 50);
}
-(UIButton *)button{
    if (_button == nil) {
        UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
        button.backgroundColor=[UIColor redColor];
        button.tag=0;
        [button addTarget:self action:@selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:button];
        _button=button;
    }
    return _button;
}
//点击事件
-(void)buttonClicked:(UIButton *)button{
    CAKeyframeAnimation * animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.values = @[[NSValue valueWithCGPoint:CGPointMake(0, 0)],[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(0, 200)]];
    animation.duration = 2;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.keyTimes = @[@0,@0.25,@0.5,@0.75,@1];
    animation.path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 100, 100)].CGPath;
    CABasicAnimation * animation2 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    animation2.toValue = @50;
    animation2.duration = 2;
    animation2.fillMode = kCAFillModeForwards;
    animation2.removedOnCompletion = NO;
    
    CAAnimationGroup * group = [CAAnimationGroup animation];
    group.duration = 2;
    group.fillMode = kCAFillModeForwards;
    group.removedOnCompletion = NO;
    group.animations = @[animation,animation2];
    [button.layer addAnimation:group forKey:@"group"];
}

六、 CATransition(转场动画)

用于做转场动画,能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点。UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
属性:

  • 1.type:设置动画过渡的类型

转场动画过渡效果

  • 2.subtype:设置动画过渡方向
    枚举:kCATransitionFromRight
    kCATransitionFromLeft
    kCATransitionFromTop
    kCATransitionFromBottom
  • 3.startProgress:动画起点(在整体动画的百分比)
  • 4.endProgress:动画终点(在整体动画的百分比)

场景:所以我目前测出来的能用的情况有,imageView切换图片,控制器的push或modal,UIView对象调用exchangeSubviewAtIndex:WithIndex:方法的时候可以出发转场动画,其他我真是没有测出来,有大神知道还望告知=。=十分感谢。

CATransition.gif

1
2
3
4
5
6
7
8
9
10
-(void)buttonClicked:(UIButton *)button{
    
    CATransition *animation = [CATransition animation];
    animation.duration = 5;
    animation.fillMode = kCAFillModeForwards;
    animation.type = @"rippleEffect";
    animation.subtype = kCATransitionFromTop;
    [self.img.layer addAnimation:animation forKey:@"ripple"];
    self.img.image = [UIImage imageNamed:@"ic_empty_theater"];
}

后话:附上之前写的文章,欢迎指正:
荼菜的iOS笔记–UIView的几个Block动画
荼菜的iOS笔记–一些实用功能。
荼菜的iOS笔记–UITableViewCell的各种操作(刷新、插入、删除、动画)
荼菜的iOS笔记–一张图记住所有git命令行操作。
荼菜的iOS笔记–一张图告诉你程序员需要知道的这些网站。
荼菜的iOS笔记–图片裁剪黑魔法。
荼菜的iOS笔记–iOS自动打包脚本(Python)

荼菜的iOS笔记–我的编码规范参考。
荼菜的iOS笔记–iOS基础优秀博客总结ToDoList
荼菜的iOS笔记–Xcode Tips
当然,我还写过诗。。。
光。