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层是可以嵌套的。

渲染：当更新层改变不能立即显示在屏幕上，当所有的层都准备好时，可以调用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基本单一类型的动画关键属性:

代码示例:

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帧动画关键属性:

当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组合动画:

代码实现:

//旋转效果(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"];

iOS动画

标签：

原文地址：http://www.cnblogs.com/lovebugssun/p/5558173.html