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

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

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

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

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

摘要

 

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

 



 

 

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

 

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

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

 

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

 

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

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

 

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

 

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

 

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

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

如果是具体的元素,可以把这个变化的过程做一些映射;对于类似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编程。

 

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

 

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

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

我的演讲到此结束,谢谢大家!

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

原文链接

相关推荐