最近學習 Material Design 文檔的時候，發(fā)現(xiàn)里面有很多酷炫的交互動畫。比如：

Material casts shadows

于是 Google 了一下做交互動畫的方法，最酷炫的是 Adobe After Effects. 感覺各種高大上，好想學，但覺的現(xiàn)在還用不上這么專業(yè)的軟件[不能效率最大化]，就接著搜有沒有便捷的方法。功夫不負有心人，正好發(fā)現(xiàn)了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.

于是模仿做了一遍，下面將經(jīng)驗分享如下：

最終效果

Animation gif

前期準備

你需要擁有以下設備和軟件：

1. Mac
2. Keynote
3. Sketch ($99)

Sketch 畫圖

試著在腦海中想象你的交互動畫不同階段的畫面：

1. 觸發(fā)前（靜止時的頁面）
2. 觸發(fā)中（過渡的動畫效果）
3. 觸發(fā)后（文字，按鈕，圖形的樣式變化）

Sketch 制作界面時，Icon 可以從 Material Icons下載，節(jié)約時間。
由于頁面比較簡單，就沒有重做了，直接使用的原作者的文檔，結(jié)果如下。

Sketch File

Keynote 做動效

新建一個文檔

Create a new document

將 Keynote 畫布設置成 Sketch 畫布大小

Change the size of artboard

將 Sketch 中所有不同元素[合并同類項，因為 Keynote 可以使元素產(chǎn)生各種變化]復制至 Keynote 中，結(jié)果如下：

Copy & Paste all elements

Tips: Sketch 中選中元素按住 Alt 鍵可以查看元素距離其他元素的間距，記住間距便于精確重現(xiàn)元素位置于 Keynote 中。

控制按鈕先大后小，形成啟動感。

Size the button

消除 Email 圖標

Dissolve email icon

放大并移動 Button 形成背景

Scale & Move button

顯示內(nèi)容

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

經(jīng)驗

1. 動效的 Duration, 小動效在 0.2s-0.35s 之間，大動效在 0.55s-0.75之間。 反復調(diào)整，直到滿意。
2. 動效間的Delay。需要吸引人注意力的地方加點延遲。同類元素的動效之間加點延遲。元素消失后的動效加點延遲。反復調(diào)整，直到滿意。
3. 運動類動效啟動時采用 ease-in, 停止時采用 ease-out，限制時采用 ease-both. 符合人對運動的感覺，起跑時先慢后快，結(jié)束時先快后慢。

不足

1. 不會命名 Keynote 元素，從 Sketch 拷貝過來的元素都是一個名字。元素多了以后很難辨認，請會的朋友教我下。
2. Keynote 動效多了以后，反復添加很麻煩[不知道有沒有類似格式刷的功能]，給已有動效的元素再添加動效也麻煩[show->add->move]，還需要調(diào)整其 order [默認 order 是緊挨在原有動效之下].

文件下載

Sketch File [Passcode:v5s1]
Keynote File [Passcode:3bd7]

我還是感覺 AE 好帥好帥啊，花癡般的流口水。
-- 野子 Joey

原文鏈接