最近學習 Material Design 文檔的時候，發現里面有很多酷炫的交互動畫。比如：
Material casts shadows
于是 Google 了一下做交互動畫的方法，最酷炫的是 Adobe After Effects. 感覺各種高大上，好想學，但覺的現在還用不上這么專業的軟件[不能效率最大化]，就接著搜有沒有便捷的方法。功夫不負有心人，正好發現了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.
于是模仿做了一遍，下面將經驗分享如下：
最終效果
Animation gif
前期準備
你需要擁有以下設備和軟件：
- Mac
- Keynote
- Sketch ($99)
Sketch 畫圖
試著在腦海中想象你的交互動畫不同階段的畫面：
- 觸發前（靜止時的頁面）
- 觸發中（過渡的動畫效果）
- 觸發后（文字，按鈕，圖形的樣式變化）
Sketch 制作界面時，Icon 可以從 Material Icons下載，節約時間。
由于頁面比較簡單，就沒有重做了，直接使用的原作者的文檔，結果如下。
Sketch File
Keynote 做動效
新建一個文檔
Create a new document
將 Keynote 畫布設置成 Sketch 畫布大小
Change the size of artboard
將 Sketch 中所有不同元素[合并同類項，因為 Keynote 可以使元素產生各種變化]復制至 Keynote 中，結果如下：
Copy & Paste all elements
Tips: Sketch 中選中元素按住 Alt 鍵可以查看元素距離其他元素的間距，記住間距便于精確重現元素位置于 Keynote 中。
控制按鈕先大后小，形成啟動感。
Size the button
消除 Email 圖標
Dissolve email icon
放大并移動 Button 形成背景
Scale & Move button
顯示內容
Show the content
縮小并移動文字，同時顯示裝飾線條
Scale & Move words while show decorated line
隱藏所有文字和線條
Paste_Image.png
縮小并移動按鈕至原樣
Scale & Move the button to original state
按鈕放大再縮小，形成停止感
Size the button
顯示完成圖標
Paste_Image.png
Done, you made it, congratulations!
經驗
- 動效的 Duration, 小動效在 0.2s-0.35s 之間，大動效在 0.55s-0.75之間。 反復調整，直到滿意。
- 動效間的Delay。需要吸引人注意力的地方加點延遲。同類元素的動效之間加點延遲。元素消失后的動效加點延遲。反復調整，直到滿意。
- 運動類動效啟動時采用
ease-in, 停止時采用ease-out，限制時采用ease-both. 符合人對運動的感覺，起跑時先慢后快，結束時先快后慢。
不足
- 不會命名 Keynote 元素，從 Sketch 拷貝過來的元素都是一個名字。元素多了以后很難辨認，請會的朋友教我下。
- Keynote 動效多了以后，反復添加很麻煩[不知道有沒有類似格式刷的功能]，給已有動效的元素再添加動效也麻煩[show->add->move]，還需要調整其 order [默認 order 是緊挨在原有動效之下].
文件下載
Sketch File [Passcode:v5s1]
Keynote File [Passcode:3bd7]
我還是感覺 AE 好帥好帥啊，花癡般的流口水。
-- 野子 Joey
