阿里巴巴前端專家：H5互動的正確打開方式

編輯 | IT大咖說

閱讀字數: 1539 用時: 6分鐘

摘要

如今愈來愈多的產品或營銷頁面，以H5互動（動畫、3D）的方式呈現給觀衆。互動場景的設計、還原、開發、優化，對於前端開發者來講變成了整個業務開發過程當中最重的負擔。 手淘互動團隊用一套流程工具以及一系列技術方案，解決的開發過程當中痛點，提升整個週期的效率。本次分享，從前端架構和工程提及，以手淘互動開發爲案例，爲前端開發者打開互動製做的一扇門。

嘉賓分享視頻地址：t.cn/RopquND

「交互，是連接用戶的橋樑」

交互是HTML技術發展過程當中的一個里程碑。很早之前，一個頁面就是一大段文本，以後出現了按鈕，出現了表單，纔有了必定的交互。

交互不僅是點擊，交互的概念能夠涉獵的很廣。

對於用戶來講，獲取信息的方式有兩種。第一種是經過被動的去獲取頁面中信息，第二種是它主動去尋求反饋。

用戶經過這兩個途徑去得到想要的東西，對於互動來講，也須要在這兩點上經過本身的創意和技術去表達給用戶。

「動畫，是展示頁面的靈魂」

假如把頁面比喻成一個機器人，交互就是賦予了咱們一個能對機器人進行操縱的鏈接。動畫可以幫助一個「機器人」活起來。對於動畫來講，它實際上是動效和時間的一個完美的結合。

動效能夠抽象地理解爲起始值到終止值之間一個變化的過程。

若是是具體的元素，能夠把這個變化的過程作一些映射；對於相似three.js這樣的框架，它的對象自己有一些屬性，這些屬性也可以認爲它是一個0-1的動效變化過程。

歸納來說，它們都是一次差值算法。這就是動效的定義。

把動效串起來就是動畫。動效負責本身的元素，讓它可以運動；而動畫則負責把這些動效管理起來。

「除了橋樑和靈魂，還有？」

交互是橋樑，動畫是靈魂。除此以外，更重要的是咱們須要在H5的互動頁面裏把它表達出來。

兼容性

對互動頁面進行一輪機型適配。

性能優化

性能在動畫、互動頁面裏，能夠直接把它映射爲幀。咱們須要作的就是JankFree，這樣動畫、交互、互動才能完美地呈現給用戶。

Jank Free則須要從CPU和GPU兩方面來作。

降級

降級可分爲內容降級和版本降級。

內容降級比較容易理解，就是可以保證主要內容，把次要內容去掉或降級。這樣能讓更多用戶看到頁面的內容。

版本降級主要是用在3D和2D版本上。

同native的親密接觸

咱們會native的頁面上去作一個H5的view，而後把它透明，同時也能夠得到native裏每一個元素的位置，並在H5裏面替換成H5的動畫元素，讓用戶感覺到動畫和首頁緊密結合在一塊兒。

解放生產力的工具

Airbnb已經有了一個lottie。咱們經過JSON和DSL間的一次轉換對賦予它二次開發能力，能夠對JSON進行動畫微調，也能夠把不少動畫片斷、JSON數據組合起來運用到業務中去，附加業務屬性。

由於DSL比較接近前端的開發思路，咱們藉助DSL的設計思想和JSON進行轉換以後，可以讓咱們在動畫的開發過程中可以參與進去，真正作到想要的東西。

Web3D

Web3D對於前端來講實際上是跨界，實質上是GPU編程。

互動是前端界的又一股泥石流

互動其實也是前端的一個分支，但它和傳統的前端開發不同。它須要有另一種思惟或知識積累。

因此我但願你們可以在感興趣的前提下去深刻探索這方面的東西，而後呈現給你們更多更炫酷的內容。

個人演講到此結束，謝謝你們！

推薦文章

• 乾貨 | 豆子科技首席架構師鐘聲：Java的純真年代
  

• 開源中國社區創始人紅薯：J2Cache開源中國兩級緩存實踐
  

  
  

近期活動

• 直播 | 6月28日中國開源產業峯會

原文地址：t.cn/RoiRXZG