手淘互动动效的探索

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

扩展动画

互动常见的动画类型

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

精灵动画

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

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

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

CSS路径动画

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

我们当时做这个动画效果描点描了很久,但是产品经理突然提出不要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数据,它做出一个视频,然后前端再通过代码繁衍。

正确的做法

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

思考探索

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

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

推荐文章
Mars在移动网络的探索和实践
阿里巴巴前端专家渚薰:H5互动的正确打开方式
近期活动
直播 |【阿里云MVP MeetUp】一起把云计算拆了玩儿

时间: 2017-08-31

手淘互动动效的探索的相关文章

移动网络体验的升级——手淘海量移动网络服务的探索

移动时代的网络服务在海量终端.网络体验.互动形态.网络安全等方面都面临挑战. 手淘移动网络产品矩阵: 应用网关 MTOP --API网关 Mass --群发网关 Sync –同步网关 移动服务 Agoo --推送服务 Orange --移动配置 基础服务 ACCS --云通道服务

Origami Code Export 探索:动效与逻辑

Orgami 2.0 发布已经有一段时间了,其中最让我关注的,就是它 Code Export 的功能:按照官方的说法,Origami 可以将动效分别导出适用于 iOS.Android.Web 三端特定引擎的代码,提供给开发同学使用,以解决设计到实现之间的过渡. 可交互原型设计除了用户测试,最重要的目的就是展示给开发同学观看,确定交互逻辑和动效形式.其他主流的动效设计软件中,Form 刚发布新版,支持一个 QC SDK(但我还没试用过):Framerjs 用 Coffee Script 编写原型,

APP动效设计分为哪几种?

  编者按:什么样的动效让人舒服,什么样的动效让人一下就想到某个产品,什么样的动效让人沉浸其中?今天百度的同学从这三个维度,分别聊聊对应的APP动效设计,想给用户一个惊喜的同学,来涨姿势吧. 如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言.在如今玲琅满目的App中,如何脱颖而出?设计师要考虑的,不光是产品如何更合理的展现结构与功能,更重要的是思考自己的App是否能做到简便易懂的同时,又给用户新颖感? 此时,有限的屏幕空间紧靠文字的提示是不够的,App需

用动效创建的可用性:动效中的用户体验宣言

本文讲的是用动效创建的可用性:动效中的用户体验宣言, 原文作者:Issara Willenskomer 译文出自:掘金翻译计划 译者:Ruixi 校对者:cdpath,osirism 用动效创建的可用性:动效中的用户体验宣言 下面这段宣言即是我对这个问题的回答--"作为一个UX或者UI设计师,在界面中,如何在合适的时间和位置通过动效的使用来支持可用性呢?" 在过去的5年中,我有幸指导过来自40多个国家的 UX 和 UI 设计师,而且我为这些顶级品牌和设计咨询公司带来的建议和指导基本上都

打开天窗说“亮话”,手淘这些年的技术大揭秘

中国云计算产业最具影响力的盛会之一--2016杭州云栖大会(https://yunqi.aliyun.com/)将在云栖小镇召开.连续举办七届的云栖大会一直是业界了解阿里云计算生态发展和应用趋势.体验前沿技术和产品的最佳平台,来自海内外的上万名开发者.创业者聚集于此,分享着他们对云计算的思考与实践经验.7年来,从产品发布到行业解决方案展示,从关注技术到技术与服务并重,从单一的客户到生态全景的展现,大会的核心内容一直在"进化",而2016年杭州云栖大会,则以"飞天・进化&quo

你不知道的刷屏级H5排版以及动效

  如果细心地观察那些阅读转发破万的H5,它们除了本身极具特色的创意之外,排版与动效功能的应用也是恰到好处.所以今天我们就分别从[排版].[动效]两方面来给大家阐释,如何让自己创作的H5更具传播性. Part 1 排版篇 生长在移动端的H5广告相较于其他广告,充分地暴露了屏幕小.层级深.较难在保持内容统一性的前提下包含众多且交互复杂东西等缺点,也因此可能会影响用户在阅览H5时对有效信息的获取能力.所以,利用设计在最短的时间内引导用户接收到有效信息变得更加重要. 那么,怎样才能更有效地引导用户接受

由浅入深科普最常用的八种HTML 5动效制作手法

  一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验;一个H5运营宣传页,炫酷的动画特效定能助力传播和品牌打造. 近两年,小到loading动画,表单动效,大到各式各样H5运营页的炫酷展现,"动效设计"一词可谓是火遍大江南北,而动效设计早已成为一名合格设计师必需有所知晓的领域.本文将通过一些案例,和大家一同挖掘几种常见的H5动效制作手法. 我们由浅入深来挖掘这动效制作的秘密,一个入门级的小问题:看上图这几个动画例子,大家是否能说出这动画是如何制作出来的呢?而又是如何在网页之上

9个移动动效设计必备的灵感收集站

  扁平化的兴起,现在越来越流行动效设计 ,特别对于移动端,对交互动效要求是很高的,今天为大家整理一些以展示动效为主的网站,对交互设计师来说是很好的灵感发源地. UI Movement UI movement此站更新比较快,主要展示移动APP的动效界面为主. Motions motions的动画作品大部分交互摘自 Dribbble,所以质量有保证.界面不仅是APP,还有其它GIF动画 Design Patterns Design Patterns是Codepen的一个频道,主要对一些交互友好的代

学学这些爱不释手的加载动效设计

  我们现在越来越注重细节,小到加载动画,大到界面配色.这些都会成为用户吐槽的地方,一个不小心,你设计的东西让用户反感了,他们说不定就要和你的产品说拜拜了.所以今天我们要重点说说那些你以前觉得"不那么重要"的加载设计. 等待和加载动效几乎是无处不在了.设计师和设计机构都很清楚,加载动效几乎是目前网站和APP设计中无法绕过且必须的组成部分,它们不仅是大势所趋而且是打造优秀用户体验 的必须组件. 虽然目前很多产品将加载/等待动效作为强化用户第一印象的组件,但是它的实际使用范畴远不止于这一部