←首页

在开始之前我们先说说,动效设计的重要性:

  • 改善反馈体验
    作为UI,UX设计师,你需要尽量多地使用图案,这样用户会无意思地去关注它们,响应式的动效设计,说白了就是让交互体验达到令人愉悦:当按下按钮时,告诉用户,我的天,你按下了按钮!文件保存完,告诉用户,苍*泽*罗*玛*丽*.avi已经上传完毕!
  • 内容无缝过度
    动效设计可以让你避免断片,模型的淡入淡出是最受欢迎的做法。
  • 填充死角
    当用户在你的页面上执行无聊的任务的时候,你可以通过声音,颜色,动画激起他的性欲。这会让水少烧快一些(工作效率)
  • 提高审美
    同样为了审美,UI设计师花了很多时间设计页面颜色,字体搭配,动效设计师组合他们的过度和渐变。

下面的例子我们使用Velocity.js的UI pack来改善用户体验。

UI Pack 简介

引入UI Pack包(zip后大概1.8kb),你可以获得很多UI动画效果,分为两大类:

CALLOUTS

callouts主要用来吸引用户关注的动画,比如晃动来提示用户:您的输入有误。

See the Pen Velocity.js - UI Pack: Callout by Julian Shapiro (@julianshapiro) on CodePen.

TRANSITIONS

transitions的效果用于展现我们的内容,每个transition都有in,out两个方向,比如下面的slideUpIn

See the Pen Velocity.js - UI Pack: Transition by Julian Shapiro (@julianshapiro) on CodePen.

如果你有研究过iOS的动效设计,你会注意到有一打那么多的过度效果来帮助iOS改善用户体验。Velocity.js UI pack就是用来做这个的。

使用UI Pack

使用起来很简单,这里简单带过。跟velocity的用法相识,不过参数上我们传递的是动效名字。

$elements.velocity({ opacity: 0.5 });

变成:

/* Shake an element. */
$elements.velocity("callout.shake");

/* Transition an element into view using slideUp. */
$elements.velocity("transition.slideUpIn");

UI pack中还有其他用法

stagger

使用stagger可以轻松创造视觉差效果。

/* Animate elements into view with intermittent delays of 250ms. */
$divs.velocity("transition.slideLeftIn", { stagger: 250 });

See the Pen Velocity.js - UI Pack: Stagger by Julian Shapiro (@julianshapiro) on CodePen.

drag

设置drag为true,那么最后一个元素的动画时间会与设定的相同,而前面的其他元素动画时间会稍快。

See the Pen Velocity.js - UI Pack: Drag by Julian Shapiro (@julianshapiro) on CodePen.

backwards

设置backwards为true,会产生一个反冲镜像。你要我向下,我偏要向上,你要我从左到右,我偏要从右到左。

See the Pen Velocity.js - UI Pack: Backwards by Julian Shapiro (@julianshapiro) on CodePen.

UX设计

提升动效设计是可以很快实现的,记住以下几点:

  • 快速完成
    应用过度效果的时候,很多程序员犯了错误,让过度时间太长,这会让用户觉得等待太TM无聊。所以如果你有很多内容淡入的话,请保持他们的时间尽量短。
  • 使用适当的效果
    比如不要在官方正式内容上使用俏皮弹性动画。
  • 保守地使用
    页面上每个角落都使用过度,就相当于什么都没用。
  • 避免过重
    避免在频繁触犯的位置上使用过长动画。
  • 实验
    重复试验,找到合适的动画过度,时间,反弹效果。

使用JavaScript动画的好处

首先,到目前为止,这些效果大部分基于CSS库,比如:Animate.css

  • 动效可以链式调用,并且可以待参数(如果你用纯CSS实现,会很繁琐,写过的人就知道!!!)
  • 这些效果都优化过(最小的DOM变动)
  • 通过UI pack执行动画,它们会在淡出动画结束后display:none,开始前,display:block或inline(如果你用CSS的话会需要更多繁琐的代码)
  • 如果你使用CSS,那么当你不需要这个动画的时候,会变得模糊,因为css类名没有移除。
  • 除了IE8以下会回滚到淡入淡出,其他浏览器都能兼容。

相关链接

本文根据@Julian Shapiro的文章所译,整篇译文带有我们自己的理解和意思,如果有译得不好的地方或者不对之处,还请大家指点。英文出处:Faster UI Animations With Velocity.js

如需转载,请注明出处: http://w3ctrain.com/2015/11/15/faster-ui-animations-with-velocity-js/ ,欢迎加入前端Q群(467969149)