• 欢迎访问web前端中文站,JavaScript,CSS3,HTML5,web前端demo
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏web前端中文站吧

手淘互动动效的探索

CSS3 web前端中文站 2年前 (2017-09-02) 1106次浏览 已收录 0个评论

AnimationWeb 动画

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

更多精彩内容请看 web 前端中文站
http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

如果你对这个话题感兴趣,点击这里可以看视频。

互动,是连接用户的桥梁

手淘互动动效的探索

我们以前访问 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 来监控第一段动画,并告诉后面的动画什么时候结束再可以开始播放。这时无论第一段动画如何改变,都不用担心后面的动画。

扩展动画

手淘互动动效的探索

CSS 在手淘上实现的动效性质都是相同的,我们把它定义为精灵动画和路径动画。经过一年我们发现这两种动画是我们业务中最常见的动画效果,于是就对它们进行了封装。

精灵动画

以前要把所有图案拼成一张图,然后通过 Animation 控制每一帧的播放。后来我们通过 API 来控制。

比如一个图案从底部出现到顶部隐藏一共经历了 80 帧。按照以前 CSS 的动画实现方案,需要拼 80 张图片。在这 80 张小图里有 40 张可能是相同的,CSS 却不能把相同的图片利用起来。

而 AFT 的方案是可以的,也就是说在这个基础上最起码节省了 40 张图片。

CSS 路径动画

在没有 AFT 的情况下,我们做的是路径动画,通过translate来改变xy轴的轨径位置。

我们当时做这个动画效果描点描了很久,但是产品经理突然提出不要 Z 形的路径,要改成 S 形,我们又只好重新描 S 形的路径出来。有一位同事描了七套路径,需求方还不是很满意,因为用translate来描点,不管怎么描到无法达到流畅的效果。

AFT 路径动画

后来我们改用 SVG 的路径,无论需求方想要什么路径,只要找个 SVG 的制图软件导出路径节点就可以。这是我们后来对路径动画做的改变。

如果以后 CSS 的路径动画属性得到浏览器的支持,可以直接用原生的 CSS 路径动画,也支持 SVG 导出的路径,实现路径动画,AFT 就要退出历史舞台了。

AFT 骨骼动画

骨骼动画是借助第三方平台的工具把骨骼动画做出来,导出它的 json 数据,拿到 json 数据再出动画效果。

AFT 架构的演变

手淘互动动效的探索

最早的时候我们是利用 IDE 导出一份 json 数据,通过第三方 JS 库来实现 DOM 的动画效果。我们的第二种方案是通过 An/AE 导出一份 json 数据,再通过前端的 DSL 层面来实现动画效果。经过实验,这两种都不是我们想要的实现方案,后来我们对它进行了一些简单的改造。

aft.js 架构细节

手淘互动动效的探索

第一部分是元素,第二部分是动效器,第三部分是引擎,最关键的一点是动画管理,也就是时间轴。元素和动效是分离的,只要做动效,然后把动效赋予到元素上,再找引擎来渲染。

我们专注于做管理动画,怎样把动画描述出来,怎样把动画串起来构成我们所需业务的动画。这是 AFT 后面实现的底层架构,看上去没有以前那么复杂。

手淘互动动效的探索

业务开发模式

曾经开发模式

手淘互动动效的探索

视觉设计提供一个 Gif 或视频文件和一个 PSD 文件,交付到前端。前端根据 Gif 或视频的动画效果,把整个动画繁衍出来。也就是 AFT 动画繁衍的过程。这个模式的沟通成本非常高。

现在的业务开发模式

手淘互动动效的探索

前端只负责业务层的逻辑代码,视觉通过 AE 这种制作动画的工具去导出动画。要有业务逻辑,再通过前端加入业务逻辑。如果不要业务逻辑的话,就无需前端界入了。

可量化和数据驱动

粗犷的做法

手淘互动动效的探索

AE 导出的不是 json 数据,它做出一个视频,然后前端再通过代码繁衍。

正确的做法

手淘互动动效的探索

通过动画编程语言进行实现,要什么效果就能繁衍出什么效果。

思考探索

手淘互动动效的探索

我们提出了一个“动画工程师”的概念。我们团队目前还在思考动画工程师应该做什么,动画工程师是不是能直接实现动画的过程就可以称之为动画工程师。但我个人认为远远不止这些,我们还在思考探索中。

我今天的分享就到这里,感谢聆听!

【注:本文源自网络文章资源,由站长整理发布】

手淘互动动效的探索

大漠

常用昵称“大漠”,W3CPlus 创始人,目前就职于手淘。对 HTML5、CSS3 和 Sass 等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对 CSS3 的研究,是国内最早研究和使用 CSS3 技术的一批人。CSS3、Sass 和 Drupal 中国布道者。2014 年出版《图解 CSS3:核心技术与案例实战》。

web 前端中文站 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:手淘互动动效的探索
喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址