從UI到AI——移動端H5生成技術漫談

內容來源：2017 年 7 月 29 日，百度資深研發工程師潘徵在「2017谷歌開發者節北京站」進行《從 UI 到 AI —— 移動端 H5 頁面生產技術漫談》演講分享。IT 大咖說（微信id：itdakashuo）做爲獨家視頻合做方，經主辦方和講者審閱受權發佈。

閱讀字數：2061 | 6分鐘閱讀

嘉賓演講視頻及PPT回顧：suo.im/5hCD4S

摘要

Houdini 爲 CSS 提供動態編程能力，讓開發者介入佈局與渲染的過程，帶來無限擴展性。分享會用數個例子演示 Houdini 的神奇效果，同時介紹其現狀。

移動端網頁動畫

Css變換和動畫

Css3早期主要成就仍是給按鈕加圓角，爲TIPS畫三角，這些在如今看來很是普通，可是之前卻須要經過圖片來解決的功能。

如今的Css3已近擁有了更多優秀的功能，包括但不只限於動畫、css濾鏡、遮罩等，其中動畫能夠實現延時、時長、重複次數、播放次序、播放方向等多種屬性的設置。（此處有嘉賓演示，視頻請看：http://suo.im/5hCD4S，或點擊最下方閱讀原文）

不管是基於那種技術實現的動畫，本質都是屬性隨着時間變化，屬性涵蓋位置、縮放、旋轉、顏色等方面。動畫能夠是連續的，也能夠是不連續的，不連續也就是幀動畫。

Css mask則能夠用來實現遮罩動畫，不過經過遮罩實現的動畫性能上會稍顯弱勢。而對於須要空間感的動畫使用css 3d旋轉能更好的實現。

Css動畫特色

Css動畫是在完整的DOM結構上實現的，因此便於同時添加各類事件觸發，寫起來也很是簡單，只須要拼湊各類css屬性就能達到效果。

Css的缺點一樣很是明顯，首先它沒有中間狀態或者說難獲取到，所以暫停動畫的方式會比較麻煩。其次css動畫在低端的手機上仍然存在性能瓶頸。

綜上所述咱們會發現比起須要中途根據用戶操做發生改變的動畫場景，css動畫更適合線性展現類的場景。

Canvas 2D

Canvas元素是目前網頁中3D內容的惟一載體，歷史上的Canvas 2D由於能直接在網頁上畫圖收到普遍的關注。Canvas 2D動畫的核心就在於刷幀率，它是指在用戶執行動做時更新數據，並於下一次繪製的時候根據新數據重繪整個畫面，整個流程都是基於value = f(t)的映射。

在每一次畫面幀刷新的時候，都會給全局傳遞當前時間的標識，而後畫面上全部的元素都會根據這個時間值計算自身當前應該呈現的狀態，整體上來看畫面中全局內容的反應都是基於時間進行的。在大多數的單機遊戲中的暫停功能，其實也是經過暫停遊戲內的時鐘來實現的。

Canvas 2D的流暢度依賴於每秒刷新次數，當設備性能較好時，動畫流暢度會獲得保障。可是當性能較差時單幀所需的繪製時間就會變長，而且Canvas 2D這時會跳過中間幀，直接渲染最後一幀，也就形成咱們所看到的卡頓現象。

Canvas若是優化得當的話會有至關不錯的性能， 由於它只有一個DOM節點，不會像css同樣涉及到各類重繪和從新佈局的流程。另外Canvas是天生不具有以畫面元素爲單位的事件響應、繪製次序處理接口、須要自行或藉助第三方程序處理。須要注意的是Canvas的面積和內存成正比，最後它仍是WebGL的惟一載體。

SVG

SVG是基於XML描述的矢量圖片格式，它的圖像數據具備完整的層級結構。能夠直接使用相似DOM API的接口來控制內部單個元素和分組，可以隨意縮放而不失真。而且SVG支持css屬性，甚至能夠用css來爲單個元素添加動畫，還能很方便的動態改變填充色、描邊甚至形狀。

用css給SVG添加的動畫在多數瀏覽器是沒有硬件加速支持的，在畫面複雜的時候渲染耗時相對也會更長。

WebGL

目前爲3D場景添加交互的主流作法有三種。第一種是rayCaster，它的作法是向場景中發射一條射線，而後返回與射線相交的全部元素的集合，默認第一個相交的元素就是被點擊的元素。這種方式簡單快速，可是精準度不算好。

第二種就是像素顏色，它會將場景渲染兩次，第一次清除場景中全部的材質顏色，第二次爲每個物體渲染上不一樣的顏色，而後根據點擊時獲取的顏色判斷被觸發的物體。這種方案的速度和精準度都有保障，不過內存消耗偏大。

最後的CssRenderer是DOM和真正的3D場景混合使用的方案，它有着完善的事件觸發和響應機制，惟一的缺點就是卡頓。

門檻在哪

非技術人員沒法制做簡單H5的門檻在於，沒法將設計稿上的圖文轉成網頁中的元素，以及爲元素添加動畫。還有面對繁多的手機分辨不能一一適配，沒法爲元素添加各類觸發的問題。

對於前兩點能夠經過類ppt的編輯器解決，經過引入座標系的概念一樣也能夠解決手機分辨率的問題。至於事件的觸發，能夠爲每一個組件配置相應的事件響應機制，經過可視化列表的形式展示出來。