手淘互动动效的探索

原文地址

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

嘉宾演讲视频

http://www.itdks.com/dakashuo/detail/2199

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

我们以前访问Web页面是没有动画和动效的，甚至点击跳转的功能都很少。那时是纯粹的文字展示，图片在网站上也很少能看见。

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

用户无需进行任何操作，页面只是告诉用户去点击某个按钮可以进入一个页面或一个会场。这种交互行为在内部我们称之为引流。

• 还有一种是纯氛围的动画交互效果。

• 橱窗是加上一些动效或陀螺仪的功能，让用户觉得耳目一新。

• 抽奖是加入了一些用户的交互行为，点击红包就会告诉用户中了多少钱或者运气不好没有中奖。

• 视频现在也是一种传替交互的表现形式，如果加上一些其它的技术手段上去，能表现出来的就不止是我们看到的视频那样。

• 我们目前尝试在手淘互动里加一些简单的游戏，这些游戏就是利用前端的代码加一些创意，把用户吸引到互动的活动里来，让用户在这里驻留的时间更久。或者通过这些小游戏给用户带来一定的收益。

• 提醒是一个时间倒计时，告诉用户还有多少时间去参加“双十一”抢红包的活动。

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

最早我们只能看到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管理动画最大的缺点之一。

动画（片段）之间有重叠

后来我们改变了一种模式，通过JS来监控第一段动画，并告诉后面的动画什么时候结束再可以开始播放。这时无论第一段动画如何改变，都不用担心后面的动画。

原文地址