前段時(shí)間大家有被《你的人格主導(dǎo)色》這個(gè) H5 刷屏了吧
你的人格主導(dǎo)色-錄屏
還沒玩的朋友可以在云音樂 APP 搜索關(guān)鍵詞「顏色測(cè)試」
或者 用云音樂 APP 掃這個(gè)二維碼（不要用微信，被屏蔽了）
https://st.music.163.com/st-color-quiz (二維碼自動(dòng)識(shí)別)
今天我來和大家聊聊這個(gè)項(xiàng)目中動(dòng)效設(shè)計(jì)是怎么落地的。這個(gè) H5 從結(jié)構(gòu)上來說很簡單，8 個(gè)頁面 8 道選擇題，每個(gè)頁面有一段聲音，用戶選擇自己認(rèn)為這個(gè)聲音是什么，然后系統(tǒng)根據(jù)選擇結(jié)果分析用戶的人格「成分」并呈現(xiàn)在結(jié)果頁。這里的動(dòng)效也主要是每個(gè)頁面內(nèi)的動(dòng)效和轉(zhuǎn)場(chǎng)動(dòng)效等幾個(gè)部分。
頁面內(nèi)的動(dòng)效，大部分是用一個(gè)帶音頻的視頻作為背景動(dòng)效，少部分用代碼完成。這樣的好處是如果背景動(dòng)效需要修改，只需要調(diào)整視頻內(nèi)容，輸出并替換資源就好，兼容性也是相對(duì)較好。
但是選項(xiàng)按鈕部分，因?yàn)椴煌脩酎c(diǎn)擊的不一樣，就還是需要結(jié)合代碼來做效果了。這里主要用到的是 CSS 動(dòng)畫。
我們先來看看翻頁效果：
這個(gè)效果我們是模擬的幕布從一邊被拉出并遮蓋整個(gè)頁面的效果，材質(zhì)還是有點(diǎn)彈性的那種，這個(gè)形狀是在 canvas 中繪制的，繪制方法其實(shí)和我們平時(shí)在作圖軟件里的原理一樣，是由幾段閉合的貝塞爾曲線或直線組成的形狀：
//繪制從點(diǎn) p1(x,y) 到點(diǎn) p2(x,y) 的一段貝塞爾曲線 ctx.bezierCurveTo( p1(起始頂點(diǎn))的控制點(diǎn) 2 的 x 坐標(biāo)， p1 的控制點(diǎn) 2 的 y 坐標(biāo)， p2(下一個(gè)頂點(diǎn))的控制點(diǎn) 1 的 x 坐標(biāo)， p2 的控制點(diǎn) 1 的 y 坐標(biāo)， p2 的 x 坐標(biāo)， p2 的 y 坐標(biāo));
形狀的運(yùn)動(dòng)實(shí)際上就是構(gòu)成它的頂點(diǎn)的運(yùn)動(dòng)，這塊「布」是由這些點(diǎn)構(gòu)成的：
在用戶沒有操作的時(shí)候，所有的點(diǎn)，包括 P2 的控制點(diǎn)，都貼著屏幕右邊沿，這樣構(gòu)成的圖形是一條看不見的線（P1、P5 重合，P3、P4 重合，且這四個(gè)點(diǎn)的控制點(diǎn)都是他們本身）。當(dāng)用戶點(diǎn)擊操作之后，點(diǎn) P2 先向屏幕左邊移動(dòng)，它的兩個(gè)控制點(diǎn)也以相同速度移動(dòng)，這時(shí)看到的就如上圖般被扯出一塊布的效果；P2 移動(dòng)一段距離后，P1 和 P3 也開始移動(dòng)，做出被「拉扯」出來的感覺，最后都移動(dòng)到屏幕左邊沿，然后 P2 再在水平位移上做幾次回彈效果：
轉(zhuǎn)場(chǎng) demo：https://codepen.io/bigxixi/pen/yLMvmEL
?
其實(shí)一開始我們?cè)O(shè)計(jì)了可以用手拖拽翻頁的效果，但由于一些音視頻播放的兼容性問題，無奈簡化成了點(diǎn)擊觸發(fā)~
拖拽翻頁演示
我們?cè)賮砜纯错撁胬锏膭?dòng)效。
這一頁背景視頻里的雨主要是用 AE 自帶的 CC Rainfall 效果器制作：
三個(gè)選項(xiàng)按鈕就是三張圖片，點(diǎn)擊之后「被選中」?fàn)顟B(tài)的圖片透明度漸現(xiàn)覆蓋掉黑字。透明度動(dòng)畫我通過定義 fadeIn 和 fadeOut 兩個(gè)簡單的動(dòng)畫 class，在點(diǎn)擊的時(shí)候添加到對(duì)應(yīng)的 dom 上就好了。
.fadeOut{
animation: fadeKey 0.3s ease 0s 1 reverse both;
}.fadeIn{
animation: fadeKey 0.3s ease 0s 1 normal both;
}@keyframes fadeKey {
from{opacity: 0;}
to{opacity: 1;}
}
詳情參見：
下雨-選項(xiàng) demo：https://codepen.io/bigxixi/pen/zYZVpWe
這一頁，火焰背景同樣是視頻
主要通過 AE 里的「分型雜色」+「置換圖」效果器模擬火焰動(dòng)畫。
而幾個(gè)選項(xiàng)的動(dòng)效則用 CSS+圖片資源來完成。其中火焰拖尾是畫好的一張圖，我把圖的錨點(diǎn)定在圖片靠上的位置：
transform-origin: 50% 22.5%;
選項(xiàng)向上飛入畫面的過程中做了個(gè) Y 方向從 50%到 100%的縮放。當(dāng)然還有透明度的變化。
@keyframes optionTileInAniP2Key {
0%{
opacity: 0;
transform: scaleY(0.5);
}
20%{
opacity: 1;
}
100%{
opacity: 0;
transform: scaleY(1);
}
}
三個(gè)選項(xiàng)用了三張 png 圖片來呈現(xiàn)，雖然看起來是「黑字」+「紅色影子」的組合，實(shí)際上圖片資源用的是「紅字」，在 CSS 里直接用 filter:saturate(0) 把它的飽和度降為 0，這樣就呈現(xiàn)黑色了，而選項(xiàng)背后的紅色影子，其實(shí)是用的圖還是前面的同一張圖，這時(shí)就不必著色了直接用本來的顏色，同時(shí)同樣通過 filter 添加模糊和投影效果，也順便降低一點(diǎn)透明度。
.optionShadow {
filter: opacity(0.5) blur(0.5vw) drop-shadow(0px 0px 1px rgb(255, 155, 93));
}
這樣就可以做到「字、影分離」——他們的浮動(dòng)是有個(gè)微小的錯(cuò)位的——的同時(shí)只用到一張圖片資源，而原圖用紅字的原因是把圖中黑色部分填充為紅色效果不好（至少我沒試出很好的方法），但紅色變成黑色卻很方便。
詳情可以參考 demo：https://codepen.io/bigxixi/pen/qBryRJM
我們?cè)倏纯催@一頁
背景視頻是個(gè)簡單的三維物體旋轉(zhuǎn)動(dòng)畫，用金屬材質(zhì)+環(huán)境光澤的反射渲染。
選項(xiàng)動(dòng)畫也很簡單，每個(gè)選項(xiàng)我們拆分為選項(xiàng)（A、B、C)和內(nèi)容描述，把他們的錨點(diǎn)定位到他們相接的線條上:
選項(xiàng)：
transform-origin: 100% 50%;
文字:
transform-origin: 0% 50%;
然后對(duì)文字添加一個(gè) skewY 和 scaleX 的動(dòng)畫，它就看起來像是進(jìn)行了一個(gè) 3d 旋轉(zhuǎn)，被「按」進(jìn)屏幕了。
顏色變深的效果，其實(shí)是同一層做同一個(gè)動(dòng)畫的純色 div 在點(diǎn)擊后疊加了一個(gè)透明度動(dòng)畫。
.optionChoosenAni{
animation: optionChoosenAniKey 0.5s cubic-bezier(.38,1.5,.5,1.01) 0s 1 normal both;
}
@keyframes optionChoosenAniKey {
0%{
transform: skewY(0) scaleX(1);
}
100%{
transform: skewY(-15deg) scaleX(0.5);
}
}
詳情可以參考 demo：https://codepen.io/bigxixi/pen/oNZrqYq?
鯨魚這個(gè)頁面
背景視頻部分我們主要使用了 AE 自帶的 分型雜色 + 毛邊 效果器，通過調(diào)整亮度、對(duì)比度，模擬科考船用聲吶掃描海底的圖像效果。
選項(xiàng)部分的背景是分別用了三張 apng 動(dòng)圖，而文字則是 CSS 精靈圖。
在用戶未做出選擇時(shí)，精靈圖靜止于第一幀；用戶點(diǎn)擊對(duì)應(yīng)選項(xiàng)后，精靈圖動(dòng)畫開始播放，文字「散開」
.choosenAni_A{
animation: whaleOptionASprAniKey 1s steps(1) 0s 1 normal both;
}
@keyframes whaleOptionASprAniKey {
0% { background-position: 0 0; }
3.45% { background-position: -387px 0px; }
6.90% { background-position: -774px 0px; }
……
96.55% { background-position: -3096px -200px; }
100.00% { background-position: -3483px -200px; }
}
同時(shí)調(diào)整色相 filter:hue-rotate() 為背景動(dòng)圖「著色」
.chooosenBG_A{
transition: all 0.2s linear;
filter:hue-rotate(120deg);
}
詳細(xì)可以看下 demo：https://codepen.io/bigxixi/pen/ZEedxJL
這個(gè)頁面的背景視頻里
布簾被風(fēng)吹起動(dòng)畫使用了簡單的 C4D 的動(dòng)力學(xué)來完成
三個(gè)選項(xiàng)隨風(fēng)擺動(dòng)的效果則是簡單粗暴的用了三個(gè) apng 動(dòng)圖
選項(xiàng)飄動(dòng)的扭曲是用 AE 的「置換圖」制作。
不過他們的飄入、飄出，以及選中的著色都還是 CSS 做的。這個(gè)「著色」動(dòng)畫也是用了之前火焰那個(gè)頁面的小技巧，三個(gè)原圖都是被選中后的橙色，默認(rèn)未選狀態(tài)使飽和度 filter:saturate(0) 和亮度 brightness(0) 設(shè)為零將他們變成黑色，選中后再回復(fù)成 1，這樣就「變成」橙色了
.selectedAni_p6{
animation: selecetedKey_p6 0.2s linear 0s 1 normal both;
}
@keyframes selecetedKey_p6 {
0%{
filter: saturate(0) brightness(0);
}
100%{
filter: saturate(1) brightness(1);
}
}
詳情可以參考風(fēng)吹-選項(xiàng) demo：https://codepen.io/bigxixi/pen/OJpevEL
最后的這個(gè)頁面
我們可以看到背景視頻里有很多泡泡，首先在 C4D 里做一個(gè)簡單的肥皂泡
然后給她加一個(gè) displacer 變形器，用 noise 驅(qū)動(dòng)制作變形動(dòng)畫模擬肥皂泡在空氣中的擠壓變形效果，并導(dǎo)出為一段循環(huán)的序列幀（注意渲染時(shí)間和 noise 中的循環(huán)時(shí)間對(duì)上）
然后在 AE 里導(dǎo)入這個(gè)序列幀， 復(fù)制多個(gè)，改變尺寸大小等讓他們看起來各自稍微不同。這里我各自對(duì)他們的位移加入了隨機(jī)表達(dá)式 wiggle
//循環(huán) wiggle 表達(dá)式 loopTime = 10; //循環(huán)周期 freq = 0.5;//頻率 amp = 25;//振幅 t = time % loopTime; wiggle1 = wiggle(freq, amp, 1, 0.5, t); wiggle2 = wiggle(freq, amp, 1, 0.5, t - loopTime); linear(t, 0, loopTime, wiggle1, wiggle2)
而泡泡的縮放則是先將音頻的振幅轉(zhuǎn)換為關(guān)鍵幀，再用表達(dá)式與縮放關(guān)聯(lián)起來起來，并各自錯(cuò)開一點(diǎn)時(shí)間
vol = thisComp.layer("音頻振幅").effect("兩個(gè)通道")("滑塊").valueAtTime(time-0.05*index)+90;
[vol, vol*0.8]
這樣泡泡們就看起來像是比較自然地被音頻驅(qū)動(dòng)而震動(dòng)了。
而兩個(gè)選項(xiàng)，是先把選項(xiàng)文字圖片導(dǎo)入 AE 用 湍流置換 效果器模擬 C4D 中做泡泡時(shí)的扭曲動(dòng)畫，注意循環(huán)得勾上，后面就直接放上泡泡的序列幀，導(dǎo)出為 apng 動(dòng)圖。
點(diǎn)擊之后的泡泡碎裂，則是如之前的鯨魚那頁，直接切到一個(gè)精靈圖動(dòng)畫播放，因?yàn)槟M的泡泡破碎的效果，是一個(gè)瞬間的事情，所以這里就直接切過去了。
泡泡破碎動(dòng)畫主要是用了 AE 里的 「CC Mr.Mercury」這個(gè)效果器來制作。
詳情參閱泡泡-選項(xiàng) demo：https://codepen.io/bigxixi/pen/eYvwMwy
除了 CSS，有些動(dòng)效還是需要 JS + Canvas 這個(gè)萬能組合，除了一開始介紹的翻頁效果外，有些頁面里也在使用。這是表現(xiàn)力最豐富，相對(duì)來說門檻也比較高的一個(gè)方向，幸好有很多前輩高人做了很多 JS 庫并開源給我們使用。比如鍵盤聲這一頁
這頁主要用了 Matter.js 進(jìn)行物體下落效果的物理模擬，可以看看 Matter.js 官網(wǎng)直接就有類似例子，我們只需要依葫蘆畫瓢替換成對(duì)應(yīng)的視覺資源，控制物體下落的時(shí)機(jī)等參數(shù)就好。
Matter.js Demo · code by @liabru：https://brm.io/matter-js/demo/#sprites
這個(gè)頁面的選項(xiàng)是藏在背景里的，點(diǎn)擊之后實(shí)際上是換了張圖片資源表示「按下」。
詳情可以參考（演示版，選項(xiàng)只有 A 可以點(diǎn)）鍵盤-demo：https://codepen.io/bigxixi/pen/dyvBeoL
云彩這一頁主要是前端同學(xué)在實(shí)現(xiàn)效果，具體細(xì)節(jié)講解我就不越俎代庖了，有機(jī)會(huì)可以把話筒遞給前端小哥哥哈
最后說下結(jié)果頁，結(jié)果頁會(huì)根據(jù)我們的選擇，生成不同的關(guān)鍵詞、文案及背景色動(dòng)畫
這里的背景色動(dòng)畫使用的是 GLSL Shader 動(dòng)畫，基本原理是根據(jù)用戶的選擇結(jié)果，生成一張漸變貼圖（視覺同學(xué)繪制了很多漸變圖，覆蓋了每個(gè)關(guān)鍵詞），貼圖再經(jīng)過 fragment shader 中的 noise 通過不同參數(shù)扭曲得到動(dòng)畫，這部分參考了 MartinRGB 大神的案例，詳細(xì)原理可以參考他在 Droidcon 2019 上海站的分享：?https://github.com/MartinRGB/Droidcon_Shanghai_Keynote/releases/tag/0.4
這里因?yàn)椴煌P(guān)鍵詞也會(huì)對(duì)應(yīng)不同的音樂，最初我們也是希望背景漸變動(dòng)畫能和音頻有關(guān)聯(lián)，實(shí)際上我也寫了一些 demo：http://bethe.top/163/color-quitz-simplified/end.html
但由于一些兼容性問題，研發(fā)沒有足夠的時(shí)間來處理，而沒有和音頻關(guān)聯(lián)的效果也可以接受（結(jié)果頁最重要的還是關(guān)鍵詞和對(duì)應(yīng)的文案），最后沒有用上。
好了，這個(gè)項(xiàng)目的動(dòng)效部分大概就和大家分享這些，大家如果對(duì)最后的結(jié)果是如何生成的感興趣，可以看下這篇文章：https://zhuanlan.zhihu.com/p/376712328
作為一個(gè)的動(dòng)效設(shè)計(jì)師，我們除了設(shè)計(jì)動(dòng)態(tài)效果，如何幫助研發(fā)將動(dòng)效在產(chǎn)品中落地實(shí)現(xiàn)也是非常重要的一個(gè)工作內(nèi)容，不然再好的設(shè)計(jì)最后只能淪為自嗨的空中樓閣，豈不可惜。
有的設(shè)計(jì)師可能想，這不應(yīng)該是研發(fā)的指責(zé)嗎？其實(shí)對(duì)于設(shè)計(jì)師，多了解一些動(dòng)效實(shí)現(xiàn)原理也是有好處的。
一方面在設(shè)計(jì)動(dòng)效方案時(shí)可以對(duì)實(shí)現(xiàn)難度有個(gè)預(yù)估，面對(duì)無法實(shí)現(xiàn)的可能性要有「優(yōu)雅降級(jí)」的能力，不然不斷返工折磨的也是自己；另一方面可以從更多維度作為設(shè)計(jì)出發(fā)點(diǎn)，有的效果設(shè)計(jì)師想破腦袋想不出來如何表達(dá)，研發(fā)那邊可能就一行代碼的事兒…
這是個(gè)不斷妥協(xié)，也在不斷突破自我的過程，在這個(gè)過程中我們可能更迷茫，但一撥開云霧，對(duì)設(shè)計(jì)對(duì)動(dòng)效的認(rèn)知也更清晰。
這個(gè)專題我也將分享這幾年的項(xiàng)目里的一些落地經(jīng)驗(yàn)，主要是 H5 項(xiàng)目，可能涉及到一些 web 前端的代碼知識(shí)，由于我不是專業(yè)的程序員，有寫的不對(duì)的地方，懇請(qǐng)大家不吝斧正，謝謝！
復(fù)制本文鏈接 文章為作者獨(dú)立觀點(diǎn)不代表優(yōu)設(shè)網(wǎng)立場(chǎng)，未經(jīng)允許不得轉(zhuǎn)載。
繼續(xù)閱讀本文相關(guān)話題
熱評(píng) 王亞洲