从UI到AI——移动端H5生成技术漫谈

内容来源：2017 年 7 月 29 日，百度资深研发工程师潘征在“2017谷歌开发者节北京站”进行《从 UI 到 AI —— 移动端 H5 页面生产技术漫谈》演讲分享。IT 大咖说（微信id：itdakashuo）作为独家视频合作方，经主办方和讲者审阅授权发布。

阅读字数：2061 | 6分钟阅读

摘要

Houdini 为 CSS 提供动态编程能力，让开发者介入布局与渲染的过程，带来无限扩展性。分享会用数个例子演示 Houdini 的神奇效果，同时介绍其现状。

嘉宾演讲视频及PPT回顾：http://suo.im/5hCD4S

移动端网页动画

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的编辑器解决，通过引入坐标系的概念同样也可以解决手机分辨率的问题。至于事件的触发，可以为每个组件配置相应的事件响应机制，通过可视化列表的形式展现出来。