手淘互动动效的探索

时间 2019-11-21

标签互动探索繁體版

原文原文链接

内容来源：2017年6月18日，手淘前端技术专家大漠在“2017 iWeb峰会·第六届HTML5峰会 ”进行《手淘互动动效的探索》演讲分享。IT大咖说做为独家视频合做方，经主办方和讲者审阅受权发布。html
阅读字数：3089 | 6分钟阅读

摘要

如今的营销活动，用一张简单的图片去吸引消费者已经远远不够，必需要有能给消费者带来视觉冲击的东西，或者在动画过程当中提供更好的引导部分。手淘的前端团队经历了从Gif、视频到CSS Animation的从0-1的过程，并致力于研究的数据化驱动的动效。大漠将为咱们带来在手淘互动动效上的探索分享。前端

嘉宾演讲视频地址： t.cn/RCWCDu5

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

咱们之前访问Web页面是没有动画和动效的，甚至点击跳转的功能都不多。那时是纯粹的文字展现，图片在网站上也不多能看见。编程

最初点击一个连接跳到一个新的页面，这是一种交互。随着技术的变革，点击一个按钮会弹出一个窗口，这也是我之前认识的一种交互。如今咱们的交互行为变得更加复杂。json

用户无需进行任何操做，页面只是告诉用户去点击某个按钮能够进入一个页面或一个会场。这种交互行为在内部咱们称之为引流。浏览器

还有一种是纯氛围的动画交互效果。
橱窗是加上一些动效或陀螺仪的功能，让用户以为耳目一新。
抽奖是加入了一些用户的交互行为，点击红包就会告诉用户中了多少钱或者运气很差没有中奖。
视频如今也是一种传替交互的表现形式，若是加上一些其它的技术手段上去，能表现出来的就不止是咱们看到的视频那样。
咱们目前尝试在手淘互动里加一些简单的游戏，这些游戏就是利用前端的代码加一些创意，把用户吸引到互动的活动里来，让用户在这里驻留的时间更久。或者经过这些小游戏给用户带来必定的收益。
提醒是一个时间倒计时，告诉用户还有多少时间去参加“双十一”抢红包的活动。

交互在咱们团队就是以上这些表现形式。网络

最先咱们只能看到PC端的Web页面，随着移动端的快速发展，移动端的互动方式也会愈来愈丰富。架构

“动画，用于点缀”

最先实现动画的技术方案是Gif、视频，还有早期PC端看到的Flash页面，这些方案都是前端不用参与的。运维

可是Gif图放到移动端，会产生一些很差的后果。以及iOS不支持Flash，视频也有一些存在的风险。编程语言

在CSS3出现之后，你们作简单动画的时候会常常用到。还有一些SVG和Canvas动画。但其实这些都还不能知足咱们各类业务场景。工具

咱们今天的重点会放在JS-Driven Animation动画。

0-1的过程

2015年，咱们团队经历了一个0-1的过程。在15年以前，各类大触看到的氛围和动效基本上是Gif图或是视频。15年年货节，咱们尝试了第一次的改变，经过前端CSS或JS的技术手段，把一个Gif图转换成动画效果。完成这个效果的时候，不管是需求方仍是产品都很满意，由于这种方案能够随时更改动画中的元素。

CSS动画的痛点

沟通成本高。
开发成本高：由于要经过CSS去繁衍一个视频或Gif图演示的动效，除了要懂这方面的技术以外，还要让Gif图经过代码层面来实现。
还原度低：CSS实现动画的手段是有限的，要作一些复杂的动画仍是有难度。
可控制性低：若是需求方改变了其中某一个动画需求，咱们至少要花2-3天来繁衍那部分的效果。
可交互性弱：CSS动画没法实如今播到某个时间段忽然弹出窗口告知用户能够参加的活动。
日渐没法知足业务场景：在0-1的过程当中，需求方可能仍是比较满意的，可是若是每次的动画效果都是用这种方案来实现，需求方会以为很无聊，作出来也没法达到100%的还原度。

JS-Driven Animation

通过市场调研综合结果以后，咱们最终仍是选择本身“造轮子”。由于咱们但愿能够是本身控制的，不用担忧被别人起诉，也不担忧新功能没法在它的基础上进行扩展。

后来咱们通过一年的时间作了一个用JS驱动动画的工具Animation Flow Tool。

动画管理

我我的喜欢把动画的管理看成是导演一场舞台剧，要指挥每一个演员什么时候出场，出来作什么，什么时候退场。在咱们的动画管理中有一个timeline，它很像导演的角色。

经过时间轴能够很好地控制动画的场景，包括它什么时候播放、什么时候中止、什么时候退出。

CSS处理动画衔接的短板

CSS是经过持续时间来实现控制，若是全部时间点都已经肯定了，这样作是没有问题的。

好比动画“火山升起”的时候发来1秒的时间，第二个动画“火焰柱喷发”是在“火山升起”结束后开始播放。这时就可知它的延迟时间是1秒，“岩浆流动”同时播放也是1秒。到了“红包喷发”的时候就须要进行计算，前面的动画播放4秒后再播放“红包喷发”，它的延迟是1.4秒。若是这时“火山升起”的持续时间有所变更，那么后续的全部时间都要从新进行计算。这是CSS管理动画最大的缺点之一。