如果移动端访问不佳，可以访问我的个人
前几天看了一篇关于动画的博客叫手摸手教你写 Slack 的 Loading 动画，看着挺炫，但是是安卓版的，寻思的着仿造着写一篇iOS版的，下面是我写这个动画的分解~
老规矩先上图和demo地址：
刚看到这个动画的时候，脑海里出现了两个方案，一种是通过drawRect画出来，然后配合CADisplayLink不停的绘制线的样式；第二种是通过CAShapeLayer配合CAAnimation来实现动画效果。再三考虑觉得使用后者，因为前者需要计算很多，比较复杂，而且经过测试前者相比于后者消耗更多的CPU，下面将我的思路写下来：
相关配置和初始化方法
在写这个动画之前，我们把先需要的属性写好，比如线条的粗细，动画的时间等等，下面是相关的配置和初识化方法：
//线的宽度
var lineWidth:CGFloat = 0
//线的长度
var lineLength:CGFloat = 0
var margin:CGFloat = 0
//动画时间
var duration:Double = 2
//动画的间隔时间
var interval:Double = 1
//四条线的颜色
var colors:[UIColor] = [UIColor.init(rgba: "#9DD4E9") , UIColor.init(rgba: "#F5BD58"),
UIColor.init(rgba: "#FF317E") , UIColor.init(rgba: "#6FC9B5")]
//动画的状态
private(set) var status:AnimationStatus = .Normal
private var lines:[CAShapeLayer] = []
enum AnimationStatus {
//普通状态
case Normal
case Animating
case pause
//MARK: Initial Methods
convenience init(fram: CGRect , colors: [UIColor]) {
self.init()
self.frame = frame
self.colors = colors
override init(frame: CGRect) {
super.init(frame: frame)
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
private func config() {
lineLength = max(frame.width, frame.height)
= lineLength/6.0
= lineLength/4.5 + lineWidth/2
drawLineShapeLayer()
transform = CGAffineTransformRotate(CGAffineTransformIdentity, angle(-30))
通过CAShapeLayer绘制线条
看到这个线条我就想到了用CAShapeLayer来处理，因为CAShapeLayer完全可以实现这种效果，而且它的strokeEnd的属性可以用来实现线条的长度变化的动画，下面上绘制四根线条的代码：
//MARK: 绘制线
绘制四条线
private func drawLineShapeLayer() {
let startPoint = [point(lineWidth/2, y: margin),
point(lineLength - margin, y: lineWidth/2),
point(lineLength - lineWidth/2, y: lineLength - margin),
point(margin, y: lineLength - lineWidth/2)]
let endPoint
= [point(lineLength - lineWidth/2, y: margin) ,
point(lineLength - margin, y: lineLength - lineWidth/2) ,
point(lineWidth/2, y: lineLength - margin) ,
point(margin, y: lineWidth/2)]
for i in 0...3 {
let line:CAShapeLayer = CAShapeLayer()
line.lineWidth
= lineWidth
line.lineCap
= kCALineCapRound
line.opacity
line.strokeColor = colors[i].CGColor
= getLinePath(startPoint[i], endPoint: endPoint[i]).CGPath
layer.addSublayer(line)
lines.append(line)
获取线的路径
- parameter startPoint: 开始点
- parameter endPoint:
- returns: 线的路径
private func getLinePath(startPoint: CGPoint, endPoint: CGPoint) -& UIBezierPath {
let path = UIBezierPath()
path.moveToPoint(startPoint)
path.addLineToPoint(endPoint)
return path
private func point(x:CGFloat , y:CGFloat) -& CGPoint {
return CGPointMake(x, y)
private func angle(angle: Double) -& CGFloat {
return CGFloat(angle *
(M_PI/180))
执行完后就跟上图一样的效果了~~~
经过分析，可以将动画分为四个步骤：
画布的旋转动画，旋转两圈
线条由长变短的动画，更画布选择的动画一起执行，旋转一圈的时候结束
线条的位移动画，线条逐渐向中间靠拢，再画笔旋转完一圈的时候执行，两圈的时候结束
线条由短变长的动画，画布旋转完两圈的时候执行
第一步画布旋转动画
这里我们使用CABasicAnimation基础动画，keyPath作用于画布的transform.rotation.z，以z轴为目标进行旋转，下面是和代码：
//MARK: 动画步骤
旋转的动画，旋转两圈
private func angleAnimation() {
let angleAnimation
= CABasicAnimation.init(keyPath: "transform.rotation.z")
angleAnimation.fromValue
= http://blog.csdn.net/wang/article/details/angle(-30)
angleAnimation.toValue
= http://blog.csdn.net/wang/article/details/angle(690)
angleAnimation.fillMode
= kCAFillModeForwards
angleAnimation.removedOnCompletion = false
angleAnimation.duration
= duration
angleAnimation.delegate
layer.addAnimation(angleAnimation, forKey: "angleAnimation")
第二步线条由长变短的动画
这里我们还是使用CABasicAnimation基础动画，keyPath作用于线条的strokeEnd属性，让strokeEnd从1到0来实现线条长短的动画，下面是效果图和代码：
线的第一步动画，线长从长变短
private func lineAnimationOne() {
let lineAnimationOne
= CABasicAnimation.init(keyPath: "strokeEnd")
lineAnimationOne.duration
= duration/2
lineAnimationOne.fillMode
= kCAFillModeForwards
lineAnimationOne.removedOnCompletion = false
lineAnimationOne.fromValue
= http://blog.csdn.net/wang/article/details/1
lineAnimationOne.toValue
= http://blog.csdn.net/wang/article/details/0
for i in 0...3 {
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationOne, forKey: "lineAnimationOne")
第三步线条的位移动画
这里我们也是使用CABasicAnimation基础动画，keyPath作用于线条的transform.translation.x和transform.translation.y属性，来实现向中间聚拢的效果，下面是效果图和代码：
线的第二步动画，线向中间平移
private func lineAnimationTwo() {
for i in 0...3 {
var keypath = "transform.translation.x"
if i%2 == 1 {
keypath = "transform.translation.y"
let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
lineAnimationTwo.duration = duration/4
lineAnimationTwo.fillMode = kCAFillModeForwards
lineAnimationTwo.removedOnCompletion = false
lineAnimationTwo.autoreverses = true
lineAnimationTwo.fromValue = http://blog.csdn.net/wang/article/details/0
if i & 2 {
lineAnimationTwo.toValue = http://blog.csdn.net/wang/article/details/lineLength/4
lineAnimationTwo.toValue = http://blog.csdn.net/wang/article/details/-lineLength/4
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationTwo")
//三角形两边的比例
let scale = (lineLength - 2*margin)/(lineLength - lineWidth)
for i in 0...3 {
var keypath = "transform.translation.y"
if i%2 == 1 {
keypath = "transform.translation.x"
let lineAnimationTwo = CABasicAnimation.init(keyPath: keypath)
lineAnimationTwo.beginTime = CACurrentMediaTime() + duration/2
lineAnimationTwo.duration = duration/4
lineAnimationTwo.fillMode = kCAFillModeForwards
lineAnimationTwo.removedOnCompletion = false
lineAnimationTwo.autoreverses = true
lineAnimationTwo.fromValue = http://blog.csdn.net/wang/article/details/0
if i == 0 || i == 3 {
lineAnimationTwo.toValue = http://blog.csdn.net/wang/article/details/lineLength/4 * scale
lineAnimationTwo.toValue = http://blog.csdn.net/wang/article/details/-lineLength/4 * scale
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationTwo, forKey: "lineAnimationThree")
第四步线条恢复的原来长度的动画
这里我们还是使用CABasicAnimation基础动画，keyPath作用于线条的strokeEnd属性，让strokeEnd从0到1来实现线条长短的动画，下面是效果图和代码：
线的第三步动画，线由短变长
private func lineAnimationThree() {
//线移动的动画
let lineAnimationFour
= CABasicAnimation.init(keyPath: "strokeEnd")
lineAnimationFour.beginTime
= CACurrentMediaTime() + duration
lineAnimationFour.duration
= duration/4
lineAnimationFour.fillMode
= kCAFillModeForwards
lineAnimationFour.removedOnCompletion = false
lineAnimationFour.fromValue
= http://blog.csdn.net/wang/article/details/0
lineAnimationFour.toValue
= http://blog.csdn.net/wang/article/details/1
for i in 0...3 {
if i == 3 {
lineAnimationFour.delegate = self
let lineLayer = lines[i]
lineLayer.addAnimation(lineAnimationFour, forKey: "lineAnimationFour")
最后一步需要将动画组合起来
关于动画组合我没用到CAAnimationGroup，因为这些动画并不是加到同一个layer上，再加上动画类型有点多加起来也比较麻烦，我就通过动画的beginTime属性来控制动画的执行顺序，还加了动画暂停和继续的功能，效果和代码见下图：
//MARK: Public Methods
func startAnimation() {
angleAnimation()
lineAnimationOne()
lineAnimationTwo()
lineAnimationThree()
func pauseAnimation() {
layer.pauseAnimation()
for lineLayer in lines {
lineLayer.pauseAnimation()
status = .pause
func resumeAnimation() {
layer.resumeAnimation()
for lineLayer in lines {
lineLayer.resumeAnimation()
status = .Animating
extension CALayer {
//暂停动画
func pauseAnimation() {
// 将当前时间CACurrentMediaTime转换为layer上的时间, 即将parent time转换为localtime
let pauseTime = convertTime(CACurrentMediaTime(), fromLayer: nil)
// 设置layer的timeOffset, 在继续操作也会使用到
timeOffset
= pauseTime
// localtime与parenttime的比例为0, 意味着localtime暂停了
//继续动画
func resumeAnimation() {
let pausedTime = timeOffset
timeOffset
// 计算暂停时间
let sincePause = convertTime(CACurrentMediaTime(), fromLayer: nil) - pausedTime
// local time相对于parent time时间的beginTime
= sincePause
//MARK: Animation Delegate
override func animationDidStart(anim: CAAnimation) {
if let animation = anim as? CABasicAnimation {
if animation.keyPath == "transform.rotation.z" {
status = .Animating
override func animationDidStop(anim: CAAnimation, finished flag: Bool) {
if let animation = anim as? CABasicAnimation {
if animation.keyPath == "strokeEnd" {
status = .Normal
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, Int64(interval) * Int64(NSEC_PER_SEC)), dispatch_get_main_queue(), {
if self.status != .Animating {
self.startAnimation()
//MARK: Override
override func touchesEnded(touches: Set&UITouch&, withEvent event: UIEvent?) {
switch status {
case .Animating:
pauseAnimation()
case .pause:
resumeAnimation()
case .Normal:
startAnimation()
动画看起来挺复杂，但是细细划分出来也就那么回事，在写动画之前要先想好动画的步骤，这个很关键，希望大家通过这篇博客可以学到东西，有什么好的建议可以随时提出来，谢谢大家阅读~~demo地址您的赞赏，是对我创作的最大鼓励。|赞赏
收藏已收藏 | 0赞 | 3
分享到微信扫码分享到微信
专业杂工一枚，混迹于IT、产品周边，继续苦逼的做着残品的梦
555篇作品3.4m阅读总量
热门问题12345678910多个精致的iOS加载动画 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了3815字，被6人关注，获得了10个喜欢
多个精致的iOS加载动画
/bbs/read.php?tid=301262
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
iOS绘图与动画，绘图能定制各种精美UI,动画能让UI交互酷炫引入注目，双剑合璧，无与伦比！
建议学习路线:绘图—&动画，欢迎投稿！
· 259人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：iOS史上最详细的动画讲解-加载等待动画（一） - IOS - 伯乐在线
& iOS史上最详细的动画讲解-加载等待动画（一）
本文主要面向的对象是那些没有动画基础的入门引导，提供一个学习动画的正确途径，并且配以项目实战的效果的重点讲解。
这篇文章要实现的效果如下图
实现这个效果需要了解基本概念
这个是明杰大神的入门讲解，
你需要从这几篇文章中了解到以下的知识点
UIView和CALayer之间的关系（区别和联系）
Core Animation框架中使用的类
CALayer和Core Animation之间的联系
CAAnimation的常用属性
如果你对这些基本的知识点已经全部理清楚，那么接下来你就可以继续往下看了，我们实现动画主要需要学习的类库QuartzCore,首先看一下这个类库
QuartzCore
首先有我们熟悉的CALayerCAAnimation,对于从来没有做过动画的朋友来说，其他的类就不清楚了。下面我就简单介绍一下主要的类之间关系，以及单独类主要实现什么。
CAAnimation.h主要是各类动画的基类，我们一般不会使用它来做动画。基本常用属性
Objective-C
//公有属性定义动画的节奏
@property(nullable, strong) CAMediaTimingFunction *timingF
//代理，例如捕捉动画的开始，动画的结束等
@property(nullable, strong)
//动画执行完是否移除
@property(getter=isRemovedOnCompletion) BOOL removedOnC
//公有属性定义动画的节奏@property(nullable, strong) CAMediaTimingFunction *timingFunction;//代理，例如捕捉动画的开始，动画的结束等@property(nullable, strong) id delegate;//动画执行完是否移除@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
CABase.h可以忽略不看，是一些基本的配置
CADisplayLink.h帧动画，默认添加定时器，每秒刷多少帧,在gitHub上有facebook出品的一个pop动画，据说是居于帧动画
CAEAGLLayer是和这个框架联合使用的，暂时用不到。
CAEmitter相关的是粒子动画，可以实现很多酷炫的效果
CAShapeLayer非常重要的一个类，常常与UIKit框架的UIBezierPath贝塞尔曲线联合使用，绘制曲线，圆形，各种复杂的图形都会使用到，非常非常重要，我的上一篇文章就是他们两个的结合
CAGradientLayer常见应用于锁屏底部闪烁的滑动来解锁。
CAReplicatorLayer 它独有的特性是，其子类具有相同的属性，这篇文章主要是它的应用。
其他的类，我是没有使用过，所以不做讲解。
下面我们看就上述动画讲解一个最简单，三个点加载动画，作为入门。
Objective-C
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer];
replicatorLayer.bounds
= CGRectMake(0, 0, 100, 100);
replicatorLayer.cornerRadius
replicatorLayer.position
self.view.
replicatorLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.2].CGC
[self.view.layer addSublayer:replicatorLayer];
&&&&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
接下来我们需要添加点
Objective-C
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].CGC
dotLayer.cornerRadius
[replicatorLayer addSublayer:dotLayer];
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,是子类的个数，然后我们设置每个子类的位置即可
在上述代码添加
Objective-C
replicatorLayer.instanceCount = 3;
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);
&&replicatorLayer.instanceCount = 3;&&&&replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);
需要说明的是instanceTransform这个属性，它的作用是设置每个子Layer如何变化。CATransform3DMakeTranslation这个类的含义是使Layer根据X、Y、Z轴进行平移。我们需要的是平移，所以使用translation这个属性，如果我们是第一种圆形排放，那么我们需要这样设置
Objective-C
CGFloat count
replicatorLayer.instanceCount
CGFloat angel
= 2* M_PI/
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);
&& 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）。
接下来我们需要添加动画
Objective-C
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration
animation.fromValue
animation.toValue
animation.repeatCount = MAXFLOAT;
[dotLayer addAnimation:animation forKey:nil];
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属性。
Objective-C
replicatorLayer.instanceDelay = 1.0/3;
replicatorLayer.instanceDelay = 1.0/3;
编译运行看效果
我们会发现动画在开始前会有不流畅效果，我们应该给dotLayer一个初始的大小
Objective-C
dotLayer.transform = CATransform3DMakeScale(0, 0, 0);
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添加一个分类，具体代码如下
Objective-C
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
123456789101112131415161718192021
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和贝塞尔曲线结合的例子，当然你有更好的动画效果希望你能私信推荐给我，我会选择一些好的实现并分享。
可能感兴趣的话题
关于iOS频道
iOS频道分享iOS和Swift开发，应用设计和推广，iOS相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2016 伯乐在线
