最近學(xué)習(xí) Material Design 文檔的時候，發(fā)現(xiàn)里面有很多酷炫的交互動畫蝴悉。比如：
于是 Google 了一下做交互動畫的方法单默，最酷炫的是 Adobe After Effects. 感覺各種高大上膨俐，好想學(xué)抵窒，但覺的現(xiàn)在還用不上這么專業(yè)的軟件[不能效率最大化]萨咕，就接著搜有沒有便捷的方法丑孩。功夫不負(fù)有心人冀宴，正好發(fā)現(xiàn)了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.
于是模仿做了一遍，下面將經(jīng)驗分享如下：
最終效果
前期準(zhǔn)備
你需要擁有以下設(shè)備和軟件：
1.Mac
2.Keynote
3.Sketch ($99)
Sketch 畫圖
試著在腦海中想象你的交互動畫不同階段的畫面：
觸發(fā)前（靜止時的頁面）
觸發(fā)中（過渡的動畫效果）
觸發(fā)后（文字温学，按鈕略贮，圖形的樣式變化）
Sketch 制作界面時，Icon 可以從 Material Icons下載仗岖，節(jié)約時間逃延。
由于頁面比較簡單，就沒有重做了轧拄，直接使用的原作者的文檔揽祥，結(jié)果如下。
Keynote 做動效
新建一個文檔
將 Keynote 畫布設(shè)置成 Sketch 畫布大小
將 Sketch 中所有不同元素[合并同類項檩电，因為 Keynote 可以使元素產(chǎn)生各種變化]復(fù)制至 Keynote 中拄丰，結(jié)果如下：
Tips: Sketch 中選中元素按住 Alt 鍵可以查看元素距離其他元素的間距，記住間距便于精確重現(xiàn)元素位置于 Keynote 中俐末。
控制按鈕先大后小愈案，形成啟動感。
消除 Email 圖標(biāo)
放大并移動 Button 形成背景
顯示內(nèi)容
縮小并移動文字鹅搪，同時顯示裝飾線條
Scale & Move words while show decorated line
隱藏所有文字和線條
縮小并移動按鈕至原樣
Scale & Move the button to original state
按鈕放大再縮小，形成停止感
顯示完成圖標(biāo)
Done, you made it, congratulations!
經(jīng)驗
動效的 Duration, 小動效在 0.2s-0.35s 之間遭铺，大動效在 0.55s-0.75之間丽柿。 反復(fù)調(diào)整，直到滿意魂挂。
動效間的Delay甫题。需要吸引人注意力的地方加點延遲。同類元素的動效之間加點延遲涂召。元素消失后的動效加點延遲坠非。反復(fù)調(diào)整，直到滿意果正。
運動類動效啟動時采用 ease-in, 停止時采用 ease-out炎码，限制時采用 ease-both. 符合人對運動的感覺盟迟，起跑時先慢后快，結(jié)束時先快后慢潦闲。
不足
不會命名 Keynote 元素攒菠，從 Sketch 拷貝過來的元素都是一個名字。元素多了以后很難辨認(rèn)歉闰，請會的朋友教我下辖众。
Keynote 動效多了以后，反復(fù)添加很麻煩[不知道有沒有類似格式刷的功能]和敬，給已有動效的元素再添加動效也麻煩[show->add->move]凹炸，還需要調(diào)整其 order [默認(rèn) order 是緊挨在原有動效之下].
文件下載
Sketch File[Passcode:v5s1]
Keynote File[Passcode:3bd7]
