iOS动画

一.UIImageView Gif 动画:

其实就是将一组图片放到UIImageView中,实现图片的快速切换的过程,程序比较简单就不多说了.

    //设置gif图片的播放速率
    self.imageView.animationDuration = 1.0f;

    //设置gif图片数组
    self.imageView.animationImages = imageArray;

    //设置gif图片播放的重复次数,-1为无穷次
    self.imageView.animationRepeatCount = -1;

    //开始播放gif动画
    [self.imageView startAnimating];

二.UIActivityIndicatorView缓冲过程的动图,菊花形式(系统自带的)

效果如图:

代码:

    //缓冲加载图
    self.view.backgroundColor = [UIColor blackColor];
    //加载旋转的菊花效果UIActivityIndicatorView实现我们需要的旋转效果
    //无需设置frame
    UIActivityIndicatorView *indicatorView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    indicatorView.center = self.view.center;
    [self.view addSubview:indicatorView];
    //动画一定要设置启动
    [indicatorView startAnimating];

其实我们一般用第三方的缓冲效果:MBProgressHUD等.

三.UIView基础动画

UIKit直接将动画集成到UIView类中，当内部的一些属性发生改变时，UIView将为这些改变提供动画支持。
执行动画的工作由UIView类自动完成，但仍希望在执行动画时通知视图，为此需要将改变属性的代码放在[UIView beginAnimations:nil context:nil]和[UIView commitAnimations]之间。

①简单动画:

//开始设置UIView基础动画改变尺寸
[UIView beginAnimations:@"move" context:nil];

//开始设置UIView基础动画改变颜色
    [UIView beginAnimations:@"color" context:nil];
//开始设置UIView基础动画改变透明度
    [UIView beginAnimations:@"alpha" context:nil];
    //设置动画时长为2s
    [UIView setAnimationDuration:2];

    //设置动画播放的回调对象
    [UIView setAnimationDelegate:self];

    //改变它的frame的x,y的值,即设置动画的最终值
    tempView.frame=CGRectMake(100,100, 120,100);

//改变动画视图的最终颜色,即设置动画的最终值
tempView.backgroundColor = [UIColor redColor];

    //改变动画视图的最终透明,即设置动画的最终值
    _testView.alpha = 0.0f;

    //开始播放动画
    [UIView commitAnimations];

总结上述:代码套路就三步

[UIView beginAnimations:nil context:nil];
设置动画属性
[UIView commitAnimations];

②.block实现动画效果:

//简单动画

//设置动画的时长为3s
    //设置动画最终的结果为tempView.center等于视图控制器视图的中心点
    //设置动画结束后打印finished
    [UIView animateWithDuration:3 animations:^{
        NSLog(@"start");
        tempView.center = self.view.center;
    } completion:^(BOOL finished) {
        NSLog(@"finished");
    }];

//Block关键帧动画

//duration：整个动画过程的时间。
    //delay：延迟多久开始。
    //options：可选项，比如说重复UIViewKeyframeAnimationOptionRepeat，倒着来一遍等效果
    //animations：需要执行的动画，里面可以是多个UIView.addKeyframeWithRelativeStartTime。
    [UIView animateKeyframesWithDuration:3 delay:0.0 options:UIViewKeyframeAnimationOptionRepeat animations:^{
        //startTime和relativeDuration都是相对与整个关键帧动画的持续时间（这里是3秒）的百分比
        //设置成0.25就代表3*0.25＝0.75(秒)。
        [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.25 animations:^{
            self.planeImage.center = self.view.center;
        }];
    } completion:^(BOOL finished) {
        NSLog(@"finished");
    }];

//UIView的addKeyframeWithRelativeStartTime方法必须实现在
//UIView的animateKeyframesWithDuration的animation参数函数块中。

四.Spring Animation 是一种特殊的动画曲线，自从 iOS 7 开始被广泛应用在系统动画中。

事实上，从 iOS 7 起几乎所有的系统动画都用的是 Spring Animation，包括 App 文件夹打开/关闭效果、键盘弹出效果、UISwitch 控件的开关效果、不同 View Controller 之间的 Push 动画、Modal 出现和消失的动画、Siri 的出现和消失动画，等等.

Spring动画API:

//动画时长参数
(void)animateWithDuration:(NSTimeInterval)duration
//动画延迟参数
                      delay:(NSTimeInterval)delay
//动画阻尼参数,0.0~1.0,越小动画越明显
     usingSpringWithDamping:(CGFloat)dampingRatio
//动画初始变化速率
      initialSpringVelocity:(CGFloat)velocity
//动画可选参数
                    options:(UIViewAnimationOptions)options
//动画最终效果代码块
                 animations:(void (^)(void))animations
//动画播放完成后执行的代码块
                 completion:(void (^)(BOOL finished))completion

这还是比较重要的,我们用代码来看看效果:

 1 __weak typeof(self)weakSelf = self;
 2 
 3     [UIView animateWithDuration:3.0 // 动画时长
 4                           delay:0.0 // 动画延迟
 5          usingSpringWithDamping:1.0 // 类似弹簧振动效果 0~1
 6           initialSpringVelocity:15.0 // 初始速度
 7                         options:UIViewAnimationOptionCurveEaseInOut // 动画过渡效果
 8                      animations:^{
 9                          // code...
10                          CGPoint point = weakSelf.springImageView .center;
11                          point.y += 150;
12                          [weakSelf.springImageView setCenter:point];
13                      } completion:^(BOOL finished) {
14                          // 动画完成后执行
15                          // code...
16                          [weakSelf.springImageView  setAlpha:1];
17                      }];

Spring Animation 是线性动画或 ease-out 动画的理想替代品。由于 iOS 本身大量使用的就是 Spring Animation，用户已经习惯了这种动画效果，因此使用它能使 App 让人感觉更加自然，用 Apple 的话说就是「instantly familiar」。此外，Spring Animation 不只能针对位置变化使用，它适用于所有可被添加动画效果的属性。

五.CoreAnimation

CoreAnimation动画位于iOS框架的Media层
CoreAnimation动画实现需要添加QuartzCore.Framework
CoreAnimation基本上是Layer Animation

CALayer负责绘制，提供UIView 需要展示的内容。不能交互。
UIView负责交互，显示CALayer绘制的内容。

CALayer(层)是屏幕上的一个矩形区域，在每一个UIView中都包含一个根CALayer，在UIView上的所有视觉效果都是在这个Layer上进行的。
CALayer外形特征主要包括：
1、层的大小尺寸
2、背景色
3、内容（可以填充图片或者使用Core Graphics绘制的内容）
4、矩形是否使用圆角
5、矩形是否有阴影

UIView是iOS系统中界面元素的基础，所有的界面元素都是继承自它。它本身完全是由CoreAnimation来实现的。它真正的绘图部分，是由一个CALayer类来管理。UIView本身更像是一个CALayer的管理器，访问它的跟绘图和跟坐标有关的属性，例如frame，bounds等，实际上内部都是在访问它所包含的CALayer的相关属性。
UIView有个重要属性layer，可以返回它的主CALayer实例。
UIView的CALayer类似UIView的子View树形结构，也可以向它的layer上添加子layer，来完成某些特殊的表示。即CALayer层是可以嵌套的。

属性	作用
cornerRadius	圆角
shadowColor	阴影颜色
shadowOffset	阴影偏移距离
shadowRadius	阴影模糊程度
shadowOpacity	阴影透明度
borderWidth	描边粗细
borderColor	描边颜色
anchorPoint	锚点
position	位置信息
transfrom	使CALayer产生3D空间内的平移、缩放、旋转等变化

渲染：当更新层改变不能立即显示在屏幕上，当所有的层都准备好时，可以调用setNeedsDisplay方法来重绘显示。
坐标系统：CALayer的坐标系统比UIView多了一个anchorPoint属性，使用CGPoint结构表示，值域是0~1，是个比例值。这个点是各种图形变换的坐标原点，同时会更改layer的position的位置，它的缺省值是{0.5,0.5}，即在layer的中央，如下图。

动画的运作：对UIView的subLayer（非主Layer）属性进行更改，系统将自动进行动画生成，动画持续时间的缺省值似乎是0.5秒。

变换：要在一个层中添加一个3D或仿射变换，可以分别设置层的transform或affineTransform属性。
变形：Quartz Core的渲染能力，使二维图像可以被自由操纵，就好像是三维的。图像可以在一个三维坐标系中以任意角度被旋转，缩放和倾斜。CATransform3D的一套方法提供了一些魔术般的变换效果。

隐式动画：无需指定任何动画的类型，仅仅改变一个属性，然后Core Animation来决定如何及何时去做动画。
显式动画：对一些属性做指定的自定义动画，或者创建非线性动画，比如沿着任意一条曲线移动。

与UIView动画比:

CoreAnimation能够实现更多复杂、好看、高效的动画效果
阴影，圆角，带颜色的边框
3D变换
透明遮罩
多级非线性动画

CoreAnimation包含的三种动画:

1.CABasicAnimation 基本单一类型的动画
2.CAKeyframeAnimation 帧动画:主要操作属性有 keyPath 和 values 值组合
3.CAAnimationGroup 组合动画:操作属性：animations 将CAAnimation类型的动画加入数组，FIFO队列的方式执行

CABasicAnimation基本单一类型的动画关键属性:

属性关键字	描述
fromValue	动画的效果变化的初始值
toValue	动画效果变化的结束值(绝对值)
byValue	动画效果变化的结束值(相对值)

方式特点	描述
fromValue和toValue都不为空	动画的效果将会从fromValue的值变化到toValue
fromValue和byValue都不为空	动画的效果将会从fromValue的值变化到(fromValue+byValue)
byValue和toValue都不为空	动画的效果将会从(toValue-byValue)的值变化到toValue
只有fromValue的值不为空	动画的效果将会从fromValue的值变化到当前状态的值
只有toValue的值不为空	动画的效果将会从当前状态的值变化到toValue的值
只有byValue的值不为空	动画的效果将会从当前状态的值变化到(当前状态的值+byValue)的值

代码示例:

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"opacity"];
   animation.toValue = @0.0f;
   animation.fromValue = @(self.layer.opacity);
   animation.duration = 1.0;
   [self.layer addAnimation:animation forKey:@"animateOpacity"];

这里会存在一个小问题就是:当UIView移动到指定位置后，会返回到初始位置，那是因为动画作用在表示层，当动画结束时，动画会被移除掉，此刻模型层Layer还没有变化，所以最终会回到初始位置。

解决方式：直接作用到模型层，改变模型层的属性值

CAKeyframeAnimation帧动画关键属性:

属性关键字	描述
values	每一帧,动画效果的状态值
path	提供一个动画移动的路径,默认为空
keyTimes	定义values数组中每个值会在整个动画的哪个时间段被使用
rotationMode	定义动画物体是否沿着路径旋转

当path属性不为空时，values会不起作用！

代码:

 1 //创建一个移动的路径
 2     UIBezierPath *path = [UIBezierPath bezierPath];
 3     [path moveToPoint:CGPointMake(-40, 100)];
 4     [path addLineToPoint:CGPointMake(360, 100)];
 5     [path addLineToPoint:CGPointMake(360, 200)];
 6     [path addLineToPoint:CGPointMake(-40, 200)];
 7     [path addLineToPoint:CGPointMake(-40, 300)];
 8     [path addLineToPoint:CGPointMake(360, 300)];
 9     //创建关键帧实例
10     CAKeyframeAnimation *moveAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
11     //给定动画路径
12     moveAnimation.path = path.CGPath;
13     //给定动画的周期
14     moveAnimation.duration = 8.0f;
15     //添加的代码(可以实现翻转效果)
16     moveAnimation.rotationMode = kCAAnimationRotateAuto;
17     //添加动画
18     [self.imageView.layer addAnimation:moveAnimation forKey:@"moveAnimation"];

除了按照路径移动之外,我们还可以根据翻转角度实现动画的效果:

 //第一步:创建一个对象
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
    //第二步设置动画轨迹
    keyFrameAnimation.keyPath = @"transform.rotation";
    //第三步:设置旋转角度(弧度的计算公式:度数/180*M_PI),按照数组顺序旋转
    keyFrameAnimation.values = @[@(-90/180.0*M_PI), @(0/180.0*M_PI), @(90/180.0*M_PI)];
    //第四步:设置时长
    keyFrameAnimation.duration = 3.0f;
    //第五步:添加动画到layer层
    [self.imageView.layer addAnimation:keyFrameAnimation forKey:@"keyFrameAnimation"];

CAKeyframeAnimation组合动画:

属性关键字

描述

animations

表示执行的动画内容(一组动画)，包括透明度的渐变，移动，缩放等。

属性关键字	描述
mass	质量:影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大
stiffness	刚度系数(劲度系数/弹性系数):刚度系数越大，形变产生的力就越大，运动越快
damping	阻尼系数:阻止弹簧伸缩的系数，阻尼系数越大，停止越快
initialVelocity	初始速率:动画视图的初始速度大小速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反
settlingDuration	结算时间:返回弹簧动画到停止时的估算时间，根据当前的动画参数估算通常弹簧动画的时间使用结算时间比较准确

代码实现:

//旋转效果(KeyPath是动画的关键,效果都是由KeyPath来实现的.transform变换,rotation翻转,scale缩放)
    CABasicAnimation* rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    rotationAnimation.toValue = @((2 * M_PI) * 3);
    rotationAnimation.duration = 1.9f;
    rotationAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    //缩放效果
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = @0.0f;
    scaleAnimation.toValue = @1.0f;
    scaleAnimation.duration = 2.0f;
    scaleAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    //会有一个弹性的效果
    
    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];
    animationGroup.duration = 2.0f;
    //返回执行,恢复到最初的状态,就像动画倒放
    animationGroup.autoreverses = YES;
    animationGroup.repeatCount = 0;
    [animationGroup setAnimations:@[rotationAnimation, scaleAnimation]];
    
    [self.imageView.layer addAnimation:animationGroup forKey:@"animationGroup"];

CASpringAnimation实例:

 1 //用改变尺寸来实现心跳的效果
 2     CASpringAnimation *spring = [CASpringAnimation animationWithKeyPath:@"transform.scale"];
 3 
 4     spring.mass = 1;
 5     spring.fromValue = @1;
 6     spring.toValue = @0.75;
 7     spring.repeatCount = 10;
 8     //倒放,回到原始状态
 9     spring.autoreverses = YES;
10     spring.initialVelocity = 5;
11     spring.duration = spring.settlingDuration;
12     
13     [self.imageView.layer addAnimation:spring forKey:@"spring"];