iOS动画小结

CoreAnimation核心动画：

CAAnimation类是一个抽象类，因此我们不会直接创建CAAnimation类的对象，而是使用其子类对象。其有3个子类，分别为：

• CAPropertyAnimiation属性动画
• CAAnimationGroup动画组
• CATransition转场动画

其中，CAPropertyAnimiation属性动画又包含两个子类，分别为：

• CABasicAnimation基本动画
• CAKeyframeAnimation关键帧动画

在iOS9发布后，CABasicAnimation基本动画又添加了一个子类CASpringAnimation弹簧动画。

#CAMediaTiming协议常用属性

CAAnimation类遵守了CAMediaTiming协议，在该协议中定义了一些常用的与动画播放相关的属性。常用的包括如下几个。

• beginTime：动画开始播放的时间，默认为0，即立即开始播放

@property CFTimeInterval beginTime;

• duration:动画持续的时间，默认为0

@property CFTimeInterval duration;

• speed：动画播放的速度，默认为1，数值越大播放的速度越快，例如，当取值为2时，以两倍速度播放动画

@property float speed;

• repeatCount：动画重复播放的次数

@property float repeatCount;

• repeatDuration：动画重复播放的时间间隔

@property CFTimeInterval repeatDuration;

• fillMode：定义动画播放完毕后的动作，一共有4个可选动作，默认为：kCAFillModeRemoved，即恢复原样

@property(copy) NSString *fillMode;

CA_EXTERN NSString * const kCAFillModeForwards;
CA_EXTERN NSString * const kCAFillModeBackwards;
CA_EXTERN NSString * const kCAFillModeBoth;
CA_EXTERN NSString * const kCAFillModeRemoved;

#CAAnimation类的代理协议CAAnimationDelegate

CAAnimationDelegate是CAAnimation类的代理协议，其中定义了与动画播放相关的一些方法，主要包括：

• 动画开始播放时调用的方法

- (void)animationDidStart:(CAAnimation *)anim;

• 动画停止播放时调用的方法，停止播放的原因有可能是动画播放完成，也有可能是人为控制动画停止播放

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------

介绍一下相对比较常见的两种动画CABasicAnimation（基本动画）和CATransition转场动画（转场动画），以备后用

#CABasicAnimation基本动画

CABasicAnimation类是使用最简单的核心动画类，我们只需要指定keyPath，然后设置起始值(fromValue)和目标值(toValue)，然后再把该动画对象添加到一个CALayer类的对象上，即可实现动画的播放。

• keyPath的初始值，默认情况下为空。当不设置fromValue的值时，动画播放的初始值取自layer对象的keyPath指定属性的当前值

@property(nullable, strong) id fromValue;

• keyPath的目标值，即变动后的值

@property(nullable, strong) id toValue;

• 乘数。当fromValue不为空时，目标值为fromValue 乘以 byValue；当fromValue为空时，目标值为layer对象的keyPath指定属性的当前值乘以byValue

@property(nullable, strong) id byValue;

示例代码

下方的示例代码中，在控制器类中添加了一个CALayer类型的属性myLayer，并且针对myLayer设置了一个平移的动画。

• 在控制器类中添加一个CALayer类的属性，作为动画播放的layer

@interface ViewController ()
@property (nonatomic, strong) CALayer *myLayer;
@end

• 通过懒加载的方式，设置自定义layer的属性

-(CALayer *)myLayer{
    if (_myLayer == nil) {
        _myLayer = [CALayer layer];
        _myLayer.frame = CGRectMake(140, 100, 100, 100);
        _myLayer.backgroundColor = [UIColor yellowColor].CGColor;
        _myLayer.borderColor = [UIColor redColor].CGColor;
        _myLayer.borderWidth = 4.0;
        _myLayer.cornerRadius = 2.0;
    }
    return _myLayer;
}

• 添加该自定义layer到控制器视图的layer上

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view.layer addSublayer:self.myLayer];
}

• 当点击屏幕时，播放平移动画

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //1. 实例化CABasicAnimation对象
    CABasicAnimation *animation = [CABasicAnimation animation];
    //2. 设置动画属性
    animation.keyPath = @"transform.translation.x";
    animation.toValue = @100;
    animation.duration = 2.0;
    //3. 添加动画对象到一个CALayer类的对象上，播放动画
    [self.myLayer addAnimation:animation forKey:nil];å
}

 

#CATransition转场动画

通过设置CATransition类中的属性，我们可以定制转场动画的效果，常用的属性主要包括：

• type:动画的类型。常用的有4种：fade(渐变)、moveIn(移入)、push(推入)、reveal(移出)，默认为fade(渐变)

@property(copy) NSString *type;

• subType:动画的子类型，可以指定动画播放时开始的方位或方向，有4中方式：fromLeft(从左开始)、fromRight(从右开始)、fromTop(从上开始) 、fromBottom(从下开始)

@property(nullable, copy) NSString *subtype;

• 转场动画启动时以及结束时的进度百分比，取值为0~1，通过设置这两个属性，我们可以实现动画从中间某个状态开始播放，或者在中间某个状态提前结束。

@property float startProgress;
@property float endProgress;

示例：

在下方的示例代码中，我们实现了当点击屏幕时，切换一个UIImageView控件显示图像的动画过程。

• 在控制器类中添加一个UIImageView类的属性

@interface ViewController ()
@property (nonatomic ,strong) UIImageView *transitionView;
@end

• 通过懒加载的方式，设置transitionView的属性

-(UIImageView *)transitionView{
    if (_transitionView == nil) {
        _transitionView = [[UIImageView alloc] initWithFrame:CGRectMake(140, 100, 100, 100)];
        _transitionView.image = [UIImage imageNamed:@"99ios"];
    }
    return _transitionView;
}

• 添加transitionView到控制器视图的view上

- (void)viewDidLoad {
    [super viewDidLoad];
    [self.view addSubview:self.transitionView];
}

• 当点击屏幕时，transitionView显示的图片会发生变化，但变化的过程会展示一段动画。

-(void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    //切换图片显示
    self.transitionView.image = [UIImage imageNamed:@"football"];
    //创建一个CATransition动画对象
    CATransition *animation = [CATransition animation];
    animation.type = @"fade";
    animation.duration = 2.0;
    //添加CATransition对象到transitionView的layer上
    [self.transitionView.layer addAnimation:animation forKey:nil];
}