最近學(xué)習(xí) Material Design 文檔的時候帘不，發(fā)現(xiàn)里面有很多酷炫的交互動畫伟墙。比如：
于是 Google 了一下做交互動畫的方法内狗，最酷炫的是 Adobe After Effects. 感覺各種高大上，好想學(xué)漠另，但覺的現(xiàn)在還用不上這么專業(yè)的軟件[不能效率最大化]格嗅，就接著搜有沒有便捷的方法番挺。功夫不負有心人，正好發(fā)現(xiàn)了 Medium 上的一篇好文 《Design in Sketch Then Animate in Keynote》.
于是模仿做了一遍屯掖，下面將經(jīng)驗分享如下：
最終效果
前期準(zhǔn)備
你需要擁有以下設(shè)備和軟件：
- Mac
- Keynote
- 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)容
縮小并移動文字，同時顯示裝飾線條
隱藏所有文字和線條
縮小并移動按鈕至原樣
按鈕放大再縮小蜈七，形成停止感
顯示完成圖標(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 拷貝過來的元素都是一個名字曹宴。元素多了以后很難辨認搂橙，請會的朋友教我下。
- Keynote 動效多了以后笛坦，反復(fù)添加很麻煩[不知道有沒有類似格式刷的功能]区转，給已有動效的元素再添加動效也麻煩[show->add->move]，還需要調(diào)整其 order [默認 order 是緊挨在原有動效之下].
文件下載
Sketch File [Passcode:v5s1]
Keynote File [Passcode:3bd7]
我還是感覺 AE 好帥好帥啊版扩，花癡般的流口水废离。
-- 野子 Joey
