之前看到芒果tv的app 加载视频时的loading动画，感觉不错。不过一直没有时间去自己做一个，这两天闲来无事，写了一个，记录下，也算是paintcode 的一个实践吧！
一、准备工作
需要使用到的工具有 Cocoapods、Xcode、 PaintCode 。
假定你已经把这些都弄好
1、创建好xcode 项目HNTVLoadingDemo，然后打开终端进入到项目目录文件夹下。终端输入：
pod init
然后输入
vim Podfile
把你的Podfile 写成这样
platform :ios, '8.0'
use_frameworks!
target 'HNTVLoadingDemo' do
pod 'pop'
end
保存之后执行
pod install
ok，项目创建完成
二、使用PaintCode 绘制
1、先画个圆，like this
1.gif
2、让这个圆的边线动起来
2.gif
3、调整细节，让进度条看起来更美
3.gif
到这，一个简单的进度条就完成了。
图中插入的水平和垂直辅助线快捷键：cmd +shift + H, cmd + shift + V。
4、分析进度条的变化，简单的把它看成贪吃蛇，并不是只有蛇头在走，蛇头走了一半之后，蛇尾就开始跟着走了，然后他们之间的距离越来越小，最后又回到了一点
5、蛇头的变化
4.gif
6、蛇尾变化，前半部分没动，后半部分奋力赶上。
5.gif
到这里，loading 就基本完成了，现在可以将代码导出到创建的项目里面了。
6.gif
三、编写控件
1、创建自定义类
7.gif
2、增加动画
8.gif
到这里，一个loadingview 就完成了，是不是很简单呢？
四、一些需要算的地方
1、圆虚线的dash、gap。
简单来说dash 就是这个个虚线一段的长度，gap 就是两端实线之间的长度，这里都是以点为单位。所以我们在算这个圆的最大gap 的时候就是2πR，就是圆的周长了。
2、progress 控制dash
dash 达到圆周长的时候，就是满了，满了，满了。
所以
L = 2πR
Dash = -2L * progress * progress + 2L * progress
为什么会这样？这就是个典型的二次函数，自己体会！
3、蛇尾的追随，利用的是旋转
progress: 0- 0.5,这时不动
progress:0.5-1.0,这段时间，view 要旋转360°
angle = (progress < 0.5 ? 0 : (progress - 0.5) * 2) * -360
好了，就这么多了！动画细节可能与芒果tv 有些出入，不过就不纠结这些了。
[项目地址，戳——>>]https://github.com/pengxianhe/HNTVLoadingDemo
[Cocoa China 文章地址]http://www.cocoachina.com/ios/20160811/17336.html
网友评论