iOS 基础动画

iOS的动画效果一直都很棒很，给人的感觉就是很炫酷很流畅，起到增强用户体验的作用。在APP开发中实现动画效果有很多种方式，对于简单的应用场景，我们可以使用UIKit提供的动画来实现。

UIView动画

UIView动画实质上是对CoreAnimation的封装，iOS4.0以后，增加了Block动画块，提供更简洁的方式来实现动画。

共有六个常见的Block动画方法：

• 1、最简单的Block动画，包含时间和动画[UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#>];

• 2、带有动画完成回调的Block动画 [UIView animateWithDuration:<#(NSTimeInterval)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>];

• 3、可设置延迟时间和过渡效果的Block动画 ``[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

• 4、Spring动画，iOS7.0后新增Spring动画（iOS系统动画大部分采用SpringAnimation，适用于所有可被添加动画效果的属性）[UIView animateWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> usingSpringWithDamping:<#(CGFloat)#> initialSpringVelocity:<#(CGFloat)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

• 5、Keyframes动画，iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧 [UIView animateKeyframesWithDuration:<#(NSTimeInterval)#> delay:<#(NSTimeInterval)#> options:<#(UIViewKeyframeAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

• 6、转场动画

  • 从旧视图转到新视图的动画效果，在该动画过程中，fromView会从父视图中移除，并讲toView添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）[UIView transitionFromView:<#(nonnull UIView *)#> toView:<#(nonnull UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> completion:<#^(BOOL finished)completion#>]

• 单个视图的过渡效果 [UIView transitionWithView:<#(nonnull UIView *)#> duration:<#(NSTimeInterval)#> options:<#(UIViewAnimationOptions)#> animations:<#^(void)animations#> completion:<#^(BOOL finished)completion#>]

UIView动画可以设置的动画属性有

• 1、大小变化（frame）
• 2、拉伸变化（bounds）
• 3、中心位置变化（center）
• 4、旋转（transform）
• 5、透明度（aipha）
• 6、背景色（backgroundColor）

transform属性作用:给我们的控件做一些形变,(平移,缩放,旋转)
移动

// 平移
//每次移动都是相对于上次位置
 _redView.transform = CGAffineTransformTranslate(_redView.transform, 100, 0);
//每次移动都是相对于最开始的位置
 _redView.transform = CGAffineTransformMakeTranslation(200, 0);

缩放

// sx:宽度缩放的比例 sy:高度缩放的比例
//每次缩放都是相对于最初的大小
_redView.transform = CGAffineTransformMakeScale(0.5, 0.5);
//每次缩放都是相对于上次的大小
_redView.transform = CGAffineTransformScale(_redView.transform, 0.5, 0.5);

旋转

// 每次旋转都是相对于最初的角度
_redView.transform = CGAffineTransformMakeRotation(M_PI_4);
//每次旋转都是相对于现在的角度
_redView.transform = CGAffineTransformRotate(_redView.transform, M_PI_4);

实战说明

1、最简洁的Block动画：包含时间和动画

代码

[UIView animateWithDuration:3 animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移
    }];

效果图

animation1.gif

2、可设置延迟时间和过渡效果的Block动画

代码

[UIView animateWithDuration:3 delay:1 options:UIViewAnimationOptionTransitionCurlDown animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移
        
    } completion:^(BOOL finished) {
        NSLog(@"动画完成的回调");
    }];

UIViewAnimationOptions的枚举值如下，可组合使用

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedCurve//忽略嵌套动画的曲线设置
UIViewAnimationOptionAllowAnimatedContent//转场：进行动画时重绘视图
UIViewAnimationOptionShowHideTransitionViews//转场：移除（添加和移除图层的）动画效果
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewAnimationOptionCurveEaseInOut//时间曲线，慢进慢出（默认值）
UIViewAnimationOptionCurveEaseIn//时间曲线，慢进
UIViewAnimationOptionCurveEaseOut//时间曲线，慢出
UIViewAnimationOptionCurveLinear//时间曲线，匀速
UIViewAnimationOptionTransitionNone//转场，不使用动画
UIViewAnimationOptionTransitionFlipFromLeft//转场，从左向右旋转翻页
UIViewAnimationOptionTransitionFlipFromRight//转场，从右向左旋转翻页
UIViewAnimationOptionTransitionCurlUp//转场，下往上卷曲翻页
UIViewAnimationOptionTransitionCurlDown//转场，从上往下卷曲翻页
UIViewAnimationOptionTransitionCrossDissolve//转场，交叉消失和出现
UIViewAnimationOptionTransitionFlipFromTop//转场，从上向下旋转翻页
UIViewAnimationOptionTransitionFlipFromBottom//转场，从下向上旋转翻页

3、Spring动画

usingSpringWithDamping:震动效果，范围0~1，数值越小震动效果越明显
initialSpringVelocity:初始速度，数值越大初始速度越快

 [UIView animateWithDuration:3 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:100 options:UIViewAnimationOptionRepeat animations:^{
        //执行动画
        _MyView.transform = CGAffineTransformScale(_MyView.transform, 0.5, 0.5);//缩放
        _MyView.transform = CGAffineTransformRotate(_MyView.transform, M_PI_4);//旋转
        _MyView.transform = CGAffineTransformTranslate(_MyView.transform, 200, 100);//平移

    } completion:^(BOOL finished) {
        
    }];

效果图

animation2.gif

4、Keyframes动画

iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧
options:动画的过渡效果

[UIView animateKeyframesWithDuration:0.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor blueColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:1 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor grayColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:1.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor greenColor];
    } completion:nil];
    
    [UIView animateKeyframesWithDuration:2 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeCubicPaced animations:^{
        _MyView.backgroundColor = [UIColor redColor];
    } completion:nil];

UIViewKeyframeAnimationOptions的枚举值如下，可组合使用：

UIViewAnimationOptionLayoutSubviews//进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction//进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState//从当前状态开始动画
UIViewAnimationOptionRepeat//无限重复执行动画
UIViewAnimationOptionAutoreverse//执行动画回路
UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions//不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear//运算模式:连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete//运算模式:离散
UIViewKeyframeAnimationOptionCalculationModePaced//运算模式:均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic//运算模式:平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced//运算模式:平滑均匀

效果图

animation3.gif

5、转场动画

单个视图的过渡效果

代码

[UIView transitionWithView:_MyView duration:1 options:UIViewAnimationOptionOverrideInheritedCurve animations:^{
        _MyView.backgroundColor = [UIColor greenColor];
    } completion:nil];

效果图

animation4.gif

从旧视图转到新视图的动画效果

[UIView transitionFromView:_MyView toView:_view duration:1 options:UIViewAnimationOptionTransitionFlipFromTop completion:nil];

CAAnimation核心动画

在iOS的不同图形层次中都可以写动画代码。越上层，封装程度越高，动画实现越简洁越简单，但是自由度越低；反之亦然。
如果想要做出更炫的动画，就必须要了解CAAnimation核心动画了。

Core Animation结构

1053533-6eae72f7fd9bd271.png 屏幕快照 2017-04-20 下午9.56.37.png

基础动画（CABasicAnimation）

基础动画（CABasicAnimation），通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

开始之前我们需要先了解一个概念：CALayer

CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。
我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。
一般来说，layer可以有两种用途：一是对view相关属性的设置，包括圆角、阴影、边框等参数，更详细的参数请点击这里；二是实现对view的动画操控。因此对一个view进行动画，本质上是对该view的.layer进行动画操纵。

注意点1:KeyPath中key值的设置

实例化方法

 //围绕y轴旋转
CABasicAnimation *transformAnima = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];

使用方法animationWithKeyPath:对CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。
keyPath决定了基础动画的类型，该值不能随便取，一旦取错就达不到想要的效果。要改变位置就取position，要改变透明度就取opacity，要等比例缩放就取transform.scale...
一些常用的animationWithKeyPath值的总结

3D62A8E2-94E2-4FC3-AE05-A71296F4B324.png

注意点2:fillMode属性的理解

该属性定义了你的动画在开始和结束时的动作。默认值是 kCAFillModeRemoved
fillMode的作用就是决定当前对象过了非active时间段的行为. 非active时间段是指动画开始之前以及动画结束之后。如果是一个动画CAAnimation,则需要将其removedOnCompletion设置为NO,要不然fillMode不起作用.

kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态
kCAFillModeBackwards这个和kCAFillModeForwards是相对的,就是在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态。因为有可能出现fromValue不是目前layer的初始状态的情况，如果fromValue就是layer当前的状态，则这个参数就没太大意义。
kCAFillModeBoth理解了上面两个,这个就很好理解了,这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态.

注意点3

[self.view.layer addAnimation:positionAnima forKey:@"AnimationMoveY"];我们可以根据这个Key找到这个layer

注意点4:一些常用的属性

7E7672C6-9B0E-4743-9533-C3B506329F1D.png

我们做一个心跳的效果

代码

//初始化CALayer
    CALayer *layer = [[CALayer alloc]init];
    layer.backgroundColor = [UIColor redColor].CGColor;
    layer.frame = CGRectMake(100, 100, 100, 100);
    layer.cornerRadius = 10;
    [self.view.layer addSublayer:layer];
    //配置CABasicAnimation
    CABasicAnimation *basicAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    basicAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    basicAnimation.toValue = [NSNumber numberWithFloat:1.5];
    //当动画执行到toValue指定的状态时是从toValue的状态逆回去，还是直接跳到fromValue的状态再执行一遍
    basicAnimation.autoreverses = YES;
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.duration = 0.5;
    basicAnimation.repeatCount = MAXFLOAT;
    //把动画内容添加到layer上
    [layer addAnimation:basicAnimation forKey:@"basicAnimation"];

basicAnimation.gif

关键帧动画（CAKeyFrameAnimation）

CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue)，而CAKeyframeAnimation会使用一个NSArray保存这些数值

属性介绍

• values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧

• path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略

• keyTimes：可以为对应的关键帧指定对应的时间点,其取值范围为0到1.0,keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间是平分的

value方式代码

 //创建动画对象
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //设置value
    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];
    
    //重复次数 默认为1
    animation.repeatCount=MAXFLOAT;
    //设置是否原路返回默认为不
    animation.autoreverses = YES;
    //设置移动速度，越小越快
    animation.duration = 4.0f;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    //给这个view加上动画效果
    [_keyFrameView.layer addAnimation:animation forKey:nil];
    

KeyFrameValue.gif

path方法代码

CAKeyframeAnimation *anima = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(100, 100)];
    [path addLineToPoint:CGPointMake(150, 150)];
    [path addLineToPoint:CGPointMake(100, 200)];
    [path addLineToPoint:CGPointMake(50, 150)];

    anima.path = path.CGPath;
    anima.duration = 2.0f;
    anima.repeatCount= MAXFLOAT;
    anima.autoreverses = NO;
    anima.removedOnCompletion = NO;
    anima.fillMode = kCAFillModeForwards;
    
    
    [_keyFrameView.layer addAnimation:anima forKey:@"pathAnimation"];

KeyFramePath.gif

动画组动画（CAAnimationGroup）

动画组(CAAnimationGroup)是核心动画中又一个比较重要的知识点。动画组顾名思义就是一组动画，它可以将多个动画对象保存起来，然后再将其添加到layer上，让组中所有的动画对象同时并发执行。

 /****************** 创建平移动画 ******************/
    CABasicAnimation *basicAnim = [CABasicAnimation animation];
    // 设置动画属性
    basicAnim.keyPath = @"position.y";
    basicAnim.toValue = @350;
    
    /****************** 创建缩放动画 ******************/
    CABasicAnimation *scaleAnim = [CABasicAnimation animation];
    // 设置动画属性
    scaleAnim.keyPath = @"transform.scale";
    scaleAnim.toValue = @0.5;
    
   ;
    
    /****************** 创建动画组 ******************/
    CAAnimationGroup *groupAnim = [CAAnimationGroup animation];
    // 将动画对象都添加到CAAnimationGroup对象中
    groupAnim.animations = @[basicAnim, scaleAnim];
    
    /****************** 通过动画组对象统一设置动画属性和状态 ******************/
    // 设置动画的执行时长
    groupAnim.duration = 0.5;
    // 动画完成时保持在最新的状态
    groupAnim.removedOnCompletion = NO;
    groupAnim.fillMode = kCAFillModeForwards;
    
    
    groupAnim.duration = 2.0f;
    groupAnim.repeatCount= MAXFLOAT;
    groupAnim.autoreverses = YES;
    groupAnim.removedOnCompletion = NO;
    groupAnim.fillMode = kCAFillModeForwards;

    /****************** 将动画组对象添加到redView的layer上 ******************/
    [_animationGroupView.layer addAnimation:groupAnim forKey:nil];

animationGroup.gif

转场动画（CATranstion）

CATransition是CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。iOS比Mac OS X的转场动画效果少一点
UINavigationController就是通过CATransition实现了将控制器的视图推入屏幕的动画效果
动画属性:
type：动画过渡类型
subtype：动画过渡方向
startProgress：动画起点(在整体动画的百分比)
endProgress：动画终点(在整体动画的百分比)

转场动画过渡效果

屏幕快照 2016-05-25 20.41.32.png