iOS用Sketch制作APP下拉刷新的GIF動畫
前言
中秋三天就這么睡過去了~~這也不能怪我，聽說深圳連飛機都吹跑了，嚇死寶寶了。
節假日一過總會留下后遺癥，但是為了錢途，咱們是要挺直腰桿，接著敲代碼。。
一、用Sketch結合MJRefresh來自定義刷新動畫
今天分享一下iOS關于自定義下拉刷新動畫的實現。我們平時看到很多APP的下拉刷新都是菊花在轉的樣式，因為很多APP都是用 MJRefresh 默認下拉刷新來實現的。但是，我們也會看到不少APP的下拉刷新很有特色，像 美團、分期樂、喵播 等等。
他們的刷新樣式同樣是用 MJRefresh 來實現的， MJRefresh 有一個類 MJRefreshGifHeader ，自定義這個類可以將GIF圖片集合制作成下拉刷新的動畫。但是他的前提是得制作出一個GIF圖片集合。
這個軟件不僅能夠做靜態的UI圖，還能做動態的GIF圖。前段時間我嘗試用Sketch做一個GIF動畫，無意間被我發現了一個很好用的插件 AnimateMate ，這個插件使用javaScript寫的，但這不影響我們的使用，關于這個插件的使用可以去這個網站看視頻 AnimateMate視頻教程 。我們用Sketch ToolBox安裝完插件之后就可以使用了。
這里我以分期樂的刷新動畫為例進行講解。這個是最后集成到項目中的效果：
最終效果圖.gif
下面我就分兩個大的步驟來給大家講解一下如何讓自己的APP有一個專屬的下拉刷新動畫（當然，如果動畫比較復雜的用CoreAnimation會更簡單，這里介紹的只是圖片比較復雜，但動畫比較簡單的）:
1. 用Sketch制作GIF動畫
2. 用MJRefreshGifHeader來集成下拉刷新動畫
二、用Sketch制作GIF動畫
1. Sketch安裝插件 AnimateMate
2. 打開Sketch新建一個畫板，命名為refresh，把你要畫的圖形放到畫布上
新建畫布.png
3. 接下來是按照圖形把分期樂的貓頭鷹畫出來
先分析一下這個貓頭鷹：
1.先用鋼筆工具把頭和臉的形狀畫出來，再進行貝茲曲線變形
2.用鉛筆工具把頭發畫出來
3.鼻子就是兩個三角形
4.眼睛就是三個圓
5.翅膀就是一個矩形弄成圓角
6.身體就是三個圓
7.腳是三個矩形組成的
-
選擇鋼筆工具
選擇貝茲曲線.png
-
用鋼筆工具沿著頭部描7個點，最后重合第1個點和第7個點重合
用鋼筆工具描點.png
-
對線條進行編輯
選中線條點擊Edit.png
-
分別選中第3個點和第6個點進行貝茲曲線變形
頭部進行貝茲曲線變形.png
-
接下來再用同樣的方式把臉部的關鍵點描出來
用鋼筆工具把臉部的關鍵點描出來.png
-
對臉部的第2、5、7這三個點進行貝茲曲線變形
對臉部進行貝茲曲線變形.png
-
把眼睛和鼻子畫出來
畫鼻子和眼睛.png
-
用一個矩形把翅膀畫出來
畫翅膀.png
-
改變翅膀的圓角為100
修改翅膀圓角.png
-
用三個圓把身體畫出來
.畫身體png
-
用6個矩形把腳畫出來
畫腳.png
-
接下來就是頭發了，頭發我們用鉛筆工具直接畫出來，鉛筆工具不好把握，有一點偏差也沒事
用鉛筆畫頭發.png
畫出頭發.png
-
最后把下面的圖形移到旁邊，用取色的方式對各個部位填充顏色，然后把邊界都去掉（注意圖層的位置，如果遮擋住了，通過移動圖層來使其擺放在正確的圖層）
我下面圖片移開.png
-
這樣就把貓頭鷹給畫出來，接下來就是制作動畫。
最終畫出來的圖形.png
4. 用AnimationMate來制作動畫
-
先把整個貓頭鷹按照比例調整到寬為56的大小，畫板調整到寬高都為60的大小
修改貓頭鷹大小和畫布大小.png
-
將眼睛的黑色部分和大白色的圓建成一個組
合并成組.png
-
選中所有圖層->plugins->AnimateMate->Creat Animateion
創建動畫1.png
-
創建第0幀的動畫。KeyframeNumber為0，EasingType動畫類型為線性動畫linearEase。
創建動畫2.png
-
改變eye_right和eye_left的Transform為369°
創建動畫3.png
-
選中所有圖層->plugins->AnimateMate->Creat Animateion，我們讓這個貓頭鷹的眼睛從0°旋轉到359°分成20個關鍵幀。KeyframeNumber為20，EasyingType為線性動畫linearEase，點擊OK。
創建動畫4.png
-
選中refresh圖層->plugins->ExportAnimation導出動畫
導出動畫1.png
-
可以看到，這里我們可以導出GIF Aniamtion動圖，也可以直接導出20個PNG圖片。我們都勾選上，然后給導出的GIF圖和PNG圖填一個前綴名字fenqile_refresh。選擇導出出到fenqile_refresh文件夾
導出動畫2.png
-
導出之后的結果為下圖所示。有20張png圖片和一個gif動圖。
最后導出的結果.png
-
用瀏覽器打開gif動圖可以看到最終實現的效果。
最終實現的效果.gif
至此用Sketch就把這個GIF動圖給制作完成了，接下來就是要用 MJRefresh 來自定義下拉刷新樣式了
三、用MJRefreshGifHeader來自定義下拉刷新樣式
-
將20個png圖片導入到Xcode工程
將圖片導入工程.png
-
創建一個類 CustomRefreshGifHeader 繼承自 MJRefreshGifHeader 。
import UIKit
import MJRefresh
class CustomRefreshGifHeader: MJRefreshGifHeader {
// MARK: 重寫父類方法
/**
在這里做一些初始化配置（比如添加子控件）
*/
override func prepare() {
super.prepare()
var images = [UIImage]()
for i in 0...20 {
if i < 10 {
images.append(UIImage.init(named: "fenqile_refresh_0\\\\(i)")!)
}else {
images.append(UIImage.init(named: "fenqile_refresh_\\\\(i)")!)
}
}
self.setImages(images, duration: 1.2, forState: MJRefreshState.Refreshing)
self.setImages([UIImage.init(named: "fenqile_refresh_00")!], forState: MJRefreshState.Pulling)
self.setImages([UIImage.init(named: "fenqile_refresh_00")!], forState: MJRefreshState.Idle)
self.lastUpdatedTimeLabel.hidden = true
self.stateLabel.font = UIFont.systemFontOfSize(10)
self.setTitle("釋放即可刷新", forState: MJRefreshState.Pulling)
self.setTitle("下拉刷新", forState: MJRefreshState.Idle)
self.setTitle("刷新中", forState: MJRefreshState.Refreshing)
}
/**
在這里設置子控件的位置和尺寸
*/
override func placeSubviews() {
super.placeSubviews()
self.gifView.contentMode = UIViewContentMode.Center
self.gifView.frame = CGRect.init(x: 0, y: 4, width: self.mj_w, height: 34)
self.stateLabel.frame = CGRect.init(x: 0, y: 40, width: self.mj_w, height: 14)
}
}
3.給TableView添加下拉刷新
override func viewDidLoad() {
super.viewDidLoad()
tableView = UITableView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT), style: UITableViewStyle.Grouped)
view.addSubview(tableView)
tableView.mj_header = MBRefreshGifHeader.init {
// loading data
}
}
總結
Sketch不僅能夠制作UI圖，也能制作GIF動畫。我這里只是舉了個例子，使用AnimationMate這個插件來做GIF動畫真的很方便，但也有很多局限性。目前這款插件只能做一些線性的動畫效果，像 Position 、 Size 、 Transform 、 Opacity 等。如果要做一些比較復雜的動畫那用AnimationMate就不太合適了。
來自：http://www.jianshu.com/p/45022427cf96