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

  1. 云栖社区>
  2. IT大咖说>
  3. 博客>
  4. 正文

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

it大咖说 2017-06-27 12:13:05 浏览3624
展开阅读全文

6ac178cc40534601de2b2823b409c63f15049bc3

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

fdafb374cee89c303d454c662522dbbca7882d6d

摘要


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




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


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

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

06e2e821649c7774f37dcaf482e5617f45022cbc


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

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


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


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


5cd5b4f7f028aabb883e0ff0b6e21abd8a1601d9

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

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


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


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

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

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


相关推荐

推荐文章

近期活动


9d6412fe41522e1c6e825097949ab68c0e5bff10

嘉宾分享视频地址:http://www.itdks.com/dakashuo/detail/526

网友评论

登录后评论
0/500
评论