核心动画:Core Animation (整理笔记)

作者: 果哥爸 | 来源:发表于2017-01-12 16:00 被阅读682次

说明:此文仅为笔记，是本人根据参考他人自己总结的一些东西，查阅原文请戳这里:
iOS动画篇：核心动画

抬头.jpg

一.简介

1.Core Animation是iOS和MacOS平台上负责图形渲染与动画的基础框架。

2.Core Animation可以作用到动画视图或其他可视元素，为你完成动画所需的大部分绘帧工作。你只需要配置少量的动画参数(如开始点的位置和结束点位置)即可使用Core Animation的动画效果。

3.Core Animation将大部分实际的绘图任务交给图形硬件来处理，图形硬件会加速图形渲染的速度。这种自动化的图形加速技术让动画拥有更高的帧率并且显示效果更佳平滑，不会加重CPU的负担而影响程序的运行速度。

4.Core Animation的动画执行过程都是在后台操作，不会阻塞主线程，并且Core Animation是直接作用在CALayer上的，并非UIView.

二.CALayer与UIView关系

1.UIView 包含 CALayer

UIView之所以能显示在屏幕上，是因为其内部的一个图层(CALayer):
在创建UIView对象时，UIView内部会自动创建一个图层(即CALayer对象)，通过UIView的layer属性可以访问这个层。

@property(nonatomic,readonly,retain) CALayer *layer;

当UIView需要显示到屏幕上时，会调用drawRect:方法进行绘图，并且将所有的内容绘制在自己的图层上，绘图完毕后，系统会将图层拷贝到屏幕上，于是就完成了UIView的显示。

换言之，UIView本身并不具备显示的功能，是它内部的图层才具有显示功能。

2.UIView具有事件处理功能

通过CALayer可以实现和UIView及其子类(UIImageView、UILabel等)相同的显示效果，但相对于CALayer，UIView多了一层事件处理的功能。
因此，如果显示的UI需要跟用户进行交互的话，就用UIView;如果不需要跟用户进行交互，两个都可以，但CALayer性能更高。

三.CALayer 简介

1.CALayer基本属性

宽度和高度:

@property CGRect bounds;

位置(默认指中点，具体由anchorPoint决定)：

@property CGPoint position;

锚点(x,y的范围都是0-1)，决定了position的含义:

@property CGPoint anchorPoint;

背景颜色(CGColorRef类型):

@property CGColorRef backgroundColor;

形变属性：

@property CATransform3D transform;

postion和anchorPoint的关系
A.position:用来设置CALayer在父层中的位置，以父层的左上角(0,0)为原点

B.anchorPoint:称为"锚点",也叫"定位点"，决定这CALayer身上的哪个点会在position所指的位置，以自己的左上角为原点(0,0),它的x,y取值范围都是0~1，默认值为中心点(0.5,0.5)。

效果图:
当anchorPoint为（0.5，0.5）的时候，position就是CALayer的中心点。这时如果设置position为(0, 0)即为父层的左上点，那么该层在父层中只会看到四分之一部分,就相当于以(0, 0)为中心点，向上下扩展出redlayer的高度一半，向左右扩展出redLayer的宽度的一半。

当anchorPoint为（0.5，0.5）
代码:

     // 红色 图层
CALayer *redLayer = [[CALayer alloc] init];
redLayer.bounds = CGRectMake(0, 0, 200, 100);
redLayer.position = CGPointMake(0, 0);
redLayer.anchorPoint = CGPointMake(0.5, 0.5);
redLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:redLayer];

效果图:

CALayer_AnchorPoint.png

当anchorPoint为（0，0），position为(0, 0),就相当于以点(0,0)为中心，沿着左边扩展redLayer的宽度乘以 0；沿着右边扩展redLayer的宽度乘以（1 - 0），沿着上边扩展redLayer的高度乘以 0，沿着下边扩展redLayer的高度乘以 (1 - 0)；
代码:

  // 红色 图层
CALayer *redLayer = [[CALayer alloc] init];
redLayer.bounds = CGRectMake(0, 0, 200, 200);
redLayer.position = CGPointMake(0, 0);
redLayer.anchorPoint = CGPointMake(0, 0);
redLayer.backgroundColor = [UIColor redColor].CGColor;
[self.view.layer addSublayer:redLayer];

效果图:

CALayer_AnchorPoint.png

因此可以看出anchorPoint（x, y）和position(a, b)的关系就是以position(a, b)点为中心，沿着左边扩展redLayer的宽度乘以 x；沿着右边扩展redLayer的宽度乘以（1 - x），沿着上边扩展redLayer的高度乘以 y，沿着下边扩展redLayer的高度乘以 (1 - y)；

隐式动画
A.根层与非根层:

每一个UIView的内部都默认关联着一个CALayer,我们可以称这个Layer为RootLayer(层）
所有的非Root Layer，也就是手动创建的CALayer对象，都存在着隐式动画。

当对非Root Layer的部分属性进行修改时，默认会自动产生一些动画效果，而这些属性称为Animatable Properties(可动画属性)

常见的几个可动画属性:
代码:
#import "ViewController.h"

@interface ViewController ()
// 红色 图层
@property (nonatomic, strong) CALayer *redLayer;
@end



@implementation ViewController
#pragma mark --- life circle
- (void)viewDidLoad {
    [super viewDidLoad];
    // 红色 图层
    [self.view.layer addSublayer:self.redLayer];
}

  #pragma mark --- getter method

// 红色 图层
- (CALayer *)redLayer {
    if (!_redLayer) {
        _redLayer = [[CALayer alloc] init];
        _redLayer.bounds = CGRectMake(0, 0, 150, 150);
        _redLayer.position = CGPointMake(200, 200);
        _redLayer.anchorPoint = CGPointMake(0.5, 0.5);
        _redLayer.backgroundColor = [UIColor redColor].CGColor;
    }
    return _redLayer;
}

bounds:用于设置CALayer的宽度和高度，修改这个属性会产生缩放动画。

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    self.redLayer.bounds = CGRectMake(0, 0, 300, 300);
}

效果图:

CALayer_Bounds.gif

backgroundColor:用于设置CALayer的背景色。修改这个属性会产生背景色的渐变动画

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
  self.redLayer.backgroundColor = [UIColor greenColor].CGColor;
}

效果图:

CALayer_BackgroundColor.gif

position：用于设置CALayer的位置。修改这个属性会产生平移动画

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    self.redLayer.position = CGPointMake(350, 350);
}

效果图:

CALayer_Position.gif

四. CATransaction

事务(CATransaction)负责协调多个动画原子更新的显示操作,是动画里面的一个基本单元，动画的产生必然伴随着layer的Animatable属性的变化，而layer属性的变化必须属于某一个事务。
因此，核心动画依赖于事务。
可以通过事物关闭隐式动画:

事务的作用:保证一个或多个layer的一个或多个属性变化同时进行。
事务的种类: 隐式和显示

隐式: 没有明显调用事务的方法，由系统自动生成事务。比如上面提到的设置一个layer的position属性，则会在当前线程自动生成一个事务，并在下一个runLoop中自动commit.
通过如下方法可以关闭隐式动画的设置:
```
 [CATransaction begin];
 // 关闭隐式动画
 [CATransaction setDisableActions:YES];
 self.myview.layer.position = CGPointMake(10, 10);
 [CATransaction commit];
```
显示:明显调用事务的方法[CATransaction begin] 和 [CATransaction commit].

CA事务的可设置属性(会覆盖隐式动画的设置):

animationDuration：动画时间
animationTimingFunction：动画时间曲线
disableActions：是否关闭动画
completionBlock：动画执行完毕的回调

事务支持嵌套使用:当最外层的事务commit后动画才会开始。

五.Core Animation

1.Core Animation 概要

Core Animation(核心动画)是一组功能强大，效果华丽的动画API，可以实现复杂的动画、炫酷的动画效果。
如下所示为核心动画所在位置:

Core_Animation.png

可以看出，核心动画位于UIKit的下一层，作用在CALayer上，CALayer从概念上类似UIView，可以将UIView看成是一个特殊的CALayer(可以响应事件)。

实际上，每个UIView都有其对应的layer,这个layer我们是root layer,给UIView加上动画，本质是对其layer进行操作，layer包含了各种支持动画的属性，动画则包含了属性变化的值，变化的速度，变化的时间等等，两者结合产生动画的过程。

核心动画和UIView动画的对比:UIView动画可以看成是对核心动画的封装，和UIView动画不同的是，通过核心动画改变layer的状态(比如:position),动画执行完毕后，实际是没有改变的(表面看起来已改变)

核心动画优点:

性能强大，使用硬件加速，可以同时向多个图层添加不同的动画效果
接口易用，只需要少量的代码就可以实现复杂的动画效果。
运行在后台的线程中，在动画过程中可以响应交互事件(UIView动画默认动画过程中不响应交互事件)

2.核心动画类的层次结构

Core Animation classes and protocol.png

a. CAAnimation是所有动画对象的父类，实现CAMediaTiming协议，负责控制动画的时间、速度和曲线等，是一个抽象类，不能直接使用
b. CAPropertyAnimation：是CAAnimation的子类，它支持动画地显示图层的keyPath,一般不直接使用
c. CASpringAnimation类(iOS 9.0之后新增)，它实现弹簧效果动画，是CABasicAnimation的子类。

综上，核心动画类中可以直接使用的类有:
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation

3. 核心动画类的方法

A.初始化CAAnimation对象:
一般使用animation方法生成实例

+ (instancetype)animation;

如果是CAPropertyAnimation的子类，还可以通过animationWithKeyPath生成实例

+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

B.设置动画相关属性
设置动画的执行时间、执行曲线、keyPath的目标值、代理等等

C.动画的添加和移除
调用CALayer的addAnimation:forKey: 方法将动画添加到CALayer中，这样动画就开始执行了

- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

调用CALayer的removeAnimation方法停止CALayer中的动画

- (void)removeAnimationForKey:(NSString *)key; 
- (void)removeAllAnimations;

D.核心动画常用属性
keyPath:可以指定keyPath为CALayer的属性值，并对它的值进行修改，以达到对应的动画效果，需要注意的是部分属性值是不支持动画效果的。

以下是具有动画效果的keyPath:

//CATransform3D Key Paths : (example)transform.rotation.z
 //rotation.x
 //rotation.y
 //rotation.z
 //rotation 旋轉
 //scale.x
 //scale.y
 //scale.z
 //scale 缩放
 //translation.x
 //translation.y
 //translation.z
 //translation 平移

 //CGPoint Key Paths : (example)position.x
 //x
 //y

 //CGRect Key Paths : (example)bounds.size.width
 //origin.x
 //origin.y
 //origin
 //size.width
 //size.height
 //size

 //opacity
 //backgroundColor
 //cornerRadius 
 //borderWidth
 //contents 

 //Shadow Key Path:
 //shadowColor 
 //shadowOffset 
 //shadowOpacity 
 //shadowRadius

duration：动画的持续时间
repeatCount：动画的重复次数
timingFunction：动画的时间节奏控制

 timingFunctionName的enum值如下：
 kCAMediaTimingFunctionLinear 匀速
 kCAMediaTimingFunctionEaseIn 慢进
 kCAMediaTimingFunctionEaseOut 慢出
 kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
 kCAMediaTimingFunctionDefault 默认值（慢进慢出）

fillMode：视图在非Active时的行为
removedOnCompletion：动画执行完毕后是否从图层上移除，默认为YES（视图会恢复到动画前的状态），可设置为NO（图层保持动画执行后的状态，前提是fillMode设置为kCAFillModeForwards）
beginTime：动画延迟执行时间（通过CACurrentMediaTime() + your time 设置）
delegate：代理

代理方法如下：
 - (void)animationDidStart:(CAAnimation *)anim;  //动画开始
 - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //动画结束

4.具体类介绍

CABasicAnimation

CABasicAnimation可以设定keyPath的起点和终点值，动画会沿着设定的点进行移动，CABasicAnimation可以看成是只有两个关键点的特殊的CAKeyFrameAnimation.

代码演示
初始化代码:

#import "ViewController.h"

@interface ViewController ()
// 积分 view
@property (nonatomic, strong) UIButton *integralView;
// 卡券 view
@property (nonatomic, strong) UIButton *cartCenterView;
// 签到 view
@property (nonatomic, strong) UIButton *signInView;
@end

@implementation ViewController

#pragma mark --- life circle

- (void)viewDidLoad {

    [super viewDidLoad];

    [self.view addSubview:self.signInView];

    [self.view addSubview:self.cartCenterView];

    [self.view addSubview:self.integralView];

    self.view.backgroundColor = [UIColor whiteColor];

}

#pragma mark --- getter and setter
// 签到 view
- (UIButton *)signInView {
    if (!_signInView) {
        CGFloat signInViewX = 60;
        CGFloat signInViewY = 120;
        CGFloat signInViewWidth = self.view.frame.size.width - (2 * signInViewX);
        CGFloat signInViewHeight = 100.0f;
    
    
        _signInView = [[UIButton alloc] initWithFrame:CGRectMake(signInViewX, signInViewY, signInViewWidth, signInViewHeight)];
        _signInView.clipsToBounds = YES;
        [_signInView setImage: [UIImage imageNamed:@"default_user_icon.png"] forState:UIControlStateNormal];
    
    }
    return _signInView;
}

// 卡券 view
- (UIButton *)cartCenterView {
    if (!_cartCenterView) {
    
        CGFloat cartCenterViewX = CGRectGetMinX(self.signInView.frame);
        CGFloat cartCenterViewY = CGRectGetMaxY(self.signInView.frame) + 10;
        CGFloat cartCenterViewWidth = self.signInView.frame.size.width/2.0;
        CGFloat cartCenterViewHeight = 60.0f;
    
        _cartCenterView = [[UIButton alloc] initWithFrame:CGRectMake(cartCenterViewX, cartCenterViewY, cartCenterViewWidth, cartCenterViewHeight)];
        _cartCenterView.clipsToBounds = YES;
        [_cartCenterView setImage: [UIImage imageNamed:@"icon_gouwuche.png"] forState:UIControlStateNormal];
    }
    return _cartCenterView;
}

// 积分
- (UIButton *)integralView {
    if (!_integralView) {
        CGFloat integralViewX = CGRectGetMaxX(self.cartCenterView.frame);
        CGFloat integralViewY = CGRectGetMinY(self.cartCenterView.frame);
        CGFloat integralViewWidth = self.signInView.frame.size.width/2.0;
        CGFloat integralViewHeight = self.cartCenterView.frame.size.height;
    
        _integralView = [[UIButton alloc] initWithFrame:CGRectMake(integralViewX, integralViewY, integralViewWidth, integralViewHeight)];
        _integralView.clipsToBounds = YES;
        [_integralView setImage: [UIImage imageNamed:@"home_dingdan.png"] forState:UIControlStateNormal];
    }
    return _integralView;
}

#pragma mark --- event response
// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {

}

A.position 相关动画

// position 基本 动画
- (void)basicAnimationOfPosition {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"position"];
    ani.toValue = [NSValue valueWithCGPoint:self.signInView.center];
    ani.duration = 1.0f;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenterView.layer addAnimation:ani forKey:@"PositionAni"];
}

效果图:

position.gif

// position.x 基本 动画
- (void)basicAnimationOfPositionX {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"position.x"];
    ani.toValue = [NSNumber numberWithFloat:self.signInView.center.x];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenterView.layer addAnimation:ani forKey:@"PositionXAni"];
}

效果图:

positionX.gif

// position.y 基本 动画
- (void)basicAnimationOfPositionY {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"position.y"];
    ani.toValue = [NSNumber numberWithFloat:self.signInView.center.y];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
   [self.cartCenterView.layer addAnimation:ani forKey:@"PositionYAni"];
}

效果图:

positionY.gif

B.Rotation 相关动画// rotation 基本动画

- (void)basicAnimationOfRotation {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"RotationAni"];
}

效果图:

rotation.gif

// rotationX 基本 动画
- (void)basicAnimationOfRotationX {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"RotationAni"];
}

效果图:

rotationX.gif

// rotationY 基本 动画
- (void)basicAnimationOfRotationY {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
   ani.toValue = [NSNumber numberWithFloat:M_PI];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
   ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"RotationAni"];
}

效果图:

rotationY.gif

// rotationZ 基本 动画
- (void)basicAnimationOfRotationZ {
   CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    ani.toValue = [NSNumber numberWithFloat:M_PI];
    ani.removedOnCompletion = NO;
   ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"RotationAni"];
}

效果图:

rotationZ.gif

**C.Scale 相关动画 **// scale 基本动画

- (void)basicAnimationOfScale {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    ani.toValue = [NSNumber numberWithFloat:0.8];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ScaleAni"];
}

效果图:

scale.gif

// scaleX 基本 动画
- (void)basicAnimationOfScaleX {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
   ani.toValue = [NSNumber numberWithFloat:1.5];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ScaleXAni"];
}

效果图:

scaleX.gif

// scaleY 基本 动画
- (void)basicAnimationOfScaleY {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
    ani.toValue = [NSNumber numberWithFloat:1.5];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ScaleYAni"];
}

效果图:

scaleY.gif

**D.Bound 相关动画 **

// bounds 基本 动画
- (void)basicAnimationOfBounds {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"bounds"];
    ani.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 100, 50)];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"BoundsAni"];
}

效果图:

bounds.gif

// size 基本 动画
- (void)basicAnimationOfSize {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
    ani.toValue = [NSValue valueWithCGSize:CGSizeMake(100, 50)];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"SizeAni"];
}

效果图:

size.gif

// sizeW 基本 动画
- (void)basicAnimationOfSizeW {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"bounds.size.width"];
    ani.toValue = [NSNumber numberWithFloat:450];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"SizeWAni"];
}

效果图:

sizeW.gif

// sizeH 基本 动画
- (void)basicAnimationOfSizeH {

    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"bounds.size.height"];
    ani.toValue = [NSNumber numberWithFloat:150];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"SizeWAni"];
}

效果图:

sizeH.gif

E.Opacity 动画// opacity 基本动画

- (void)basicAnimationOfOpacity {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"opacity"];
    ani.toValue = [NSNumber numberWithFloat:0];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"OpacityAni"];
}

效果图:

opacity.gif

**F.BackgroundColor 动画 **

// backgroundColor 基本 动画
- (void)basicAnimationOfBackgroundColor {
    [self.signInView setImage:nil forState:UIControlStateNormal];
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"backgroundColor"];
    ani.toValue = (id)[UIColor greenColor].CGColor;
    ani.removedOnCompletion = NO;
    ani.duration = 3.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"BackgroundColorAni"];
}

效果图

backgroundColor.gif

G.CornerRadius 动画

// cornerRadius 基本 动画
- (void)basicAnimationOfCornerRadius {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    ani.toValue = [NSNumber numberWithFloat:30];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"CornerRadiusAni"];
}

效果图:

cornerRadius.gif

**H.BorderWidth 和 BorderColor动画 **

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self basicAnimationOfCornerRadius];
    [self basicAnimationOfBordeColor];
    [self basicAnimationOfBorderWidth];
}

// borderWidth 基本 动画
- (void)basicAnimationOfBorderWidth {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"borderWidth"];
    ani.toValue = [NSNumber numberWithFloat:10];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"BorderWidthAni"];
}

// borderColor 基本 动画
- (void)basicAnimationOfBordeColor {
    self.signInView.backgroundColor = [UIColor greenColor];
    [self.signInView setImage:nil forState:UIControlStateNormal];
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"borderColor"];
    ani.toValue = (id)[UIColor blueColor].CGColor;
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"BorderColorAni"];
}

效果图:

bordeColor.gif

I.contents 相关动画

// contents 基本 动画
- (void)basicAnimationOfContents {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"contents"];
    ani.toValue = (id)[UIImage imageNamed:@"serviceActivity.png"].CGImage;
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.imageView.layer addAnimation:ani forKey:@"ContentsAni"];
}

效果图:

contents.gif

J.shadow 相关动画(shadow需要将:_signInView.clipsToBounds = NO)

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self basicAnimationOfShadowoffset];
    [self basicAnimationOfShadowColor];
}

// shadowOffset 基本动画
- (void)basicAnimationOfShadowoffset {
CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"shadowOffset"];
ani.fromValue = [NSValue valueWithCGSize:CGSizeMake(3,4)];
ani.toValue = [NSValue valueWithCGSize:CGSizeMake(13, 10)];
ani.removedOnCompletion = NO;
ani.duration = 1.0f;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.signInView.layer addAnimation:ani forKey:@"ShadowOffsetAni"];
}

// shadowColor 基本 动画
- (void)basicAnimationOfShadowColor {
    self.signInView.layer.shadowOpacity = 1.0f;
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"shadowColor"];
    ani.fromValue = (id)[UIColor blackColor].CGColor;
    ani.toValue = (id)[UIColor greenColor].CGColor;
    ani.removedOnCompletion = NO;
    ani.duration = 3.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ShadowColorAni"];
}

效果图:

borderColorAndOffset.gif

**shadowOpacity 动画 **

  // 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self basicAnimationOfShadowoffset];
    [self basicAnimationOfShadowColor];
    [self basicAnimationOfShadowOpacity];
}

// shadowOpacity 基本 动画
- (void)basicAnimationOfShadowOpacity {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
    ani.fromValue = [NSNumber numberWithFloat:1.0f];
    ani.toValue = [NSNumber numberWithFloat:0.3];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ShadowOpacityAni"];
}

** shadowRadius 动画 **

// 点击 事件
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event {
    [self basicAnimationOfShadowoffset];
    [self basicAnimationOfShadowColor];
    [self basicAnimationOfShadowRadius];
}

// shadowRadius 基本 动画
- (void)basicAnimationOfShadowRadius {
    CABasicAnimation *ani = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
    ani.fromValue = [NSNumber numberWithFloat:1.0f];
    ani.toValue = [NSNumber numberWithFloat:20.0f];
    ani.removedOnCompletion = NO;
    ani.duration = 1.0f;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction f    unctionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.signInView.layer addAnimation:ani forKey:@"ShadowRadiusAni"];
}

效果图:

borderRadius.gif

CAKeyframeAnimation：

   可以设定keyPath起点、中间关键点（不止一个）、终点的值，每一帧所对应的时间，动画会沿着设定点进行移动。

重要属性:

values：关键帧数组对象，里面每一个元素即为一个关键帧，动画会在对应的时间内，依次执行数组中每一个关键帧的动画。
path：动画路径对象，可以指定一个路径，在执行动画时会沿着路径移动，path在路径中只会影响视图的Position.
keyTimes：设置关键帧对应的时间点，范围:0-1.如果没有设置该属性，则每一帧的时间平分。

**1. position 正方形动画 **

// position  动画
- (void)positionKeyFrameAnimation {
    CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    ani.duration = 5.0f;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(150, 100)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(250, 100)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(250, 200)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(150, 100)];
    ani.values = @[value1, value2, value3, value4, value5];

    ani.keyTimes = [NSArray arrayWithObjects:
                    [NSNumber numberWithFloat:0.0],
                    [NSNumber numberWithFloat:0.2],
                    [NSNumber numberWithFloat:0.3],
                    [NSNumber numberWithFloat:0.6],
                    [NSNumber numberWithFloat:1.0],
                    nil];
    [self.signInView.layer addAnimation:ani forKey:@"PositionKeyFrameAni"];
 }

效果图:

KeyFrameAnimation_Position.gif

**2.rotation 动画 **

// rotation 动画
- (void)rotationKeyFrameAnimation {
    CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
    ani.duration = 5.0f;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

    NSValue *value1 = [NSNumber numberWithFloat:0 * M_PI];
    NSValue *value2 = [NSNumber numberWithFloat:0.5 * M_PI];
    NSValue *value3 = [NSNumber numberWithFloat:1 * M_PI];
    NSValue *value4 = [NSNumber numberWithFloat:1.5 * M_PI];
    NSValue *value5 = [NSNumber numberWithFloat:2 * M_PI];

    ani.values = @[value1, value2, value3, value4, value5];

    [self.signInView.layer addAnimation:ani forKey:nil];
}

效果图:

KeyFrameAnimation_Rotation.gif

**3.path 相关动画 **

// path 圆圈 动画
- (void)ellipsePathKeyframeAnimation {

    CAKeyframeAnimation *ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 80, 100, 100));
    [ani setPath:path];
    [ani setDuration:3.0];
    CFRelease(path);
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    [self.signInView.layer addAnimation:ani forKey:@"path"];
}

效果图:

KeyFrameAnimation_EllipsePath.gif

// path 波浪线 动画
- (void)sinPathKeyframeAnimation {

    CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];

    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 50.0, 120.0);
    CGPathAddCurveToPoint(path, NULL, 50.0, 275.0, 150.0, 275.0, 150.0, 120.0);
    CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,250.0,120.0);
    CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,350.0,120.0);
    CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,450.0,120.0);


    [anim setPath:path];
    [anim setDuration:3.0];
    [anim setAutoreverses:YES];
    CFRelease(path);
    [self.signInView.layer addAnimation:anim forKey:@"sinPathAni"];
}

效果图:

KeyFrameAnimation_SinPath.gif

**4.transform 动画 **

// transform 动画
- (void)transformKeyFrameAnimation {
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];

    CATransform3D scale1 = CATransform3DMakeScale(0.5, 0.5, 1);
    CATransform3D scale2 = CATransform3DMakeScale(1.2, 1.2, 1);
    CATransform3D scale3 = CATransform3DMakeScale(0.9, 0.9, 1);
    CATransform3D scale4 = CATransform3DMakeScale(1.0, 1.0, 1);

    NSArray *frameValues = [NSArray arrayWithObjects:
                        [NSValue valueWithCATransform3D:scale1],
                        [NSValue valueWithCATransform3D:scale2],
                        [NSValue valueWithCATransform3D:scale3],
                        [NSValue valueWithCATransform3D:scale4],
                        nil];

    [animation setValues:frameValues];

    NSArray *frameTimes = [NSArray arrayWithObjects:
                       [NSNumber numberWithFloat:0.0],
                       [NSNumber numberWithFloat:0.3],
                       [NSNumber numberWithFloat:0.7],
                       [NSNumber numberWithFloat:1.0],
                       nil];

    [animation setKeyTimes:frameTimes];

    animation.fillMode = kCAFillModeForwards;
    animation.duration = 2.0f;

    [self.signInView.layer addAnimation:animation forKey:@"transformAni"];
}

效果图:

KeyFrameAnimation_ transForm.gif

CATransition：

转场动画，比UIView转场动画具有更多的动画效果，比如Nav默认的Push视图效果就是通过CATransition的kCATransitionPush类型来实现的。

** CATransition 重要属性:**
type：过渡动画的类型：

kCATransitionFade 渐变
kCATransitionMoveIn 覆盖
kCATransitionPush 推出
kCATransitionReveal 揭开

私有动画类型(不推荐使用):

"cube"                                        //翻转，立方体的翻转效果
"suckEffect"                               //右下角变小然后整张图移到左上角消失
"oglFlip"                                     //绕中心翻转
"rippleEffect"                              //文本抖动了一下
"p7ageCurl"                               //跟fade渐变效果差不多
"pageUnCurl"                             //翻书的效果
"cameraIrisHollowClose"           //相机关闭
"cameraIrisHollowOpen"           //类似相机照相效果

subtype:过渡动画方向

kCATransitionFromRight 从右边
kCATransitionFromLeft 从左边
kCATransitionFromTop 从顶部
kCATransitionFromBottom 从底部

** transition 相关类型动画:

- (void)transitionAni {
    CATransition *ani = [CATransition animation];
    ani.type = kCATransitionFade;
    ani.subtype = kCATransitionFromLeft;
    ani.duration = 3.0f;
    [self.signInView setImage:[UIImage imageNamed:@"serviceActivity.png"] forState:UIControlStateNormal];
    [self.signInView.layer addAnimation:ani forKey:@"transitionAni"];
}

效果图:

transitionAnimation_ fade.gif

当ani.type = kCATransitionMoveIn;
效果图:

transitionAnimation_ MoveIn.gif

当ani.type = kCATransitionPush;
效果图:

transitionAnimation_ Push.gif

当ani.type = kCATransitionReveal;
效果图:

transitionAnimation_ Reveal.gif

当ani.type = @"cube";
效果图:

transitionAnimation_ Cube.gif

当ani.type = @"suckEffect";
效果图:

transitionAnimation_ SuckEffect.gif

当ani.type = @"oglFlip";
效果图:

transitionAnimation_ OglFlip.gif

当ani.type = @"rippleEffect";
效果图:

transitionAnimation_ RippleEffect.gif

当ani.type = @"p7ageCurl";
效果图:

transitionAnimation_ P7ageCurl.gif

当ani.type = @"pageUnCurl";
效果图:

transitionAnimation_ PageUnCurl.gif

当ani.type = @"cameraIrisHollowClose";
效果图:

transitionAnimation_ CameraIrisHollowClose.gif

当ani.type = @"cameraIrisHollowOpen";
效果图:

transitionAnimation_ CameraIrisHollowOpen.gif

CASpringAnimation:

弹簧动画，是iOS9.0新加入的动画类型，是CABasicAnimation的子类

CASpringAnimation的重要属性

mass: 质量(影响弹簧的惯性，质量越大、弹簧的惯性越大，运动的幅度也越大)
stiffnes: 弹性系数(弹性系数越大，弹簧运动越快)
damping: 阻尼系数(阻尼系数越大，弹簧的停止越快)
initivelocity: 初始速率(弹簧动画的初始速度大小，弹簧运动的初始方向与初始速率的正负一致，若初始速率为0，表示忽略该属性)
settingDuration: 结算时间(根据动画相关参数估算弹簧开始运动到停止的时间，动画设置的时间最好根据此时间来设置)

CASpringAnimation和UIView的SpringAnimation对比:

CASpringAnimation 可以设置更多弹簧动画效果的属性，可以实现更复杂的弹簧效果，可以和其他动画组合
UIView的SpringAnimation实际上就是通过CASpringAnimation来实现的。

以 transform.scale 为例 :

// 弹簧 动画
- (void)springAnimation {
    CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
    ani.mass = 10.0; //质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大
    ani.stiffness = 500; //刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快
    ani.damping = 100.0;//阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快
    ani.initialVelocity = 30.f;//初始速率，动画视图的初始速度大小;速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
    ani.duration = ani.settlingDuration;
    ani.toValue = [NSNumber numberWithFloat:1.5];
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeForwards;
    ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.cartCenterView.layer addAnimation:ani forKey:@"boundsAni"];
}

效果图:

springAnimation_Scale.gif

CAAnimationGroup:

使用CAAnimationGroup可以将多个动画加入到一个UILayer上面，group中所有的动画并发执行，可以实现多种类型动画同步执行的场景.

以position、transform.rotation.x、transform.scale、opacity:

#pragma mark ---  CAAnimationGroup
// group  动画
- (void)groupAnimation {
    /* 动画1（位置 动画） */
    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"position"];
    animation1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    animation1.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 80)];



    /* 动画2（绕X轴中心旋转） */
    CABasicAnimation *animation2 =
    [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    animation2.toValue = [NSNumber numberWithFloat:2*M_PI];


    /* 动画3（缩放动画） */
    CABasicAnimation * animation3 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation3.toValue = [NSNumber numberWithFloat:0.5];


    /* 动画4（透明动画） */
    CABasicAnimation * animation4 = [CABasicAnimation animationWithKeyPath:@"opacity"];
    animation4.toValue = [NSNumber numberWithFloat:0.5];


    /* 动画组 */
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.duration = 3.0;
    group.repeatCount = 1;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
    group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    group.animations = [NSArray arrayWithObjects:animation1, animation2, animation3, animation4, nil];
    [self.signInView.layer addAnimation:group forKey:@"transformGoup"];

}

六.最后

送上一张喜欢的图片:

美好.jpg

这是gitHub链接地址:CoreAnimationDemo,大家有兴趣可以看一下，如果觉得不错，麻烦给个喜欢或star,若发现问题请及时反馈，谢谢！

核心动画:Core Animation (整理笔记)

一.简介

二.CALayer与UIView关系

1.UIView 包含 CALayer

2.UIView具有事件处理功能

三.CALayer 简介

1.CALayer基本属性

四. CATransaction

五.Core Animation

1.Core Animation 概要

2.核心动画类的层次结构

3. 核心动画类的方法

4.具体类介绍

CABasicAnimation

CAKeyframeAnimation：

CATransition：

CASpringAnimation:

CAAnimationGroup:

六.最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

iOS专题资源__系统知识点

work

iOS专题资源__UI专题

iOS 自定义转场

动画

iOS && Android

动画与绘图

今日看点