PaintCode:自定义控件-芒果TV loading

之前看到芒果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