527
阿裏巴巴前端專家渚薰：H5互動的正確打開方式
摘要
現在越來越多的產品或營銷頁麵，以H5互動（動畫、3D）的方式呈現給觀眾。互動場景的設計、還原、開發、優化，對於前端開發者來說變成了整個業務開發過程中最重的負擔。 手淘互動團隊用一套流程工具以及一係列技術方案，解決的開發過程中痛點，提高整個周期的效率。本次分享，從前端架構和工程說起，以手淘互動開發為案例，為前端開發者打開互動製作的一扇門。
交互是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進行轉換之後，能夠讓我們在動畫的開發過程當中能夠參與進去，真正做到想要的東西。
Web3DWeb3D對於前端來說其實是跨界，實質上是GPU編程。
互動其實也是前端的一個分支，但它和傳統的前端開發不一樣。它需要有另外一種思維或知識積累。
所以我希望大家能夠在感興趣的前提下去深入探索這方麵的東西，然後呈現給大家更多更炫酷的內容。
我的演講到此結束，謝謝大家！
相關推薦
推薦文章
近期活動
嘉賓分享視頻地址：https://www.itdks.com/dakashuo/detail/526
最後更新：2017-06-27 12:31:50