版本记录
| 版本号 | 时间 |
|---|---|
| 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]中的所有值。
后记
未完，待续~~~
