前端利用過渡動效打造沉浸式的體驗

轉載自：《 利用過渡動效打造沉浸式的體驗》 - P&Pdesign  騰訊PPdesign
把網頁作出「端遊體驗」，光看着就以爲爽

【前言】在Web頁面中，流暢的過渡動效能夠增長用戶體驗的溫馨度，讓用戶認知過程更爲天然，同時恰當的動效也可以引導用戶關注重要的信息。在WeGame大屏模式需求場景中，筆者利用這個契機，在開發前期與視覺及動畫設計同窗溝通，設定好產品過渡動效及實現方式，給用戶在體驗中營造「沉浸式」氛圍。

一．設計過渡動效的建議

想要設計好的頁面過渡效果，能夠考慮從這幾方面着手：

● 動效的總體性及連貫性

設計過渡動效前須要先總體性的考慮頁面框架及交互元素切換時的效果，如同級頁面，子級頁面、彈窗反饋，菜單的呼出效果。

● 動效的時間及緩動曲線

動效的時間：Google的Material Design中提到，如動畫區域越大，相應的動畫響應速度應該更快，因爲筆者的需求場景爲PC設備界面，所以將動畫時長控制在0.3S左右。

動效曲線：天然緩動曲線會影響元素的速度同時可讓你的動畫感受更平滑。能夠藉助cubic-bezier動畫工具設定你以爲合適的動畫曲線。

二．過渡動效剖析

效果實現上，咱們分爲 框架過渡效果及 元素關聯效果：

●框架過渡效果

咱們經常使用的框架動畫效果有這麼幾種：漸變、滑動、翻轉、縮放、覆蓋等效果。

以上的效果能夠單獨呈現，也可使用多種效果組合來呈現更爲有趣的過渡效果。

咱們能夠在Web頁面開發中快速使用 CSS3 Transition、Animation樣式屬性便可實現效果。而且咱們能夠定義可複用的Transition樣式及Animaton樣式文件，提供給其餘項目Web頁面使用。

●元素關聯效果

元素關聯的過渡效果就像Keynote中的神奇移動效果，元素始終貫穿於頁面先後的切換，能讓用戶能感知到元素內容的層級關係。元素關聯效果沒法複用於其餘項目，須要根據視覺設計場景進行考慮。

三．實現方案

在Web端如須要落地到業務項目中如何實現而且須要考慮什麼呢？Web端的頁面與原生桌面程序相比，頁面打開時，網絡請求，資源下載，頁面元素渲染過程都是瀏覽器必須要通過的步驟。所以Web頁面上實現需保證：

●原生Web應用實現

業界有像 ANIMSITION.JS 的工具庫能夠實如今點擊觸發跳轉時先執行動畫，同時監聽動畫播放結束後再進行跳轉行爲，但由於頁面最終仍是發生了跳轉，所以頁面還會產生閃動的感受。

●Vue 路由實現

Vue框架提供了在路由切換時可使用標籤添加路由頁面的過渡效果。在開發前期能夠規劃好路由的結構範圍，並定義切換的頁面效果便可。

VUE實現的效果

四．體驗優化

炫酷的過渡動畫和特效帶來更好用戶體驗的同時，也帶來了高負荷的資源佔用，若是不能採起有效手段，不只達不到預期的效果，反而會影響用戶的體驗。

咱們能夠從如下兩方面來優化動畫的體驗效果：

1、提高頁面加載響應速度

頁面進入後需加載數據，當數據加載較慢時，會打斷過渡動效的平滑切換感，好比說頁面加載本地數據及網絡數據，就有很是顯明的差別感對比；

那假如頁面中須要加載網絡數據，咱們能夠採起什麼方式來優化或改善頁面過渡動效呢？

能夠從如下3個方向來解決：

①減小網絡加載數據時長，如頁面直出、懶加載、本地緩存策略等技術方案進行嘗試；

②使用骨架屏代替內容進行過渡，在骨架屏過渡完成後在切換成真實的頁面；

③儘量使用路由切換代替頁面跳轉，減小頁面刷新；

在WeGame的大屏模式需求下，因爲Web應用程序打包至本地，所以，咱們能夠在頁面打開時省去了數據加載的時長；因爲使用VUE技術棧進行開發，所以咱們能夠減小頁面全局刷新，使用路由進行切換；通過實踐咱們發現VUE路由的過渡效果能大大知足頁面的過渡切換效果；

2、優雅降級

影響Web動效性能的緣由有兩個： 瀏覽器環境和運行設備；

●瀏覽器環境

動效的呈現效果依賴用戶的瀏覽器內核，瀏覽器內核越先進，能夠實現的動效效果就越多越好。

●運行設備

動效在運行時會佔用不少的系統資源（CPU、GPU、內存等），當資源佔用超過必定的閾值時，會出現卡頓、掉幀的現象，頁面運行的設備配置越高，所受到的影響越小。

所以，當你考慮爲你的產品添加過渡效果時，須要使用針對不一樣的設備和環境使用不一樣的動畫解決方案，在高配的設備和環境中使用全動畫，中配的設備和環境中使用部分重要動畫，在低配的設備和環境中不使用動畫，這也就是優雅降級方案。

●對於瀏覽器環境

咱們能夠經過JS獲取到瀏覽器內核的Navigator 信息，經過對不一樣的瀏覽器和版本，進行對應的動畫處理；

●對於運行設備

在兼容實驗室中對不一樣的設備下進行動效效果測試，對測試結果進行分類總結，找到高、中、低的設備的最優動效效果，而後獲取到用戶的設備信息進行對比，根據對比結果來決定使用什麼等級的動效。

①運行在瀏覽器中：IE內核瀏覽器能夠經過ActiveXObject插件來獲取，可是對其餘的瀏覽器就無能爲力了，只能經過統一處理的方式來權衡動畫了。

②運行在其餘客戶端中：能夠經過客戶端獲取設備信息，經過接口將信息傳遞給Web。

在WeGame大屏模式中，模糊背景的實現效果及背景動畫均佔用了較高的CPU。通過測試，咱們與原生客戶端同窗溝通，返回用戶設備硬件等級接口，爭對硬件設備性能較低的用戶屏蔽動畫以保證UI的流暢性。

五．結語

其實過渡動效不止於滑動、縮放、位移等效果的應用，也能夠結合SVG的形狀變形動畫、視頻等進行頁面過渡，具體使用什麼方案仍是要取決於產品的形態和需求。