iOS动画详解

Created: Mar 17, 2019 5:46 PM

今天聊一下iOS常用的四种动画CABasicAnimation，CAKeyframeAnimation，CATransition，以及UIView的animate。

CABasicAnimation，CAKeyframeAnimation，CATransition这三个动画的基类其实都是CAAnimation，这种动画有个最大的特点是，执行完动画，属性不会发生变化，比如一个View从A点移动到B点，其实坐标还是A点。

下面做一下详细的介绍：

CAAnimation

CAAnimation在设置动画的时候有以下通用属性：

fromValue: 动画的开始值
toValue: 动画的结束值
beginTime: 动画的开始时间
duration : 动画的持续时间
repeatCount : 动画的重复次数
fillMode: 动画的运行场景
isRemovedOnCompletion: 完成后是否删除动画
autoreverses: 执行的动画按照原动画返回执行

CABasicAnimation（基础动画）

基础动画主要提供了对于CALayer对象中的可变属性进行简单动画的操作。比如：位移、旋转、缩放、透明度、背景色等。

基础动画根据 keyPath 来区分不同的动画。keyPath可以是：

transform.scale (比例转换)
- transform.scale.x
- transform.scale.y、
transform.rotation(旋转)
- transform.rotation.x(绕x轴旋转)
- transform.rotation.y(绕y轴旋转)
- transform.rotation.z(绕z轴旋转)、
opacity (透明度)
margin
backgroundColor(背景色)
cornerRadius(圆角)
borderWidth(边框宽）
bounds
contents
contentsRect
cornerRadius
frame
hidden
mask
masksToBounds
shadowColor(阴影色)
shadowOffset
shadowOpacity

代码示例：

		CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath:@"position"];
    animation.fromValue = [NSValue valueWithCGPoint:self.aView.center];
    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.aView.center.x+100, self.aView.center.y)];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click1"];

以上代码可以实现将view沿x轴移动100

CAKeyframeAnimation（关键帧动画）

关键帧动画，顾名思义，我们只需要设定一个关键点，然后view便可以将几个关键点形成自然的过度。

关键帧动画，有些特殊的属性：

path：关键帧动画中的执行路径
values: 关键帧动画中的关键点数组

示例代码：

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];
    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];
    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];
    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];
    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 300)];
    NSValue *value6=[NSValue valueWithCGPoint:CGPointMake(200, 400)];
    animation.values=@[value1,value2,value3,value4,value5,value6];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.delegate = self;
    animation.duration = 3.0;
    [animation setRepeatDuration:20];
    animation.repeatCount = 3;
    [self.aView.layer addAnimation:animation forKey:@"click2"];

CATransition(过渡动画)

CATransition 用于做过渡动画或者转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

所以这里要注意的是它的特殊应用场景，CATransition是为了实现一个view移入或移除屏幕而设计的。可以将其想象成ppt的动画效果。

他也有一些特殊属性：

type：过渡动画的动画类型，系统提供了多种过渡动画（官方提供了四种fade, moveIn, push and reveal. Defaults to fade.）
subtype : 过渡动画的动画方向,（系统提供了四种：fromLeft(从左侧)fromRight (从右侧)fromTop (有上面）fromBottom (从下面））

代码示例：

    CATransition * animation = [CATransition animation];
    animation.type = @"pageCurl";
    animation.subtype = kCATransitionFromLeft;
    animation.duration = 3;
    [self.aView.layer addAnimation:animation forKey:@"click3"];

UIView

UIView的动画是可以改变View组件的属性的，它支持对一下属性进行更改：

frame
bounds
center
transform
alpha
backgroundColor
contentStretch

如：

- (void)clicked4:(id)sender{
    
    [UIView animateWithDuration:3 animations:^{
        self.aView.frame = CGRectMake(80, 80, 80, 80);
    } completion:^(BOOL finished) {
        NSLog(@"aaaaaa 结束");
    }];
}

UIView动画有以下几个参数：

animateWithDuration执行时间
animations 动画的类型，其实是一个回调，可以在这个回调中设置aView最终的属性，然后根据现在的属性到这个最终属性，实现一个动画
completion执行完毕的回调
delay等待时间
options 一个设置数组，可以设置动画的执行状态，如重复，加速度方式等等