編輯 | IT大咖說
摘要
現在越來越多的產品或營銷頁面，以H5互動（動畫、3D）的方式呈現給觀眾。互動場景的設計、還原、開發、優化，對於前端開發者來說變成了整個業務開發過程中最重的負擔。 手淘互動團隊用一套流程工具以及一系列技術方案，解決的開發過程中痛點，提高整個週期的效率。本次分享，從前端架構和工程說起，以手淘互動開發為案例，為前端開發者開啟互動製作的一扇門。
嘉賓分享視訊地址：t.cn/RopquND
互動是HTML技術發展過程中的一個里程碑。很早以前，一個頁面就是一大段文字，之後出現了按鈕，出現了表單，才有了一定的互動。
互動不只是點選，互動的概念可以涉獵的很廣。
對於使用者來說，獲取資訊的方式有兩種。第一種是通過被動的去獲取頁面中資訊，第二種是它主動去尋求反饋。
使用者通過這兩個途徑去獲得想要的東西，對於互動來說，也需要在這兩點上通過自己的創意和技術去表達給使用者。
“動畫，是展現頁面的靈魂”
假如把頁面比喻成一個機器人，互動就是賦予了我們一個能對機器人進行操縱的連線。動畫能夠幫助一個“機器人”活起來。對於動畫來說，它其實是動效和時間的一個完美的結合。
動效可以抽象地理解為起始值到終止值之間一個變化的過程。
如果是具體的元素，可以把這個變化的過程做一些對映；對於類似three.js這樣的框架，它的物件本身有一些屬性，這些屬性也能夠認為它是一個0-1的動效變化過程。
概括來講，它們都是一次差值演算法。這就是動效的定義。
把動效串起來就是動畫。動效負責自己的元素，讓它能夠運動；而動畫則負責把這些動效管理起來。
“除了橋樑和靈魂，還有？”
互動是橋樑，動畫是靈魂。除此之外，更重要的是我們需要在H5的互動頁面裡把它表達出來。
對互動頁面進行一輪機型適配。
效能在動畫、互動頁面裡，可以直接把它對映為幀。我們需要做的就是JankFree，這樣動畫、互動、互動才能完美地呈現給使用者。
Jank Free則需要從CPU和GPU兩方面來做。
降級可分為內容降級和版本降級。
內容降級比較容易理解，就是能夠保證主要內容，把次要內容去掉或降級。這樣能讓更多使用者看到頁面的內容。
版本降級主要是用在3D和2D版本上。
我們會native的頁面上去做一個H5的view，然後把它透明，同時也可以獲得native裡每個元素的位置，並在H5裡面替換成H5的動畫元素，讓使用者感受到動畫和首頁緊密結合在一起。
Airbnb已經有了一個lottie。我們通過JSON和DSL間的一次轉換對賦予它二次開發能力，可以對JSON進行動畫微調，也可以把很多動畫片段、JSON資料組合起來運用到業務中去，附加業務屬性。
因為DSL比較接近前端的開發思路，我們藉助DSL的設計思想和JSON進行轉換之後，能夠讓我們在動畫的開發過程當中能夠參與進去，真正做到想要的東西。
Web3D對於前端來說其實是跨界，實質上是GPU程式設計。
互動其實也是前端的一個分支，但它和傳統的前端開發不一樣。它需要有另外一種思維或知識積累。
所以我希望大家能夠在感興趣的前提下去深入探索這方面的東西，然後呈現給大家更多更炫酷的內容。
我的演講到此結束，謝謝大家！
原文地址：t.cn/RoiRXZG