阿里巴巴前端专家渚薰：H5互动的正确打开方式

摘要： 本文内容是阿里巴巴前端专家 渚薰 在 FDCon2017前端开发者大会 上的主题分享，IT大咖说为独家视频合作方。

编辑IT大咖说阅读字数: 1539 用时: 6分钟

摘要

 

现在越来越多的产品或营销页面，以H5互动（动画、3D）的方式呈现给观众。互动场景的设计、还原、开发、优化，对于前端开发者来说变成了整个业务开发过程中最重的负担。 手淘互动团队用一套流程工具以及一系列技术方案，解决的开发过程中痛点，提高整个周期的效率。本次分享，从前端架构和工程说起，以手淘互动开发为案例，为前端开发者打开互动制作的一扇门。

 

 

 

“交互，是链接用户的桥梁”

 

交互是HTML技术发展过程中的一个里程碑。很早以前，一个页面就是一大段文本，之后出现了按钮，出现了表单，才有了一定的交互。

交互不只是点击，交互的概念可以涉猎的很广。

 

 

对于用户来说，获取信息的方式有两种。第一种是通过被动的去获取页面中信息，第二种是它主动去寻求反馈。

用户通过这两个途径去获得想要的东西，对于互动来说，也需要在这两点上通过自己的创意和技术去表达给用户。

 

“动画，是展现页面的灵魂”

 

假如把页面比喻成一个机器人，交互就是赋予了我们一个能对机器人进行操纵的连接。动画能够帮助一个“机器人”活起来。对于动画来说，它其实是动效和时间的一个完美的结合。

 

动效可以抽象地理解为起始值到终止值之间一个变化的过程。

如果是具体的元素，可以把这个变化的过程做一些映射；对于类似three.js这样的框架，它的对象本身有一些属性，这些属性也能够认为它是一个0-1的动效变化过程。

概括来讲，它们都是一次差值算法。这就是动效的定义。

把动效串起来就是动画。动效负责自己的元素，让它能够运动；而动画则负责把这些动效管理起来。

 

“除了桥梁和灵魂，还有？”

 

交互是桥梁，动画是灵魂。除此之外，更重要的是我们需要在H5的互动页面里把它表达出来。

兼容性

对互动页面进行一轮机型适配。

性能优化

性能在动画、互动页面里，可以直接把它映射为帧。我们需要做的就是JankFree，这样动画、交互、互动才能完美地呈现给用户。

Jank Free则需要从CPU和GPU两方面来做。

降级

降级可分为内容降级和版本降级。

内容降级比较容易理解，就是能够保证主要内容，把次要内容去掉或降级。这样能让更多用户看到页面的内容。

版本降级主要是用在3D和2D版本上。

同native的亲密接触

我们会native的页面上去做一个H5的view，然后把它透明，同时也可以获得native里每个元素的位置，并在H5里面替换成H5的动画元素，让用户感受到动画和首页紧密结合在一起。

解放生产力的工具

Airbnb已经有了一个lottie。我们通过JSON和DSL间的一次转换对赋予它二次开发能力，可以对JSON进行动画微调，也可以把很多动画片段、JSON数据组合起来运用到业务中去，附加业务属性。

因为DSL比较接近前端的开发思路，我们借助DSL的设计思想和JSON进行转换之后，能够让我们在动画的开发过程当中能够参与进去，真正做到想要的东西。

Web3D

Web3D对于前端来说其实是跨界，实质上是GPU编程。

 

互动是前端界的又一股泥石流

 

互动其实也是前端的一个分支，但它和传统的前端开发不一样。它需要有另外一种思维或知识积累。

所以我希望大家能够在感兴趣的前提下去深入探索这方面的东西，然后呈现给大家更多更炫酷的内容。

我的演讲到此结束，谢谢大家！

​​​​​​​

原文链接