Animating your UI designs in Keynote in 7 simple steps
原文地址：
http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/
作者：Andy Orsow
動效在UI設計中已經不是什么新鮮事了，但這確實是我們應該在接下來逐漸去熟悉的。使用動畫效果去表達設計想法、去引導客戶，是未來的一種趨勢。
在開始之前，我將使用蘋果的Keynote 軟件來演示如何用它來做動效，戳下邊地址觀看。
順便說一句，在本文中我們將會談到一些在創作個性化交互效果時用到的一些原則，通過遵循這些原則，就能創作出高保真、高交互性的原型。（附件帶有原作者的Keynote 源文件）
土豆視頻鏈接：
Animating your UI designs in Keynote in 7 simple steps
# Step 1：設計你的開始和結束狀態
在動效設計中，有初始狀態、運動軌跡、結束狀態3部分。運動軌跡始于開始狀態，所以咱們得好好設計下動效的初始&結束狀態。拿起你拿手的工具來，不管是Photoshop 、Illustrator 或者是 Sketch，都沒太大關系。
你需要清楚地知道，你在設計過程中，哪些原件會產生動效（包括：移動或者是變形） ，單獨地輸出這些原件。然后將剩下那些元素放到一個層，輸出成圖片文件。
可以看下邊的示意圖：藍色背景層（包括標題欄? 及 主背景區域）不會產生動畫效果，你只需把剩余的界面元素單獨看成一個個原件，最后單獨保存輸出背景層及原件即可。
# Step2：打開keynote 創作
新建Keynote文件，在右上角的Document里雙擊，修改成一個手機屏幕的尺寸，比如iPhone6 的750*1134 。
# Step3：放置你的元素
現在將你的圖層、原件放置到Keynote中，并置于初始狀態。如果元素在一開始是隱藏不顯示的狀態，把他置于場景之外就可以了，待會我們會使用動畫效果將它置于場景中顯示的。
# Step4：添加動畫效果
給原件添加動效，SO Easy：
1.選中原件
2.點擊動畫效果
3.然后選擇動畫，添加動畫效果
Keynote 自動添加一個50%的透明層到你的當前場景中，用來告知你原件動畫效果之后的狀態及位置。簡單來說，我們只需拖拽擺放好位置，然后給原件加上動效就初步完成了。
點擊預覽按鈕預覽效果，然后可以對持續時間、加速項等進行微調設置，直到你滿意為止。
然后為你設計中的每個部分、原件重復上述操作。由于一次給多個原件添加了動畫效果，所以后邊需要在順序面板中對原件、及原件動效的順序進行調整。
# Step5：給動畫效果排序
給原件動效排序這個步驟，可能會有點小慢和沉悶。如果你想要多個原件在用一個時刻觸發動畫效果，只需要在選擇 “與XXX一起開始” ，延時 0 秒，就能達到你想要的效果了。
# Step6：導出成視頻格式文件
?給你的原型加上動效，我們需要將它轉化成視頻，然后導出成GIF，這樣我們就能把它發布到Dribbble 或者其他地方。
怎么做呢？進入【文件】-【導出】-【QuickTime】，然后修改格式、尺寸。Keynote應該會拿到你圖片的高度（也就是導出之后的視頻高度）。
后邊可以修改壓縮率，選擇Apple ProRes 422. 可能輸出和設計稿會有一些色差，不過這都不是什么事。
# Step7：將視頻轉化成GIF文件，發布到網絡
然后打開Photoshop，進入【文件】-【導入】-【視頻幀到圖層】，然后選擇剛才Keynote導出的視頻文件。
然后就是【文件】-【保存到網絡】，輸出成GIF。如果你想要使用這個原型做展示的話，在循環設置里選擇“循環1次”，而不是永久。
# 順便提一下什么是 神奇移動？
Keynote 已經有一個 牛逼的功能 ，那就是 神奇移動了（同一個對象在多個幻燈片中的一種過渡特效）。神奇移動可以比較快的創建動畫，不過過渡效果沒法調整，是Keynote自動生成的，肯定沒有經過手動調整的Animation 精細，不過特點也很明顯，就是“快”。
最后：
Keynote源文件還未上傳
視頻源文件下載地址：http://pan.baidu.com/s/1bnm8IgJ
Animating your UI designs in Keynote in 7 simple steps?
原文地址：http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/
作者：Andy Orsow
