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下的運行效果
感覺棒棒噠
