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

编辑 | IT大咖说

阅读字数: 1539 用时: 6分钟

摘要

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

嘉宾分享视频地址：t.cn/RopquND

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

交互是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编程。

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

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

因此我但愿你们可以在感兴趣的前提下去深刻探索这方面的东西，而后呈现给你们更多更炫酷的内容。

个人演讲到此结束，谢谢你们！

推荐文章

• 干货 | 豆子科技首席架构师钟声：Java的纯真年代
  

• 开源中国社区创始人红薯：J2Cache开源中国两级缓存实践
  

  
  

近期活动

• 直播 | 6月28日中国开源产业峰会

原文地址：t.cn/RoiRXZG