版本記錄
| 版本號 | 時間 |
|---|---|
| V1.0 | 2017.09.26 |
前言
app中好的炫的動畫可以讓用戶耳目一新，為產品增色不少，關于動畫的實現我們可以用基本動畫、關鍵幀動畫、序列幀動畫以及基于CoreGraphic的動畫等等，接下來這幾篇我就介紹下我可以想到的幾種動畫繪制方法。具體Demo示例已開源到Github —— 刀客傳奇，感興趣的可以看我寫的另外幾篇。
1. 實現動畫方式深度解析（一） —— 播放GIF動畫（一）
2. 實現動畫方式深度解析（二） —— 播放GIF動畫之框架FLAnimatedImage的使用（二）
3. 實現動畫方式深度解析（三） —— 播放序列幀動畫（一）
4. 實現動畫方式深度解析（四） —— QuartzCore框架（一）
5. 實現動畫方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 實現動畫方式深度解析（六） —— Core Animation Basics（三）
7. 實現動畫方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 實現動畫方式深度解析（八） —— Core Animation之動畫層內容 （五）
9. 實現動畫方式深度解析（九） —— Core Animation之構建圖層層級 （六）
10. 實現動畫方式深度解析（十） —— Core Animation之高級動畫技巧 （七）
11. 實現動畫方式深度解析（十一） —— Core Animation之更改圖層的默認行為（八）
12. 實現動畫方式深度解析（十二） —— Core Animation之提高動畫的性能（九）
13. 實現動畫方式深度解析（十三） —— Core Animation之圖層樣式屬性動畫（十）
14. 實現動畫方式深度解析（十四） —— Core Animation之 KVC 擴展（十一）
15. 實現動畫方式深度解析（十五） —— Core Animation之可動畫屬性 （十二）
16. 實現動畫方式深度解析（十六） —— Core Animation之CABasicAnimation動畫示例 （十三）
17. 實現動畫方式深度解析（十七） —— Core Animation之CAKeyframeAnimation動畫示例 （十四）
18. 實現動畫方式深度解析（十八） —— UIView動畫 （一）
19. 實現動畫方式深度解析（十九） —— Lottie - iOS動畫 （一）
20. 實現動畫方式深度解析（二十） —— Lottie - iOS動畫之示例分享 （二）
框架基本
Keyframes框架也是Facebook開源的做動畫的第三方框架。
關鍵幀是（1）ExtendScript腳本的組合，它從After Effects文件中提取圖像動畫數據，（2）相應的Android和iOS渲染庫。 關鍵幀可用于導出和渲染具有復雜形狀和路徑曲線的高質量矢量動畫，所有這些都具有最小的文件占用空間。
用法
1. Developing Animations in After Effects - 在AE中開發動畫
有關開發與Keyframes庫一起使用的動畫的約束的詳細列表，請參閱關鍵幀 Keyframes After Effects Guidelines。
2. Image Data Extraction - 圖像數據提取
使用提取腳本需要安裝Adobe After Effects以及Adobe ExtendScript Toolkit。 如果關鍵幀JSON文件已經可用，則只需要相應的iOS和Android庫。
有關在AE comp上運行ExtendScript腳本的詳細步驟，請參閱此處here詳細說明的說明。
3. iOS Rendering - iOS渲染
安裝
- CocoaPods
target 'MyApp' do
pod "keyframes"
end
- Carthage
github "facebookincubator/Keyframes"
或者
github "facebookincubator/Keyframes" "master"
運行
> carthage update
在Xcode中，在應用程序目標的“ General”設置選項卡上的“Linked Frameworks and Libraries”部分中，從Carthage / Build文件夾拖放框架。
渲染設置
在圖像數據提取步驟中使用生成的JSON blob上提供的解串器來創建KFVector模型對象。 如果您的JSON Blob位于資產目錄中，則可能如下所示：
NSString *filePath = [[NSBundle bundleForClass:[self class]] pathForResource:@"asset_name" ofType:@"json" inDirectory:nil];
NSData *data = [NSData dataWithContentsOfFile:filePath];
NSDictionary *vectorDictionary = [NSJSONSerialization JSONObjectWithData:data options:kNilOptions error:nil];
KFVector *vector = KFVectorFromDictionary(vectorDictionary);
然后可以使用此KFVector創建KFVectorLayer，KFVectorLayer可用作常規CALayer。
KFVectorLayer *layer = [KFVectorLayer layer];
// Set a non-zero layer frame before setting the KFVector is required.
layer.frame = $AnyNonZeroCGRect$;
layer.faceModel = vector;
如果您不想控制動畫并且喜歡使用UIView，KFVectorView也可以使用KFVector創建。
KFVectorView *view = [[KFVectorView alloc] initWithFrame:$AnyNonZeroCGRect$ faceVector:vector];
展示動畫
在KFVectorLayer上使用startAnimation，pauseAnimation，resumeAnimation和seekToProgress來控制動畫。
// Animation will start from beginning.
[layer startAnimation];
// Pause the animation at current progress.
[layer pauseAnimation];
// Resume the animation from where we paused last time.
[layer resumeAnimation];
// Seek to a given progress in range [0, 1]
[layer seekToProgress:0.5]; // seek to the mid point of the animation
4. Mobile Frameworks
| Framework | Platform | Author | Link |
|---|---|---|---|
| React Native (imperative api) | Android/IOS | Tomas Roos | https://github.com/ptomasroos/react-native-keyframes/ |
| Appcelerator Titanium | iOS | Hans Knoechel | https://github.com/hansemannn/ti.keyframes |
| Appcelerator Titanium | Android | Michael Gangolf | https://github.com/m1ga/ti.keyframes |
| React Native | Android/iOS | Underscope | https://github.com/underscopeio/react-native-facebook-keyframes |
| NativeScript | Android/IOS | Eddy Verbruggen | https://github.com/EddyVerbruggen/nativescript-keyframes |
Understanding Keyframes Model Objects - 理解Keyframes模型對象
1. Image - 圖片
關鍵幀中的圖像由一些重要的領域組成，它們一起描述動畫和可縮放的圖像。 在頂層，圖像包含有關如何縮放（canvas_size）圖像的信息，以及如何以正確的速度播放動畫（frame_rate，frame_count）。 動畫本身并不限于圖像提取的離散frame_rate，因為關鍵幀渲染庫支持分數幀。 除了圖像的這些全局參數之外，圖像還包含許多描述不同形狀的特征，以及動畫組，它們描述可以一次應用于多個要素甚至其他動畫組的變換。
讓我們一起分解這個簡單的星星圖片，它在圓圈內部不斷地變大和縮小，動畫是24FPS，幀數在圖片的左上角顯示，大小在右下角顯示。
讓我們一幀一幀的速度減小
2. Features - 特征
特征是圖像的任何獨立視覺對象。 最重要的是，它包括形狀繪制命令，與SVG類型命令非常相似，它描述了在任何給定時間的Feature的形狀。 功能可能屬于較大的動畫組，并且包含自己的特定動畫，包括專門的STROKE_WIDTH動畫。 特征的形狀也可以隨時間改變，使用下面描述的相同關鍵幀和插值器模式。
形狀
一個形狀是線條繪制命令的列表，它們串在一起，描述可以被填充或者描邊的一系列的線或者閉合形狀。 這些命令一個接一個地作為一系列的Move，Line，Quadratic和Cubic命令給出。
這里就是上述圖像的重要形狀，以及相關的頂點（方塊）和控制點（圓形）。
3. Animations - 動畫
Transforms - 形變
關鍵幀渲染庫包括對基于矩陣的變換操作SCALE，ROTATE和TRANSLATE的支持。 尤其對于特征而言，可以使用額外的非矩陣STROKE_WIDTH。 動畫可能屬于特定功能，也可能屬于較大動畫組的一部分。
Animation Progression - 動畫工程
在動畫播放期間動畫變換的值以及它們如何變化由兩個關鍵字段關鍵幀和時序曲線確定。 使用兩個字段的組合，我們可以在動畫中的任何指定時間計算一個變換的值。
關鍵幀是動畫中具有特定目標值的特定幀。 例如，在將形狀向上和向下縮放超過10幀時，我們將要在第0和第10幀以100％的比例開始和結束，并在第7幀上達到我們的最大刻度為150％。 在這個例子中，這個形狀的SCALE變換的關鍵幀將是[0,7,10]，值分別為100％，150％，100％。
時序曲線描述了每個關鍵幀之間轉換的速度。 每個時間曲線被建模為從[0,0]到[1,1]的三次貝塞爾曲線，其中X值是從原始關鍵幀到目標關鍵幀的時間進度，Y值描述 在給定時間更改值：origValue +（destValue - origValue）* Y。
對于我們的縮放星形圖像，隨著時間的推移，縮放變化的圖表如下所示，其中顯示了頂點和時間曲線的輸入/輸出值。
4. Tying it all together - 把它們捆綁在一起
使用Image對象中的這些字段以及進度值，我們可以在給定時間內構建Image的所有形狀，以及應用于形狀的任何轉換，并在該框架中繪制圖像。 由于動畫由靈活的timing_curves驅動，所以關鍵幀圖像不限于用于回放的離散整數幀，但重要的是要注意所有進度值都是相對于幀計數給出的。 這意味著10幀動畫接受范圍[0..10]中的所有值。
后記
未完，待續~~~
