首頁 > 網頁教程 > 設計分享 > 動效設計:4 個常見且常用的 SVG 交互動畫方法分享

動效設計:4 個常見且常用的 SVG 交互動畫方法分享

時間:2019-10-18    來源:蛋卷直播實驗室

本文介紹了 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’);

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

相關推薦
網頁交互設計的一些理解
深挖交互設計的細節提升用戶滿意度
8個原則打造優秀的用戶體驗
交互設計中6個通用原則的介紹
如何杜絕網頁設計中視噪對用戶的影響
電子商務網站如何設計高效易用的網站左側導航樹
網頁視覺設計如何針對用戶有效表達信息
交互設計之淺談下意識設計
前瞻:2012年Web設計和開發的15個最新趨勢
用戶體驗評估之用戶心理負荷的測量
百度統計流量研究院設計過程及思路詳解
給不完整視覺信息尋找最簡單直接的解讀辦法
移動應用開發:無線終端用戶理解工作方法分享
分享:體驗設計師需要學習的一些前端技術
分享:5招助你打造更加簡潔的用戶界面
淺談界面UI設計中的包容性設計
仿生設計—讓互聯網產品更易用
淺談交互設計中的默認值對用戶的影響
深入分析網頁柵格系統的規范制作
深入談交互設計之人人都懂交互設計
移動應用設計的橫豎屏切換中的界面設計與體驗提升
交互設計:移動應用與PC應用的交互差異淺析
交互設計師應該如何設計直觀且有說服力的作品集
移動設備動畫設計的12個原則分享
分析用戶界面中扁平化設計的優缺點
分享淘寶購便利交互設計心得
富有靈感和創意的web布局及交互設計賞析
符合用戶操作習慣的網站界面設計分享
18個超棒的響應式Web設計前端開發教程
在視覺設計中對像素的深度解析
網頁設計中創新式布局與交互設計思考
換湯不換藥?看應用們如何“為iOS 7設計”
產品設計:萬水千山總是情 不要圖片行不行
APP瀏覽體驗設計的思考:如何理解用戶的眼?
網頁設計怎么破?創新式布局與交互的設計
四大網頁設計秘訣:讓用戶第一眼就愛上你的網站

精彩推薦

熱門教程

重庆时时开奖直播app 哪些平台知识赚钱 4399游戏盒子赚钱 参与调查能赚钱 金多利彩票安卓 排五玩法奖金规则 游龙传说可以赚钱吗 沉迷赚钱的卡通图片 重庆快乐10分开奖 分分彩票平台哪个好 菲律宾杰克棋牌手机版 蜀门还赚钱吗 军盾锅盔赚钱吗 吉林11选5开奖结果查 街机千炮捕鱼全部 时时彩后二取胆方法 吉祥棋牌吉祥棋牌下载