iOS动画详解

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 一个设置数组，可以设置动画的执行状态，如重复，加速度方式等等

本文是来自我公号的文章，欢迎大家关注我的公众号，更快的更新更友爱的微信群更全的源码示例。

image