讓動效更酷炫！4 個常見且常用的 SVG 交互動畫方法

本文介紹了 4 種常見的 SVG 交互動畫方法，幫你了解 SVG 交互動畫的原理和簡單方法。

優秀的人機交互和舒適合理的動畫，一直是 UX 設計師孜孜不倦追求的目標。但 UX 設計師每天都遇到能做出效果，和程序交接、方案落地時卻困難重重的情況。要么是程序覺得這么多動畫會很卡，要么認為 UX 給的方案花里胡哨根本做不出來。每當在 Behance 或者 Dribbble 上看到優秀的交互設計稿，網友都會戲稱程序員說：「來來來，鍵盤給你好吧，你來寫。」從這些戲言中也不難看出 UX 和程序落地其實沒有很好的技術溝通橋梁。

目前，SVG 的動畫方案已可以解決一部分 UX 設計師和程序交接落地問題，但是這些動畫出現場景往往是圖標、引導頁等，到核心的程序交互還是靠程序員去寫交互邏輯動畫。其中原因就是可交互的 SVG 動畫方案尚不普及，國內外都沒有很好的公開資料。所以這次就來和大家分享一下，我已經掌握的可交互 SVG 動畫的可行方案。

由于 lottie 的方案相比于 SVG 有更好的自由度，在交互層面是完勝的。所以本次我將以 lottie 作為方案背景，來分享可交互 SVG 動畫的原理和案例。由于我們團隊目前主要是幫主播定制直播禮物特效和直播 UI，所以我希望在能減少設計工作量的同時，為禮物動效增加可交互性，從而讓禮物特效變得更多變，更加有意思。下面我們進入正題，首先來了解下，什么是可交互的 SVG 動畫？

什么是可交互的SVG動畫？

之前的案例我們做的都是固定不變的動畫，假如我希望動畫內容是個性化的信息填充，這樣我們就需要讓 SVG 動畫變成框架動畫，動畫的內容由后臺給出再填充動畫，最后呈現給使用者。最簡單的例子就是產品的輪播圖。再假如，我希望動畫的播放進程是根據頁面滾動來觸發播放，同時動畫會和頁面的高度百分比同步進度。那這些想法的落地就需要為 SVG 動畫插上交互的翅膀，讓它能夠提高用戶體驗。

我們先來看 3 個由 lottie-web 的開發者 hernan，制作的一些可交互 SVG 動畫 demo，看完你就大致能了解到它的強大之處 。

△ Codepen：https://codepen.io/airnan/pen/gvBMPV

變色龍會根據鼠標指向的葉片顏色來改變身體的顏色，當鼠標移動到葉片中間時，鼠標指針會被吃掉。

△ Codepen：https://codepen.io/airnan/pen/bmvegP

機器人會根據控制面板的一些屬性，來變換走路或者跑步的姿態，其中動畫的 rigging 使用的是 Duik。

△ Codepen：https://codepen.io/airnan/pen/rvQrKL

動畫會根據輸入的內容和鼠標點擊來完成分階段的動畫。

由于這三個例子的交互方法算是比較復雜，其中涉及到了多種交互方法的交叉應用，所以我認為并不適合用這三個例子做初步技術分享。第一篇我會以更加淺顯的案例，來分享這些交互動畫制作技術。

訪問并修改動畫的可行方案

在使用 AE 制作完動畫，并使用 Bodymovin 導出動畫后，我們會獲得一個 data.json 文件。這個文件包含了 AE 中關于動畫的所有屬性和對應的值，當前端加載動畫時，就會讀取 json 文件中的數據并實時計算重繪制動畫。

根據這個流程，如果我想要臨時更改動畫的某一個屬性，那么可操作的方案大致有三種：

• 第一種是直接訪問請求到的 json 文件中的鍵并修改它的值，修改完再渲染播放動畫。
• 第二種是使用 lottie_api.js（https://github.com/bodymovin/lottie-api）來訪問修改 json 文件中的內容，修改完后再重新渲染動畫。
• 第三種是直接通過 JS 去更改網頁中 DOM 元素的內容。

第一個方案可以對動畫的所有的值進行修改，可調整的自由度非常大，但是缺點也很明顯，那就是前端程序必須十分熟悉導出的 json文件的數據結構，同時這樣的交互方案很難快速地抽象成通用的方法，從而導致幾乎每個動畫都要寫不同的 JS 來達到動畫交互的目的。

第二個方案其實就是 lottie 的開發者基于第一個方案寫的一個現成的 JS 庫，使用難度和學習成本較低。程序只需要使用這些 API 的方法，就能寫出符合大多數業務交互的方法函數。相較之前第二個方案的缺點也很明顯，那就是目前 API 的公開方法并不是很多，且只適用于 web 端，安卓和蘋果等并不能直接使用這個 JS 庫（據我所知）。另外有一些較為復雜的交互還是需要與第一種方案結合來完成。

第三個方案簡單快捷但是只能完成極少部分的交互效果，比較常用的案例是替換動畫中的圖片素材，具體的方法下文會再介紹。

在 Lottie_api 的 github 網站上，有開發者寫的簡單案例代碼和方法，所以這里就不純搬運展開了。通過 Lottie_api 去修改動畫文件的某一屬性時，需要向它傳遞這個屬性在動畫中的絕對位置。例如想要修改合成3中形狀2的填充顏色，那么我們就需要將（‘Comp 3,shape 2,Contents, Rectangle 1 ,Fill 1,Color’）這個作為參數傳遞到函數中，以讓函數去定位動畫文件中這個屬性。由此設計師在將動畫文件交付給程序時，就需要將合成的層級邏輯圖或者直接將這個參數寫出來一起交付。但絕大部分有使用到 SVG 動畫的商用項目中，包含的動畫肯定不止一兩個，為了減輕前端開發的交互工作量，建議在制作動畫時對于要修改的相同類別予以相同的名稱，這樣普遍的交互方法就可以再抽象為一個函數。比如需要修改的文字內容的圖層名稱命名為「.FeedbackMark」，在圖層名字前加「.」會讓動畫在網頁加載時生成一個標簽[class=“FeedbackMark”]，前端就能通過這個屬性來篩選并修改內容。另外，圖層名稱前加「#」會讓動畫在生成時添加一個[id=“FeedbackMark”]，但 id 在網頁端是唯一的，多個動畫都用相同的 id 會導致網頁報錯，無法正常加載動畫。

綜上，作為 UX 設計師在制作交互動畫時，首要任務就是正確的統一命名圖層，這會給后續的程序交互奠定一個良好的基石。下面來看看實際的例子。

實操案例

1. 修改動畫中的圖片素材

由于 Lottie_api 中并沒有替換圖片素材的方法，所以這里使用的是直接修改渲染完的動畫中的 URL。當 SVG 動畫中有位圖元素時，導出動畫后會在 data.json 的同級目錄下生成一個 images 文件夾，里面就放置了使用的位圖。比如這里我就將需要交互的圖片名字命名為 sample.jpg，放入動畫中后，將圖層的名字重命名為「.GiverMark」。當我需要更改這個動畫中圖片的信息時，我只需要通過 JS 去找到Class=“GiverMark”，然后修改圖片的 URL 就行了。默認情況下，被更新的圖片會自動填充滿這個容器的寬高。 參考代碼如下：

   $(‘.GiverMark image’).attr(‘href’,’www.test.com/test.jpg’);

在設計動畫時，需要做的就是使用同一張圖來作為動畫中的一個圖片占位符，合理規范圖片層的命名即可。

2. 修改文字內容

修改動畫中的文字內容的方法，在不同的情況下需要選擇不同的交互方法。首先當修改的文字層沒有添加文字 Animate，或者動畫中其他部分與之沒有任何關聯時，修改的方法同圖片修改 URL，我們只需要給文字圖層一個規范的命名即可。這樣前端程序就能通過 JS 去更改文字層的內容，參考代碼如下：

 $(‘.FeedBackMark text tspan').html(‘蛋卷直播實驗室測試文字’);

當動畫中對文字添加了 mask 動畫，或者其他元素于文字層的屬性做了表達式的關聯，那么就需要使用到 lottie_api 來完成修改，以讓動畫正常的工作。例如：文字跟隨著 mask 路徑做上下起伏的運動，這個動畫實際在網頁中是將每個字符獨立開渲染，所以簡單的 JS 就不能做到更改內容，同時讓新的文字動畫正常工作。原因就在于前面的方法只修改網頁中已加載的內容，而使用 lottie_api 則是修改動畫內容并重新計算渲染。參考代碼如下：

var animapi=lottie_api.createAnimationApi(anim);//anim為默認動畫的程序名字
var animkp=animapi.getKeyPath(‘.FeedBackMark’’);
animkp.getElements()[0].setText(‘這是新的文字內容’,0);

3. 修改圖層的任一屬性

因為 json 文件中保存了所有 AE 中圖層的屬性和值，所以我們同樣可以使用 getKeyPath 方法來定向修改圖層中的某一屬性，例如可以改變位置，更改縮放大小，更改填充顏色等等。這里還是以上面的更改文字動畫為例，這次我們來更改動畫的位置，參考代碼如下：

var  animapi=lottie_api.createAnimationApi(anim);//anim為默認動畫的程序名字     
var  animkp=animapi.getKeyPath('.FeedBackMark,Transform,Position');
animapi.addValueCallback(animkp,[0,0]);

這里要注意的是 AE 中的動畫屬性的值大多是以數組來保存的，所以我們傳遞參數的時候要根據該屬性的值的類型，來傳遞修改后的值。另外，修改顏色時我們傳遞的顏色色值必須是 rgba 格式，且需要對顏色進行換算，例如 #333333 的 RGB 值為（50,50,50），那么傳遞參數時 rgba（50/255,50/255,50/255,255/255）。

4. 修改動畫配色

雖然我們可以通過 lottie_api 來逐一修改圖層的顏色，但是當我想要更改整個動畫的配色時，顯然這樣的方法不合理。更科學的方法是在合成中添一個 null 圖層，然后為其添加 color control 效果，再把動畫的圖層中的顏色，通過拉索工具連接到這個 null 顏色控制中。這樣前端只需要通過一行代碼就可以訪問，并改變 color ctrl 圖層中的顏色，重渲染時與之有關的動畫中的配色即會全部改變。參考代碼如下：

var  animapi=lottie_api.createAnimationApi(anim);//anim為默認動畫的程序名字
var animkp=animapi.getKeyPath('color ctrl,Effects,C1,0');
animapi.addValueCallback(animkp, function(){  return [0.1,0.2,0.3,1]});

當我們需要更改 Effects 中的值時，最后的一個參數值是屬性的索引值。這與直接訪問屬性有點不同。

總結一下，作為 UX 設計師在制作交互動畫時，需要做的事就是根據團隊的命名規則，去規范命名需要交互修改的圖層名。其次就是在與程序交接時，提供給他對應動畫的交互屬性絕對位置信息，同時，我們可以將可變信息的交互邏輯通過表達式寫在動畫中。這樣前端程序只需要對接動畫即可，最終做到動畫和交互邏輯的完美落地。

附源文件下載：https://pan.baidu.com/s/13bU7CelVG7_bkrsuAjBmZA