Facebook的新玩具 Keyframes

facebook在iOS跟Android上分别推出过两个动画框架pop和rebound，这次又带来了新的玩具Keyframes

logo

那么，Keyframes是干什么的呢？

github主页是这么说的
Keyframes是一套(1)一个ExtendScript脚本从After Effects文件提取动画效果的数据(实则是一个json文件)和(2)一个Android和iOS对应的渲染库。Keyframes可以以最小的文件大小的来导出和渲染高质量、基于矢量的动画复杂形状和路径曲线。

好吧，直觉告诉我它就是另一种方式的Anim vectordrawable，但它结合了after effects，更加的直觉，能够让设计师直接参与导出动画参数文件。

看了下github的文档，我觉得难点就是After Effects的动画绘制和导出，你需要按照它的要求，否则不能正确导出和渲染。

以下是我翻译的Keyframes Guideline on AfterEffects

软件版本

• Adobe After Effects CC 2015

合成

• 预合成是不被支持的
• 没有对帧速率的限制，但是很推荐一个整数的帧速率

图层

• 层的父级

• 只有空层可以作为其他层的父层
• 空层也可以作为其他空层的父层

• 形状图层

• 不支持路径合并
  • 每组最多一条路径
  • 每组最多一条描边
  • 每层最多一个组

一个典型的形状层类似这样

请不要在形状的转换中进行缩放、歪斜、旋转或设置不透明度。层变换部分进行这类操作

• 不支持路径修剪
• 不支持polyStar
• 不支持矩形和椭圆

图像层(实验特性)

• 支持一个简单的PNG图像作为层

动画

• 不支持表达式
• 在你的keyframes中只能使用插值器类型为线性和贝塞尔

不要用过冲或下冲贝塞尔，换句话说，两个控制点应始终保持在两帧形成的红色矩形中

效果

• 渐变(实验特性)
• 选择“效果/梯度斜坡”支持的线性梯度
• 不要使用渐变填充

我觉得新手(我也是)应该去clone一份代码，跑一跑代码，对照guide看看ae的源文件是怎么做的，就能入门了

以下是Android下的运行效果

感觉棒棒哒