iOS史上最详细的动画讲解-加载等待动画（一）

1170 查看

前言

本文主要面向的对象是那些没有动画基础的入门引导，提供一个学习动画的正确途径，并且配以项目实战的效果的重点讲解。

正文

这篇文章要实现的效果如下图

效果图

实现这个效果需要了解基本概念
http://www.cnblogs.com/mjios/tag/objective-c/default.html?page=2
这个是明杰大神的入门讲解，

基础

你需要从这几篇文章中了解到以下的知识点

UIView和CALayer之间的关系（区别和联系）
Core Animation框架中使用的类
CALayer和Core Animation之间的联系
CAAnimation的常用属性

如果你对这些基本的知识点已经全部理清楚，那么接下来你就可以继续往下看了，我们实现动画主要需要学习的类库QuartzCore,首先看一下这个类库

QuartzCore

首先有我们熟悉的CALayerCAAnimation,对于从来没有做过动画的朋友来说，其他的类就不清楚了。下面我就简单介绍一下主要的类之间关系，以及单独类主要实现什么。

CAAnimation.h主要是各类动画的基类，我们一般不会使用它来做动画。基本常用属性

//公有属性定义动画的节奏

@property(nullable, strong) CAMediaTimingFunction *timingFunction;

//代理，例如捕捉动画的开始，动画的结束等

@property(nullable, strong) id delegate;

//动画执行完是否移除

@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;

CABase.h可以忽略不看，是一些基本的配置
CADisplayLink.h帧动画，默认添加定时器，每秒刷多少帧,在gitHub上有facebook出品的一个pop动画，据说是居于帧动画
https://github.com/facebook/pop
CAEAGLLayer是和这个框架联合使用的，暂时用不到。
CAEmitter相关的是粒子动画，可以实现很多酷炫的效果
CAShapeLayer非常重要的一个类，常常与UIKit框架的UIBezierPath贝塞尔曲线联合使用，绘制曲线，圆形，各种复杂的图形都会使用到，非常非常重要，我的上一篇文章就是他们两个的结合
CAGradientLayer常见应用于锁屏底部闪烁的滑动来解锁。
CAReplicatorLayer 它独有的特性是，其子类具有相同的属性，这篇文章主要是它的应用。

其他的类，我是没有使用过，所以不做讲解。

下面我们看就上述动画讲解一个最简单，三个点加载动画，作为入门。

CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];

replicatorLayer.bounds = CGRectMake(0, 0, 100, 100);

replicatorLayer.cornerRadius = 10.0;

replicatorLayer.position = self.view.center;

replicatorLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.2].CGColor;

[self.view.layer addSublayer:replicatorLayer];

那么我们会看到这个效果

replicatorLayer

接下来我们需要添加点

CALayer *dotLayer = [CALayer layer];

dotLayer.bounds = CGRectMake(0, 0, 15, 15);

dotLayer.position = CGPointMake(15, replicatorLayer.frame.size.height/2 );

dotLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.6].CGColor;

dotLayer.cornerRadius = 7.5;

[replicatorLayer addSublayer:dotLayer];

效果图

接下来我们会想在创建两个点，然后做动画就可以，不错这是一种可实现的思路，可以如果我们要做第一中类似旋转的动画，我们需要创建10个点，难道我们一个个去创建吗？我们现在使用的是CAReplicatorLayer，它有个属性instanceCount,是子类的个数，然后我们设置每个子类的位置即可

在上述代码添加

1 2	replicatorLayer.instanceCount = 3; replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);

效果

需要说明的是instanceTransform这个属性，它的作用是设置每个子Layer如何变化。CATransform3DMakeTranslation这个类的含义是使Layer根据X、Y、Z轴进行平移。我们需要的是平移，所以使用translation这个属性，如果我们是第一种圆形排放，那么我们需要这样设置

CGFloat count = 10.0;

replicatorLayer.instanceCount = count;

CGFloat angel = 2* M_PI/count;

replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);

解释一下CATransform3DMakeRotation，它是CATransform3D的一个结构（矩阵结构），含义是使Layer在X、Y、Z轴根据给定的角度旋转。我们需要平面旋转则坐标系为（0，0，1）。
看效果

接下来我们需要添加动画

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];

animation.duration = 1.0;

animation.fromValue = @1;

animation.toValue = @0;

animation.repeatCount = MAXFLOAT;

[dotLayer addAnimation:animation forKey:nil];

编译运行看效果：

这不是我们需要的真实效果，我们还需要设置每一个sublayer的instanceDelay属性。

1	replicatorLayer.instanceDelay = 1.0/3;

编译运行看效果

我们会发现动画在开始前会有不流畅效果，我们应该给dotLayer一个初始的大小

1	dotLayer.transform = CATransform3DMakeScale(0, 0, 0);

这样我们就能实现这个比较简单的等待动画效果。

下面我们总结一下实现这个动画的步骤：

1.首先创建一个可复用的CAReplicatorLayer,创建这个的目的是为了我添加的子类可以复用，一劳永逸；
2.添加子Layer，设置子Layer所需要的样式；
3.将子layer添加到CAReplicatorLayer上，并设置子layer个数和排布；
4.给子layer添加动画效果，特别提醒一点transform一般针对的是缩放和旋转动画，当然也可以实现平移动画。

下面我总结一下常用动画的 keyPath

transform.rotation：旋转动画。
transform.rotation.x：按x轴旋转动画。
transform.rotation.y：按y轴旋转动画。
transform.rotation.z：按z轴旋转动画。
transform.scale：按比例放大缩小动画。
transform.scale.x：在x轴按比例放大缩小动画。
transform.scale.y：在y轴按比例放大缩小动画。
transform.scale.z：在z轴按比例放大缩小动画。
position：移动位置动画。
opacity：透明度动画。

最后向大家再分享一个闪烁的动画，本来这是一篇单独的文章，投稿首页已经通过审核，结果本人手贱不小心给删除了这篇文章，所以在这篇文章补上，这里只附swift代码，oc代码demo中查看。
首先我们看一下效果：

闪烁动画的实现主要是通过改变透明度，从而达成闪烁的效果，我将这个方法写成了一个分类，给CABasicAnimation添加一个分类，具体代码如下

import UIKit

class catergory: CABasicAnimation {

class func opacityForever_Animation(time : NSTimeInterval) -> CABasicAnimation {

let animation = CABasicAnimation(keyPath:"opacity")

animation.fromValue = 1

animation.toValue = 0

animation.duration = time

animation.autoreverses = true

animation.removedOnCompletion = false

animation.fillMode = kCAFillModeForwards

animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn)

return animation

}

这样我们在外部可以给任何一个UIView添加闪烁动画。

结尾

本文具体实现的代码上传gitHub，demo中对这些动画进行了简单的封装，一是为了提高代码的质量和可读性，二是为了更符合项目实战，希望你在阅读的时候提出宝贵的意见，当然也欢迎你的Star。
下一篇文章主要是想分享一下CAShapeLayer和贝塞尔曲线结合的例子，当然你有更好的动画效果希望你能私信推荐给我，我会选择一些好的实现并分享。
https://github.com/markdashi/LoadingAnimation