摘要：本文內(nèi)容是阿里巴巴前端專家 渚薰 在 FDCon2017前端開發(fā)者大會(huì) 上的主題分享，IT大咖說(shuō)為獨(dú)家視頻合作方。
編輯IT大咖說(shuō)閱讀字?jǐn)?shù): 1539用時(shí): 6分鐘
摘要
現(xiàn)在越來(lái)越多的產(chǎn)品或營(yíng)銷頁(yè)面翎碑，以H5互動(dòng)（動(dòng)畫、3D）的方式呈現(xiàn)給觀眾￠晃停互動(dòng)場(chǎng)景的設(shè)計(jì)、還原巫击、開發(fā)禀晓、優(yōu)化，對(duì)于前端開發(fā)者來(lái)說(shuō)變成了整個(gè)業(yè)務(wù)開發(fā)過(guò)程中最重的負(fù)擔(dān)坝锰。 手淘互動(dòng)團(tuán)隊(duì)用一套流程工具以及一系列技術(shù)方案粹懒，解決的開發(fā)過(guò)程中痛點(diǎn)，提高整個(gè)周期的效率顷级。本次分享凫乖，從前端架構(gòu)和工程說(shuō)起，以手淘互動(dòng)開發(fā)為案例弓颈，為前端開發(fā)者打開互動(dòng)制作的一扇門拣凹。
“交互，是鏈接用戶的橋梁”
交互是HTML技術(shù)發(fā)展過(guò)程中的一個(gè)里程碑恨豁。很早以前嚣镜，一個(gè)頁(yè)面就是一大段文本，之后出現(xiàn)了按鈕橘蜜，出現(xiàn)了表單菊匿，才有了一定的交互。
交互不只是點(diǎn)擊计福，交互的概念可以涉獵的很廣跌捆。
對(duì)于用戶來(lái)說(shuō)，獲取信息的方式有兩種象颖。第一種是通過(guò)被動(dòng)的去獲取頁(yè)面中信息佩厚，第二種是它主動(dòng)去尋求反饋。
用戶通過(guò)這兩個(gè)途徑去獲得想要的東西说订，對(duì)于互動(dòng)來(lái)說(shuō)抄瓦，也需要在這兩點(diǎn)上通過(guò)自己的創(chuàng)意和技術(shù)去表達(dá)給用戶潮瓶。
“動(dòng)畫，是展現(xiàn)頁(yè)面的靈魂”
假如把頁(yè)面比喻成一個(gè)機(jī)器人钙姊，交互就是賦予了我們一個(gè)能對(duì)機(jī)器人進(jìn)行操縱的連接毯辅。動(dòng)畫能夠幫助一個(gè)“機(jī)器人”活起來(lái)。對(duì)于動(dòng)畫來(lái)說(shuō)煞额，它其實(shí)是動(dòng)效和時(shí)間的一個(gè)完美的結(jié)合思恐。
動(dòng)效可以抽象地理解為起始值到終止值之間一個(gè)變化的過(guò)程。
如果是具體的元素膊毁，可以把這個(gè)變化的過(guò)程做一些映射胀莹；對(duì)于類似three.js這樣的框架，它的對(duì)象本身有一些屬性婚温，這些屬性也能夠認(rèn)為它是一個(gè)0-1的動(dòng)效變化過(guò)程嗜逻。
概括來(lái)講，它們都是一次差值算法缭召。這就是動(dòng)效的定義栈顷。
把動(dòng)效串起來(lái)就是動(dòng)畫。動(dòng)效負(fù)責(zé)自己的元素嵌巷，讓它能夠運(yùn)動(dòng)萄凤；而動(dòng)畫則負(fù)責(zé)把這些動(dòng)效管理起來(lái)。
“除了橋梁和靈魂搪哪，還有靡努？”
交互是橋梁，動(dòng)畫是靈魂晓折。除此之外惑朦，更重要的是我們需要在H5的互動(dòng)頁(yè)面里把它表達(dá)出來(lái)。
兼容性
對(duì)互動(dòng)頁(yè)面進(jìn)行一輪機(jī)型適配漓概。
性能優(yōu)化
性能在動(dòng)畫漾月、互動(dòng)頁(yè)面里，可以直接把它映射為幀胃珍。我們需要做的就是JankFree梁肿，這樣動(dòng)畫、交互觅彰、互動(dòng)才能完美地呈現(xiàn)給用戶吩蔑。
Jank Free則需要從CPU和GPU兩方面來(lái)做。
降級(jí)
降級(jí)可分為內(nèi)容降級(jí)和版本降級(jí)填抬。
內(nèi)容降級(jí)比較容易理解烛芬，就是能夠保證主要內(nèi)容，把次要內(nèi)容去掉或降級(jí)。這樣能讓更多用戶看到頁(yè)面的內(nèi)容赘娄。
版本降級(jí)主要是用在3D和2D版本上仆潮。
同native的親密接觸
我們會(huì)native的頁(yè)面上去做一個(gè)H5的view，然后把它透明擅憔，同時(shí)也可以獲得native里每個(gè)元素的位置鸵闪，并在H5里面替換成H5的動(dòng)畫元素檐晕，讓用戶感受到動(dòng)畫和首頁(yè)緊密結(jié)合在一起暑诸。
解放生產(chǎn)力的工具
Airbnb已經(jīng)有了一個(gè)lottie。我們通過(guò)JSON和DSL間的一次轉(zhuǎn)換對(duì)賦予它二次開發(fā)能力辟灰，可以對(duì)JSON進(jìn)行動(dòng)畫微調(diào)个榕，也可以把很多動(dòng)畫片段、JSON數(shù)據(jù)組合起來(lái)運(yùn)用到業(yè)務(wù)中去芥喇，附加業(yè)務(wù)屬性西采。
因?yàn)镈SL比較接近前端的開發(fā)思路，我們借助DSL的設(shè)計(jì)思想和JSON進(jìn)行轉(zhuǎn)換之后继控，能夠讓我們?cè)趧?dòng)畫的開發(fā)過(guò)程當(dāng)中能夠參與進(jìn)去械馆，真正做到想要的東西。
Web3D
Web3D對(duì)于前端來(lái)說(shuō)其實(shí)是跨界武通，實(shí)質(zhì)上是GPU編程霹崎。
互動(dòng)是前端界的又一股泥石流
互動(dòng)其實(shí)也是前端的一個(gè)分支，但它和傳統(tǒng)的前端開發(fā)不一樣冶忱。它需要有另外一種思維或知識(shí)積累尾菇。
所以我希望大家能夠在感興趣的前提下去深入探索這方面的東西，然后呈現(xiàn)給大家更多更炫酷的內(nèi)容囚枪。
我的演講到此結(jié)束派诬，謝謝大家！
