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

NO IMAGE

轉載自:《利用過渡動效打造沉浸式的體驗》 – 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的形狀變形動畫、視頻等進行頁面過渡,具體使用什麼方案還是要取決於產品的形態和需求。

相關文章

我的前端知識梳理VUE篇

基礎知識梳理~ES6解構賦值

Vue.js命名風格指南

Java基礎(四):java反射機制