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

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2018-04-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏互联网杂技

轮播图也就是看看而已,确实越来越少的网站,采用轮播图了

轮播图,图片旋转器,滑片,无论你怎么叫这玩意,它在网络上无处不在。轮播图在电商网站主页上广泛应用,大多数电商网站的主页上都有它: ? 但轮播图对用户真的有意义吗...

48170
来自专栏分布式系统和大数据处理

移动网页设计与开发

先讲了HTML5的概念和HTML5新出现的结构元素,例如nav、section、article等。

16450
来自专栏GIS讲堂

lzugis——Arcgis Server for JavaScript API之自定义InfoWindow(续)

同样的标题后面加了一个括弧,不是为了增减博文数量,而确实是上个功能的完善,标注为续,意思是继续上次的内容,来说说如何自定义InfoWindow。

17330
来自专栏腾讯社交用户体验设计

如何做一个让人闻风丧胆的H5 - 腾讯ISUX

18930
来自专栏偏前端工程师的驿站

CSS3魔法堂:说说Multi-column Layout

前言  是否记得《读者文摘》中那一篇篇优美感人的文章呢?那除了文章内容外,还记得那报刊、杂志独有的多栏布局吗?  当我们希望将报刊、杂志中的阅读体验迁移到网页...

21850
来自专栏理论坞

统一原则 在网页设计当中的运用

形式美法则是人类在创造美的形式和过程中对美的形式规律的总结概括,世间万物的美都可以用形式美法则来概括。在平面构成中也有形式美法则:统一和变化,对称和平衡,节奏和...

9220
来自专栏腾讯大讲堂的专栏

浅议内滚动布局

一、什么是内滚动布局? 所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的<html>滚动而言的,例如,下图所示滚动条,是从头部下方开始:...

45050
来自专栏程序人生 阅读快乐

超实用的jQuery代码段

本书精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。本...

11810
来自专栏编程

Web前端开发的四个阶段

第一阶段:HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静态网页还是动态网页,最终...

21150
来自专栏MelonTeam专栏

多端排版杂谈

导语 本次主要聊聊多平台的排版技术的差异与共同,涉及的平台有Web、Android、iOS 要说排版技术,在这三个平台中我觉得最有话语权的应该就We...

19370

扫码关注云+社区

领取腾讯云代金券