Animating your UI designs in Keynote in 7 simple steps

原文地址：

http://blog.invisionapp.com/animating-your-ui-designs-in-keynote/

作者：Andy Orsow

動效在UI設(shè)計中已經(jīng)不是什么新鮮事了凑阶，但這確實是我們應(yīng)該在接下來逐漸去熟悉的铭拧。使用動畫效果去表達(dá)設(shè)計想法、去引導(dǎo)客戶疙筹，是未來的一種趨勢壶冒。

在開始之前缕题，我將使用蘋果的Keynote 軟件來演示如何用它來做動效，戳下邊地址觀看胖腾。

順便說一句烟零，在本文中我們將會談到一些在創(chuàng)作個性化交互效果時用到的一些原則，通過遵循這些原則咸作，就能創(chuàng)作出高保真锨阿、高交互性的原型。（附件帶有原作者的Keynote 源文件）

土豆視頻鏈接：

Animating your UI designs in Keynote in 7 simple steps

# Step 1：設(shè)計你的開始和結(jié)束狀態(tài)

在動效設(shè)計中记罚，有初始狀態(tài)墅诡、運(yùn)動軌跡、結(jié)束狀態(tài)3部分桐智。運(yùn)動軌跡始于開始狀態(tài)书斜，所以咱們得好好設(shè)計下動效的初始&結(jié)束狀態(tài)。拿起你拿手的工具來酵使，不管是Photoshop 荐吉、Illustrator 或者是 Sketch，都沒太大關(guān)系口渔。

你需要清楚地知道样屠，你在設(shè)計過程中，哪些原件會產(chǎn)生動效（包括：移動或者是變形） 缺脉，單獨(dú)地輸出這些原件痪欲。然后將剩下那些元素放到一個層，輸出成圖片文件攻礼。

可以看下邊的示意圖：藍(lán)色背景層（包括標(biāo)題欄? 及 主背景區(qū)域）不會產(chǎn)生動畫效果业踢，你只需把剩余的界面元素單獨(dú)看成一個個原件，最后單獨(dú)保存輸出背景層及原件即可礁扮。

圖層及原件

# Step2：打開keynote 創(chuàng)作

新建Keynote文件知举，在右上角的Document里雙擊瞬沦，修改成一個手機(jī)屏幕的尺寸，比如iPhone6 的750*1134 雇锡。

設(shè)置幻燈片尺寸

# Step3：放置你的元素

現(xiàn)在將你的圖層逛钻、原件放置到Keynote中，并置于初始狀態(tài)锰提。如果元素在一開始是隱藏不顯示的狀態(tài)曙痘，把他置于場景之外就可以了，待會我們會使用動畫效果將它置于場景中顯示的立肘。

# Step4：添加動畫效果

給原件添加動效边坤，SO Easy：

1.選中原件

選中原件

2.點擊動畫效果

3.然后選擇動畫，添加動畫效果

Keynote 自動添加一個50%的透明層到你的當(dāng)前場景中谅年，用來告知你原件動畫效果之后的狀態(tài)及位置茧痒。簡單來說，我們只需拖拽擺放好位置踢故，然后給原件加上動效就初步完成了文黎。

添加原件動畫效果

點擊預(yù)覽按鈕預(yù)覽效果惹苗，然后可以對持續(xù)時間殿较、加速項等進(jìn)行微調(diào)設(shè)置，直到你滿意為止桩蓉。

然后為你設(shè)計中的每個部分淋纲、原件重復(fù)上述操作。由于一次給多個原件添加了動畫效果院究，所以后邊需要在順序面板中對原件洽瞬、及原件動效的順序進(jìn)行調(diào)整。

# Step5：給動畫效果排序

給原件動效排序這個步驟业汰，可能會有點小慢和沉悶伙窃。如果你想要多個原件在用一個時刻觸發(fā)動畫效果，只需要在選擇 “與XXX一起開始” 样漆，延時 0 秒为障，就能達(dá)到你想要的效果了。

調(diào)整原件動畫順序

# Step6：導(dǎo)出成視頻格式文件

?給你的原型加上動效放祟，我們需要將它轉(zhuǎn)化成視頻鳍怨，然后導(dǎo)出成GIF，這樣我們就能把它發(fā)布到Dribbble 或者其他地方跪妥。

怎么做呢鞋喇？進(jìn)入【文件】-【導(dǎo)出】-【QuickTime】，然后修改格式眉撵、尺寸侦香。Keynote應(yīng)該會拿到你圖片的高度（也就是導(dǎo)出之后的視頻高度）落塑。

輸出視頻格式

后邊可以修改壓縮率，選擇Apple ProRes 422. 可能輸出和設(shè)計稿會有一些色差鄙皇，不過這都不是什么事芜赌。

# Step7：將視頻轉(zhuǎn)化成GIF文件，發(fā)布到網(wǎng)絡(luò)

然后打開Photoshop伴逸，進(jìn)入【文件】-【導(dǎo)入】-【視頻幀到圖層】缠沈，然后選擇剛才Keynote導(dǎo)出的視頻文件。

然后就是【文件】-【保存到網(wǎng)絡(luò)】错蝴，輸出成GIF洲愤。如果你想要使用這個原型做展示的話，在循環(huán)設(shè)置里選擇“循環(huán)1次”顷锰，而不是永久柬赐。

左邊是手動微調(diào)后的動畫效果；右邊是神奇移動的動畫效果官紫；

# 順便提一下什么是 神奇移動肛宋？

Keynote 已經(jīng)有一個 牛逼的功能 ，那就是 神奇移動了（同一個對象在多個幻燈片中的一種過渡特效）束世。神奇移動可以比較快的創(chuàng)建動畫酝陈，不過過渡效果沒法調(diào)整，是Keynote自動生成的毁涉，肯定沒有經(jīng)過手動調(diào)整的Animation 精細(xì)沉帮，不過特點也很明顯，就是“快”贫堰。

最后：

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