動(dòng)效設(shè)計(jì)軟件Principle，可以用來制作非常優(yōu)秀的動(dòng)畫，我們就來看看這款軟件中用哪些因素實(shí)現(xiàn)動(dòng)畫吧。

1.動(dòng)畫在軟件中實(shí)現(xiàn)的原理

當(dāng)兩個(gè)畫板之間的事件被成功觸發(fā)時(shí)，Principle會(huì)為名稱相同的圖層自動(dòng)補(bǔ)全過渡動(dòng)畫效果，這個(gè)點(diǎn)非常關(guān)鍵，如果制作成功后，看不到對(duì)應(yīng)的動(dòng)畫效果，務(wù)必檢查兩個(gè)畫板之間的圖層名稱是否相同?？聪聢D中的例子，畫板1和2的矩形圖層名稱相同，都是“Layer”，第二個(gè)矩形透明度設(shè)置為30%，目的是矩形觸發(fā)事件時(shí)顏色變淡，我們拉一個(gè)點(diǎn)擊事件，當(dāng)點(diǎn)擊事件觸發(fā)時(shí)，Principle會(huì)自動(dòng)為兩者補(bǔ)全一個(gè)變淡過程的動(dòng)畫。

另外，這個(gè)默認(rèn)的動(dòng)畫參數(shù)是可以被修改的，這里就會(huì)涉及到關(guān)鍵幀和動(dòng)畫曲線兩個(gè)概念。

2.關(guān)鍵幀

在動(dòng)畫中，一幀就是一幅停止的畫面，連續(xù)播放幀就形成了動(dòng)畫，在Principle中，我們可以控制幀的播放時(shí)間，這就是所謂的關(guān)鍵幀。點(diǎn)擊事件的帶箭頭直線，在工作區(qū)下方就會(huì)出現(xiàn)一個(gè)動(dòng)畫面板，右側(cè)時(shí)間軸有一個(gè)藍(lán)色的條，就是我們所說的關(guān)鍵幀，藍(lán)色條左側(cè)的菱形代表關(guān)鍵幀的開始時(shí)間，右側(cè)的菱形代表關(guān)鍵幀的結(jié)束時(shí)間，系統(tǒng)默認(rèn)的動(dòng)畫效果持續(xù)時(shí)間是0.3S，我們可以拉長關(guān)鍵幀的長度，來增加動(dòng)畫效果的持續(xù)時(shí)間。

另外，在時(shí)間軸上向右拖動(dòng)關(guān)鍵幀，可以延遲動(dòng)畫發(fā)生的時(shí)間，左側(cè)對(duì)應(yīng)的Opacity（透明度）就是動(dòng)畫要實(shí)現(xiàn)的效果，點(diǎn)擊雪花圖標(biāo)，可以凍結(jié)當(dāng)前的動(dòng)畫效果，這個(gè)圖標(biāo)還是挺形象的。

3.動(dòng)畫曲線

當(dāng)汽車從A點(diǎn)駕駛到B點(diǎn)時(shí)，司機(jī)可以選擇平穩(wěn)駕駛，也可以選擇先加速后減速，也可以選擇高速起步臨近終點(diǎn)再慢下來，這個(gè)駕駛過程就好比動(dòng)畫曲線。在動(dòng)畫中，控制“駕駛”過程的背后，就是動(dòng)畫曲線在起作用。關(guān)鍵幀中間有一個(gè)“Default（默認(rèn)）”的英文單詞，點(diǎn)擊它，就會(huì)出現(xiàn)一個(gè)包含所有動(dòng)畫曲線的彈層，Default默認(rèn)被選中，拖動(dòng)曲線的小藍(lán)點(diǎn)，可以調(diào)整曲線的弧度，也可以在下方XY的輸入框中輸入?yún)?shù)，這些參數(shù)是需要給到前端實(shí)現(xiàn)的，我們后面會(huì)講述。

每種動(dòng)畫曲線的效果都不同，簡單的Default（默認(rèn)）曲線，是一條平穩(wěn)過渡的曲線；復(fù)雜的Springs（彈性）曲線，模擬了彈簧的震動(dòng)和阻尼效果，還提供摩擦力系數(shù)的選項(xiàng)；Linear（直線）曲線是直線變化的效果，后面標(biāo)記的表情也告誡我們不要用。

推薦閱讀：

Principle中文手冊(cè)：Principle中文手冊(cè)（2019）