国产精品亚洲精品,国产一区二区三区最好精华液,亚洲一区二区三区免费观看

動(dòng)效設(shè)計(jì)師怎么與技術(shù)對(duì)接？

2024-2-1 濤濤

動(dòng)效設(shè)計(jì)師怎么與技術(shù)對(duì)接？

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

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

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

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

undefined

變化

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

undefined

舉個(gè)例子，下面動(dòng)圖中被扔出來的綠色小恐龍就同時(shí)包含上述四種變化。

undefined

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

undefined

那么這個(gè)時(shí)候我們需要記錄的狀態(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è)計(jì)師，千萬(wàn)不要隨便拿一個(gè) demo 說「就按照這樣做個(gè)差不多的效果就可以了」，那樣的話估計(jì)大部分開發(fā)只會(huì)一臉懵逼。

時(shí)長(zhǎng)

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

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

undefined

曲線

曲線描述的是物體運(yùn)動(dòng)時(shí)候的速度變化，如果說變化和時(shí)長(zhǎng)是動(dòng)效的本體，那么曲線就是動(dòng)效的靈魂。

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

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

undefined

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

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

undefined

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

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

undefined

AE 中可以通過值圖表，來調(diào)整動(dòng)畫的曲線，并且通過換算（換算方法）得到可用于開發(fā)的 cubic-bezier 曲線參數(shù)，或者通過 Flow 這樣的插件直接用 cubic-bezier 曲線進(jìn)行設(shè)計(jì)。

而在新興設(shè)計(jì)工具（Framer）中，本身工具就直接可以用 cubic-bezier 曲線定義動(dòng)畫。

在前端開發(fā)中，可以直接利用設(shè)計(jì)給出的 cubic-bezier 曲線參數(shù)來描述動(dòng)畫，示例如下：

div {
-webkit-transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99);
transition: all 500ms cubic-bezier(0.10, 0.45, 0.46, 0.99);
}

現(xiàn)在有許多工具可以方便設(shè)計(jì)師去調(diào)曲線，實(shí)時(shí)預(yù)覽效果，并且顯示成前端需要的格式。在這里推薦兩個(gè)：

cubic-bezier.com

undefined

css3beziercurve.net/

undefined

曲線部分就這樣講完了，順帶提一下，雖然在這里我舉例的是位移的速度曲線，但是其實(shí)旋轉(zhuǎn)、尺寸、透明度等等變化同樣是存在速度曲線的，在這些變化上加上速度曲線一樣可以讓動(dòng)效更加自然貼近真實(shí)。前端也是可以實(shí)現(xiàn)的。

（2）對(duì)量化的數(shù)據(jù)進(jìn)行標(biāo)注

上圖中的交互動(dòng)效來自 Amazon Prime Music，界面中出現(xiàn)了兩個(gè)元素（加號(hào) icon & 對(duì)勾 icon）的動(dòng)畫，雖然看起來非常簡(jiǎn)單，但是包含著極為豐富的變化。

標(biāo)注的時(shí)候除了說明動(dòng)效的三元素，還要說明觸發(fā)條件以及動(dòng)畫對(duì)象，所以最好用表格的方式，這樣可以更清晰的把它們每一段變化都清晰羅列出來：

這樣就算是一個(gè)比較完整的動(dòng)效交接文檔了！

好了，終于結(jié)束了······

作者：二黑哥哥
鏈接：https://www.zcool.com.cn/article/ZOTAyMjMy.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。