99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

動效設(shè)計師怎么與技術(shù)對接？

2024-2-1 濤濤

動效設(shè)計師怎么與技術(shù)對接？

開發(fā)和設(shè)計師溝通困難，是因為沒有通過精準(zhǔn)的參數(shù)去描述動效。要解決這個問題，我們需要創(chuàng)造一套有效的動效標(biāo)注系統(tǒng)，這個系統(tǒng)必須做到以下兩點：讓設(shè)計師可以輕松地描述動效，讓開發(fā)可以準(zhǔn)確地還原動效。

這個系統(tǒng)主要分為以下兩個方面：

（1）量化動效數(shù)據(jù)

其實，界面動效背后涉及到的設(shè)計參數(shù)非常簡單，只有三種。無論多復(fù)雜的動效也是這三種參數(shù)經(jīng)過組合拼接出來的：

undefined

變化

變化可以劃分為四類（如動圖所示），這四類變化基本涵蓋了界面元素的全部運動方式，只要我們準(zhǔn)確地描述元素在動效前后的變化量，就可以準(zhǔn)確地完成「變化」這個參數(shù)的對接。

undefined

舉個例子，下面動圖中被扔出來的綠色小恐龍就同時包含上述四種變化。

undefined

它在 AE 中前后變化的參數(shù)如下：

undefined

那么這個時候我們需要記錄的狀態(tài)（這里只涉及到變化）就應(yīng)該是這樣：

初始狀態(tài)：

位移：X軸 0

旋轉(zhuǎn) ：0度

尺寸：1

透明度：0.2

結(jié)束狀態(tài)：

位移：X軸 200px

旋轉(zhuǎn)：+180度

尺寸：1.5

透明度：1

這樣看就清晰多了。作為一名友善的設(shè)計師，千萬不要隨便拿一個 demo 說「就按照這樣做個差不多的效果就可以了」，那樣的話估計大部分開發(fā)只會一臉懵逼。

時長

第二個關(guān)鍵參數(shù)就是時長，這個顧名思義也就是動畫播放的時間長度。無論變化是多是少，簡單還是復(fù)雜，我們需要把每一段變化的時間確定，時間短干脆利落，時間長輕緩柔和。

在標(biāo)注的時候，不要忘記標(biāo)注清楚動效的起始時間和終止時間。

undefined

曲線

曲線描述的是物體運動時候的速度變化，如果說變化和時長是動效的本體，那么曲線就是動效的靈魂。

對于一個運動的物體，同樣的變化，同樣時間，賦予不同的速度曲線，會讓它的動效產(chǎn)生豐富的變化。所以在動效設(shè)計中，曲線也是設(shè)計者最為關(guān)注的部分。

最基礎(chǔ)的速度曲線有線性（就是全程勻速）、緩入、緩出、緩入緩出四種：

undefined

雖然大家平時或多或少都用過以上幾種曲線來描述動畫的過程，但是大家不一定對曲線的具體用法有真正的理解、下面我會給出四個例子，來闡述一下以上幾種曲線的用法。

在上圖的例子中小圓運動時長一致，它們水平位移，一起到達(dá)終點，但是速度曲線不一樣。

undefined

圓一：緩出 ease-out，本來有一定的速度，慢慢剎車。適合用在一個元素進(jìn)入頁面的時候。
圓二：緩入 ease-in，本來沒速度，越來越快，相當(dāng)于一個東西從零開始加速。適合用在一個元素離開頁面的時候。
圓三：緩入緩出 ease-in-out，開頭結(jié)尾都沒有速度，先加速、再減速，是我們?nèi)粘Ｉ钪凶畛Ｒ姷奈锢磉\動。適合用在一個元素從頁面 A 點到 B 點。
圓四：做勻速運動 linear ，看起來非常死板，不推薦使用。

那么動畫曲線在設(shè)計工具的哪里出現(xiàn)呢？

undefined