KeyFrames-facebook(翻译)

原文github地址：https://github.com/facebookincubator/Keyframes/blob/master/README.md
以下为简单翻译，不足之处别见怪，有些关键词没有改动以免误解。
相关阅读：阅读后更助理解
facebook原文地址：https://code.facebook.com/posts/354469174916519/keyframes-delivering-scalable-high-quality-animations-to-mobile-clients/
译文地址：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/1124/6799.html

Keyframes
Keyframes是由（1）一个从After Effects文件中提取出的图片动画脚本 和（2）一个Android或IOS平台的兼容渲染库 组合而成的。Keyframes可以用于导出并渲染复杂图形或轨迹的高质量矢量动画，并且占用空间小。

用法
使用After Effects开发动画效果
使用Keyframes库开发动画效果有一个详细的约束条件清单，具体内容请点击https://github.com/facebookincubator/Keyframes/blob/master/docs/AfterEffectsGuideline.md。

抽取图像数据
使用抽取数据脚本不仅需要Adobe After Effects还需要Adobe EtendScript Toolkit。生成了Keyframes的动画JSON文件，那么就只需要IOS或Android平台的对应渲染库了。

IOS渲染
略过。。。

Android渲染
对上面生成的JSON文件流使用Keyframes提供的解串器，可以生成一个KFImage对象。如果你把JSON文件放到了assets目录下，则代码如下

InputStream stream = getResources().getAssets().open("asset_name");KFImage kfImage = KFImageDeserializer.deserialize(stream);

现在可以使用KFImage对象创建一个KeyframesDrawable对象，这个对象可以当作一个普通的Drawable使用。在显示Keyframes动画时强烈建议使用软件Layer（blog.csdn.net/niu_gao/article/details/7464320）。

Drawable kfDrawable = new KeyframesDrawableBuilder().withImage(kfImage).build();ImageView imageView = (ImageView)findViewById(R.id.some_image_view);imageView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);imageView.setImageDrawable(kfDrawable);

运行！
可以使用start和stop相关方法启动和停止动画。

// Starts a loop that progresses animation and invalidates the drawablekfDrawable.startAnimation();//Stops the animation when the current animation endskfDrawable.stopAnimationAtLoopEnd();

理解Keyframes模型对象
图像
一个Keyframes图像是用一些重要的字段组成的，这些字段聚在一起描述了一个可伸展的动画。在应用层面，一个图像不仅包含如何缩放图片（canvas_size）的信息，还有如何以正确的速度（frame_rate,frame_count）播放动画的信息。这个动画自身并没有和图像中提取的这些分散的frame_rate绑定，因为Keyframes渲染库是支持分帧渲染的。除了这些全局参数外，图像还包含一些用于绘制不同形状的特性，就和同时运行多种转换动作的动画组一样。
接下来让我们分解一个简单的图像，这个图像是一个嵌在圆圈中的不断缩放的星星。这个动画的输出率是每秒24帧，左上角显示分帧数，下方显示缩放比率。

我们放慢速度，一帧一帧的看

Features
feature就是一个图像的独立可视对象。主要的，它包含类似于SVG图形绘制命令，能够在给定的时间点上描述出图形的形状。一个Feature可能属于一个更大的Animation Group，它也可能包含例如STROKE_WIDTH动画这样的Feature。一个Feature的形状也可以通过keyframe和Interpolator的组合而实现随时间而变化。详情如下。

Shape
shape是一个线条绘制命令的列表，可以多个组合在一起描述一个被填充或被点击的连续线条或封闭图形。这些命令包括Move， Line，Quadratic和Cubic。

动画

变换
Keyframes渲染库有一些基于矢量的转换操作，例如缩放，旋转和平移。因为Feature的特殊性，非矢量操作STROKE_WIDTH也被支持。操作的动画可能属于一个特定的Feature，也可能是Animation Group的一部分。

动画进度
动画经过转换后的数值是多少以及这些数值在动画播放过程中如何变化，是由Keyframe和Timing Curves两个字段决定的。组合起来，我们可以计算出动画在任何一个给定时间上经过转换后的值。

Keyframe就是动画在指定范围内的关键帧，比如说，把一个图形在10帧内放大再缩小到原大小，并在第7帧时达到最大值（150%），在这个缩放转换中的关键帧就是［0，7，10］，相对应的大小是［100%，150%，100%］。

Timing Curves描述了随着每个关键帧而变化的速度曲线。timing curves在［0，0］到［1，1］的矩形空间内用贝塞尔曲线建模，X轴代表时间，Y轴的值是通过给定的时间计算的来，计算公式：origValue + (destValue - origValue) * Y。
对于上面缩放星星的图像，他的timing curves图表看起来就是下面这样

试着把它们组合起来