互聯(lián)網(wǎng)產(chǎn)品-交互設(shè)計(jì)-質(zhì)感調(diào)節(jié)-產(chǎn)品經(jīng)理全套

互聯(lián)網(wǎng)產(chǎn)品-交互設(shè)計(jì)-質(zhì)感調(diào)節(jié)打開AE關(guān)鍵幀控制面板我們可以看到有兩種曲線的表達(dá)圖示；一種為速度曲線圖表一種則為數(shù)值（屬性）曲線圖表。速度曲線速度曲線記錄的是物體運(yùn)動每一刻的速度變化。我們來分解下它的曲線圖表，x、y軸分別表示的是時間與速度。觀察下圖的曲線則可以得出物體起始速度為0呈靜止?fàn)顟B(tài)，后續(xù)慢慢開始加速并且速度達(dá)到頂峰；最后物體運(yùn)動至終點(diǎn)并停下。整體圖表展示較為直觀，經(jīng)過分析我們可以得知整段運(yùn)動其實(shí)就是我們熟知的緩動運(yùn)動（起點(diǎn)和終點(diǎn)慢，運(yùn)動過程快）對于速度曲線的編輯，設(shè)計(jì)師可以通過曲線手柄來控制運(yùn)動節(jié)點(diǎn)的加速度。讓我們雙擊節(jié)點(diǎn)查看關(guān)鍵幀速度圖表來分析下速度曲線的基本規(guī)律。此時速度圖表顯示傳入速度（incomingVelocity）為0，影響為33%?！競魅胨俣取刮覀兛梢岳斫鉃檫\(yùn)動起點(diǎn)的速度，而「影響」這個數(shù)值則可以理解為加速度。傳入速度需要百分之多少的加速度即可達(dá)到最高速度，數(shù)值越大即代表加速的幅度越大曲線呈現(xiàn)的陡峭程度就越陡峭。速度編排當(dāng)設(shè)計(jì)師們想針對物體運(yùn)動速度做一些特殊的編排處理，使用速度曲線會更直觀一些。例如：想要模擬小球彈跳過程中的滯空感，我們只需調(diào)節(jié)小球懸空時的速度大小及加速度即可。想要達(dá)到滯空的感覺，那運(yùn)動中程球體的速度需要大于0讓球體持續(xù)運(yùn)動，就能達(dá)到我們想要的效果了。表達(dá)式應(yīng)用我們經(jīng)常會在動畫內(nèi)使用彈性表達(dá)式，許多設(shè)計(jì)師也遇到過表達(dá)式輸入后還是沒效果的情況。其實(shí)是因?yàn)楫?dāng)前關(guān)鍵幀的速度為0而導(dǎo)致的，除表達(dá)式所設(shè)置的彈性頻率、衰減度外；速度也決定著彈性的強(qiáng)度，我們只需根據(jù)速度調(diào)節(jié)自己想要的彈性效果即可。數(shù)值曲線數(shù)值（屬性）曲線記錄的是元素屬性隨著時間的變化過程。我們也來分解下它的曲線圖表，x、y軸分別表示的是數(shù)值（當(dāng)前運(yùn)動變化的屬性）與時間。而該曲線代表著物體運(yùn)動速率的分布情況，也就是速度等于=物體運(yùn)動的距離（數(shù)值）/物體運(yùn)動距離所花的時間（時間）?？赡芸粗酵唵蔚模ǔ踔形锢恚┑б豢磮D表還是比較抽象，我們可以一步步的將其拆解方便大家理解它的含義。我們先確定元素位移時間以及距離，在不添加任何緩動插值的情況下，賦予他們最基礎(chǔ)的線形運(yùn)動。也就是從0～1秒它的速度是呈勻速的狀態(tài)。再將整條曲線分解成平均的幾個關(guān)鍵時間點(diǎn)，記錄元素在不同時間點(diǎn)所在的位置。根據(jù)速度公式，我們?nèi)y試下速度的變化對曲線的影響是什么？關(guān)于速度的計(jì)算公式其實(shí)我們都知道的，速度等于單位物體的位移距離除于位移所花的時間，也可以理解為圖表中的速度就是線段的斜率。接著讓我們將其速度提升一倍，從1秒的總時長提到0.5秒的時間。根據(jù)圖示我們可以觀察到當(dāng)我們將時長加快時，速率線段與我們的x時間軸的角度越來越大。同理我們嘗試下將運(yùn)動屬性數(shù)值降低一倍，我們可以觀察到此時速率線段與我們的x時間軸的角度越來越小。我們通過上述的拆解分析，可以得到一些規(guī)律。在數(shù)值曲線下，時間以及運(yùn)動屬性數(shù)值影響著物體運(yùn)動速度。根據(jù)曲線陡峭程度影響著運(yùn)動速率快慢的規(guī)律，我們可以總結(jié)一個觀察曲線的技巧。曲線越緩和（貼近時間軸x）速率越慢，曲線越陡峭（貼近數(shù)值軸Y）速率則越快。在弄明白了數(shù)值曲線的基本規(guī)律后，我們將曲線做一些處理讓他更貼合于我們的現(xiàn)實(shí)自然運(yùn)動。模擬現(xiàn)實(shí)物體運(yùn)動的狀態(tài)，物體剛開始慢慢起步再到加速的過程。如下（P1）圖所示數(shù)值曲線在前半部分速率較慢，到達(dá)時間中點(diǎn)后突然增速并到達(dá)終點(diǎn)。將曲線作一定的平滑過渡處理就是我們所熟知的緩入（P2）曲線啦。運(yùn)動曲線的使用建議對于不同的運(yùn)動曲線模式（速度/數(shù)值），設(shè)計(jì)師們需充分了解其曲線模式的含義。我們可以根據(jù)設(shè)計(jì)場景去選擇適合的曲線模式，關(guān)于場景還有很多，我大概羅列了部分項(xiàng)目接觸到的特定場景出來。主要目的是想讓大家意識到熟練的掌握兩種運(yùn)動曲線模式的重要性，別將自己的工作方式或習(xí)慣限定太死，靈活的變通很重要。速度曲線：1.AE動畫中部分無具體數(shù)值單位的動畫幀，例如（蒙版路徑），設(shè)計(jì)師們只能通過速度曲線進(jìn)行調(diào)節(jié)。2.使用彈性表達(dá)式需根據(jù)速度大小去