阿里巴巴前端专家渚薰:H5互动的正确打开方式
摘要: 本文内容是阿里巴巴前端专家 渚薰 在 FDCon2017前端开发者大会 上的主题分享,IT大咖说为独家视频合作方。
交互是HTML技术发展过程中的一个里程碑。很早以前,一个页面就是一大段文本,之后出现了按钮,出现了表单,才有了一定的交互。
对于用户来说,获取信息的方式有两种。第一种是通过被动的去获取页面中信息,第二种是它主动去寻求反馈。
用户通过这两个途径去获得想要的东西,对于互动来说,也需要在这两点上通过自己的创意和技术去表达给用户。
假如把页面比喻成一个机器人,交互就是赋予了我们一个能对机器人进行操纵的连接。动画能够帮助一个“机器人”活起来。对于动画来说,它其实是动效和时间的一个完美的结合。
如果是具体的元素,可以把这个变化的过程做一些映射;对于类似three.js这样的框架,它的对象本身有一些属性,这些属性也能够认为它是一个0-1的动效变化过程。
把动效串起来就是动画。动效负责自己的元素,让它能够运动;而动画则负责把这些动效管理起来。
交互是桥梁,动画是灵魂。除此之外,更重要的是我们需要在H5的互动页面里把它表达出来。
性能在动画、互动页面里,可以直接把它映射为帧。我们需要做的就是JankFree,这样动画、交互、互动才能完美地呈现给用户。
内容降级比较容易理解,就是能够保证主要内容,把次要内容去掉或降级。这样能让更多用户看到页面的内容。
我们会native的页面上去做一个H5的view,然后把它透明,同时也可以获得native里每个元素的位置,并在H5里面替换成H5的动画元素,让用户感受到动画和首页紧密结合在一起。
Airbnb已经有了一个lottie。我们通过JSON和DSL间的一次转换对赋予它二次开发能力,可以对JSON进行动画微调,也可以把很多动画片段、JSON数据组合起来运用到业务中去,附加业务属性。
因为DSL比较接近前端的开发思路,我们借助DSL的设计思想和JSON进行转换之后,能够让我们在动画的开发过程当中能够参与进去,真正做到想要的东西。
互动其实也是前端的一个分支,但它和传统的前端开发不一样。它需要有另外一种思维或知识积累。