文档结构  
翻译进度:已翻译     翻译赏金:0 元 (?)    ¥ 我要打赏

Anime.js Animation Library

如果你正在寻找一个快速和轻量级的动画库,那么Julian Garnier编写的Anime.js是一个你可以考虑的选择。

这是关于动态DOM动画,包括SVG绘图的系列文章中的第一篇。我不打算囊括专业的canvas-WebGL动画库和SVG-special动画库,但是如果一个动画库在网页的HTML动画元素上有出色表现(SVG绘图同样也是),我会考虑把它包含在这个系列文章中。

我并不计划剖析每一个库深入研究它的源代码,相反的,我会从一个致力使用CSS工作同时又想探究javascript能够为DOM动画带来什么帮助的开发者的角度来进行研究。因此,我会寻找这样的一个工具:能添加移除CSS样式,从而动态的操纵DOM,使用CSS开发者而言很熟悉的语法来实现动画的目标

第 1 段(可获 2.19 积分)

在Web中的动画

正如Sarah Drasner所解释的,当谈论web动画时,一个有意义的区别存在于在用户界面/用户体验动画和独立动画之间。

研究 表明人们能在移动图像的基础上在更好的感知理解世界,这意味着当信息通过动态的场景而不是一张或者几张静态的图片的方式呈现,我们可以更好的理解和吸收信息。

UI/UX动画为这样的目的服务:当用户网站导航,在网页上获取信息或者执行一个特定任务时提供辅助,例如登录建立通讯,向购物车添加一个项目等等。

第 2 段(可获 1.44 积分)

通过对比发现,独立动画是用来在页面主体或者边沿解释概念的。

Sarah Drasner — CSS Conference slides

CodePen demo —这个令人惊讶的例子可以说明这点

这个区别是很重要的,因为实现动画的用户界面的目的是帮助用户更好的完成他们的任务,以达到网站的目标,相反的,在你创建一个独立动画的时候,你要尽可能充分表达一个确定的概念

 这就是说,这两种动画都是为了让用户更加享受操作而创造的,这是为什么你创建动画的时候,不同动画库在一些像性能和可操作性这样的指标上的表现的差异,让用户又爱又恨,甚至hurts 用户的原因

第 3 段(可获 1.58 积分)

为什么要使用javascript创建动画?

为了给web网页添加动态内容,如今CSS提供了过渡和动画。然而,当提及到web上的动画,javascript依然扮演着重要的角色。

为了帮助你在CSS和javascript两者间做出选择,可以参考Rachel Nabors提供的 following distinctions  

动画可以是:

  • 静态的: 动画在没有决策逻辑的情况下从头到尾的运行
  • 有状态的:通过点击展开或收起侧边栏是一类常见的动画,你使用CSS和一点点javascript代码就能实现在你的动画中添加移除那些负责控制元素状态的CSS类
  • 动态的:这类动画有不同的表现,取决于用户交互的不同考虑因素,例如当你只使用CSS创建动画时,javascript最可能是你最好的助手。
第 4 段(可获 2.66 积分)

除了动态动画,如果遇到以下这些使用场景,你也可以求助于javascript:

  • 需要在多个元素上链接或者间断你的动画。这种情况下,每个后续的动画都需要在前一个动画结束后发生。你能够单独使用CSS通过调整每个动画元素的delay 属性来实现,但是如果你需要改变不止一个变量值,这会使你对链接元素的必要调整变得不可控制。
  • 你正在使用SVG图形。这种情况下的缺点就是: CSS SVG动画并不一贯支持这些浏览器
  • 如果你的项目需要支持那些不支持CSS动画的旧版浏览器,借助于强大的javascript解决方案将会让你的动画有更广泛的适用性。
第 5 段(可获 1.75 积分)

如果你想了解更多这方面的内容,可以参考Jack Doyle的:Myth Busting: CSS Animations vs. JavaScript ,他是 Greensock Animation Platform的作者, 这里他提供了很多好的建议。

一个正在上升的未来的选择:Web 动画API

W3C正在制定一个使用统一语言的规范,以便无需借助任何外部的javascript库就能一统CSS,SVG和Javascript动画。这些API就是Web Animations,它们能在那些不太适合使用CSS的动画中很好地工作。你可以阅读Dudley Storey的 introduction to the Web Animations API (AAPI) ,对你来说会很有用。

第 6 段(可获 1.35 积分)

使用Web动画API进行工作的趋势正在经历持续的增长,polyfill 对于浏览器而言也是可行的,它并不为API提供本地支持。

这听起来是很好的,我强烈建议使用WAAPI进行试验,但是,在我写这篇文章的时候, browser support是粗略的,更加精确的调整可能会在未来发生。

动态DOM动画的动画库

这里有很多Javascript动画库可供你选择,在撰写本文时,GreenSock,也被称为GSAP (GreenSock Animation Platform) 和 Velocity.js 是其中的佼佼者。

第 7 段(可获 1.61 积分)

这两者都是出色的、用户友好的工具,我会在后续的文章中讨论它们。但是现在,我更乐意把Anime.js作为本系列文章的开篇,Anime.js是一个新的Javascript动画库,它已经获得一些重要的牵引。

Anime的主要特性

Anime 的名字的意思是 日本人的手绘或者电脑动画

Anime.js JavaScript animation library logo

至于其特性,就是下面所述的:

它是一个灵活但轻量级的Javascript动画库,它使用CSS,独立变换,SVG,DOM属性和JS对象进行工作。Anime.js支持以下浏览器:

  • Chrome
  • Safari
  • Opera
  • Firefox
  • Internet Explorer 10+
第 8 段(可获 1.15 积分)

有那么多动画库可以使用,为什么选择Anime?

这个问最好还是让Anime的作者 来回答,正如他解释的为什么要在已经有了一些强大的工具例如GSAP的情况下提出Anime.js:

GSAP能够比Anime做得更多,但也正因如此它很笨重。我的目标是这个库使得API尽量保持简单,关注我真正需要的(多时间维度,容易的,播放控制),并且代码简洁少量(缩小9KB)

黑客新闻 

简单来说,对于HTML和SVG元素动画,不需要GSAP或者其他大型类库所提供的超出所需的所有特性,Anime.js对于你的项目来说已经足够优秀

第 9 段(可获 1.58 积分)

怎么使用Anime.js

在下面我提供了几个生动的例子来说明Anime.js的基本用法,为了便于演示,大部分动画会运行的有点慢。

包含Anime.js跟包含jQuery或者其他常见的Javascript库没有区别。

project’s page on GitHub下载后缀.zip的压缩包,提取出文件并且使用<script>标签添加anime.js到你的html文本中。

<script src="anime.min.js"></script>

另外,你也可以使用npm 或者bower:

npm install animejs
bower install animejs

给单个元素添加一个动画:弹跳球

第 10 段(可获 1.06 积分)

一旦在项目中设置好Anime开发环境,你就能从一种最简单的动画开始:只有一个元素,一个球,向上弹跳和向下弹跳。

第一步就是调用anime传递一个带有关于动画弹跳细节的对象:

var bouncingBall = anime({

  //code here
	
});

接下来,你需要用一些声明动画对象,动画种类,动画持续时间等细节的指令填充上面的这个对象

var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic'
});
第 11 段(可获 0.93 积分)

这个对象的属性告诉Anime哪一个元素需要动画,这里你可以像我在上面这个例子那样使用CSS选择器,或者使用下面任意方法:

  •  DOM元素,例如document.querySelector('.ball')
  • 节点,例如document.querySelectorAll('.ball')
  • Javascript对象,例如{elementName: 'ball'}
  • Javascript数组,例如['.ball']

如果对象的属性多于一个值,这就是说你打算在多个元素上应用动画效果,你可以根据数据结构使用数组,例如:

var bouncingBall = anime({
  targets: ['.ball', '.kick'],
  //rest of the code
});
第 12 段(可获 0.95 积分)

在这个例子中的第二个属性通过translateY垂直地移动这个球,这对于那些使用CSS的人来说是很熟悉的。 Tiffany Brown 和其他人推荐使用translate和scale移动元素和分别的改变它们的尺寸,而不是通过它们的宽度和长度来定位元素,这能够确保动画性能和质量,避免浏览器回流 browser reflows

上述代码片段中下一个属性是duration属性,这告诉Anime要维持动画多长时间,如果你在不同时间点要产生多个动画,delay是另一个有用的属性。

第 13 段(可获 1.28 积分)

loop属性告诉Anime你想要执行动画的次数,默认值是false,意味着动画只执行一次。你可以设置该值为true让动画无限次数执行,或者设置一个精确的数字让动画执行一定次数。

direction属性存在于CSS动画和Anime中,该属性允许你设置CSS的计数器为以下任意值:normal,reverse和alternate。最后一个值alternative介于normal方向和reverse方向之间,这似乎在一个弹跳球的动画上表现得很好。

第 14 段(可获 1.28 积分)

最后,上述代码为你的动画确定了easing属性,这是变化率常数?动画可能开始很慢然后加速?最后有一个弹跳的动作?正确的easing值是一个平滑有效的动画的关键要素。

你可以使用下面的语句找出Anime的所有的easing函数:

console.log(anime.easings);

给弹跳球加上第二个动画

假如你想让弹跳球在触碰到容器底部时稍微变扁,使用Anime你可以以Javascript对象的形式添加specific animation parameters ,对于这个弹跳球的例子,下面就是实现这个效果的代码:

第 15 段(可获 1.59 积分)
var bouncingBall = anime({
  targets: '.ball',
  translateY: '50vh',
  duration: 300,
  loop: true,
  direction: 'alternate',
  easing: 'easeInCubic',
  //new code
  scaleX: {
    value: 1.05,
    duration: 150,
    delay: 268
  }
});

上面的代码添加了一个新的属性:scaleX,它用来增加球的宽度,并且使用特定的键值通过 对象字面量 的形式进行赋值,以此能够控制你的动画

以上键值对让你在水平轴根据你的标尺控制元素的宽度,同时durationdelay 键值让你设置动画的持续时间和相对上一个动画本次动画开始的时间点

第 16 段(可获 1.01 积分)

查看SitePoint(@SitePoint)在 CodePen上的笔记Bouncing Ball with Anime JS

如果使用你喜好的浏览器的开发者工具检查代码,你就能看到Anime是怎样通过注入行内<style>标签让元素动起来和动态更新CSS变换属性值的:

How Anime.js Updates the DOM

成功的让两个元素动起来:把球踢动

下面的示例代码展示了一种同时让两个元素产生动画的方法,在本例中这liang个元素是两张图片。一旦第一个动画结束,第二个动画就马上开始。

var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  easing: 'easeInCubic',
  complete: function() {
    anime({
      targets: '.ball',
      translateX: '70vw',
      scale: 1.5,
      easing: 'easeOutBounce',
      delay: 150
    });
  }
});
第 17 段(可获 1.09 积分)

这个球只有在被踢的时候才会动起来,使用Anime.js的.complete()方法可以错开动画,这时候包含另一个对象,这个对象带有让这个球元素动起来的指令。

查看SitePoint(@SitePoint)在 CodePen上的 Animate Two Elements with Anime JS

图片来源于Pixabay.com

当然,可以通过CSS使用几个关键帧和一个神奇的三维贝塞尔曲线来快速地近似模拟这种静态动画,这时候你根本不需要任何js,就能最终得到一个运行在你本地浏览器的平滑的动画

第 18 段(可获 1.28 积分)

这里是只使用CSS的示例:

查看SitePoint(@SitePoint)在 CodePen上的Animating Two Images with CSS

 

播放,暂停,重启动画

Anime.js能让你使用.play(),.pause()和.restart()方法控制动画什么时候开始播放,停止和重新启动,你也可以使用.seek()方法在动画中查找一个特定的点。

例如,这里是怎样使用播放按钮控制踢球动画的代码:

//Animating the kick
var kickBall = anime({
  targets: '.kick',
  scale: 1.2,
  duration: 300,
  delay: 100,
  easing: 'easeInCubic',
  autoplay: false
});

//Animating the ball
var movingBall = anime({
  targets: '.ball',
  translateX: '70vw',
  scale: 1.5,
  easing: 'easeOutBounce',
  delay: kickBall.duration + 100,
  autoplay: false
});

/* Playing the animation 
when clicking the play button */
btnPlay.addEventListener('click', function(e) {
  e.preventDefault();
  kickBall.play();
  movingBall.play();
});
第 19 段(可获 0.91 积分)

上面的代码片段中需要注意的几点是:

  • 为了使用按钮同时控制踢的动作和球,我创建了两个独立的物体,我已经把球的动画嵌套到踢的动画里面去,但是我的经验告诉我按钮只能控制一个主动画,例如是踢的动画而不是嵌套的那个。
  • 为了防止动画在页面正在加载时运行,把autoplay(自动播放)按钮设成false是必须的。
  • 最后的一件事就是:给踢动的球和移动的球调用.play()方法,让它们像你预期那样产生动画
第 20 段(可获 1.26 积分)

查看SitePoint(@SitePoint)在 CodePen上的Anime JS with Buttons

 

尽管,使用CSS animation-play-state 属性 和一点点javascript很容易就能做到播放和暂停按钮的动画,但是一旦动画停止运行后如果你想重启你的动画,或者返回到某个时间点的动画,这就不可行了。

内联SVG的Anime.js动画

.最后一个示例说明了你怎样能使一个内联SVG图形的属性产生动画,这时候这个图形代表一只在玩耍球的可爱的猫。

示例通过在不同的路径和形状使用CSS类来构建SVG图形,这使得很容易在代码中定位它们

第 21 段(可获 1.53 积分)

这是怎样让猫的眼睛动起来的代码:

var movingEyes = anime({
  targets: ['.inner-left-eye', '.inner-right-eye'],
  cy: 400,
  duration: 500,
  delay: function(el, index) {
    var singleDelay = index === 0 ? 300 : index * 500;
    return singleDelay;
  },
  autoplay: false
});

上面的代码通过调整那个组成猫的眼睛的圆形的cy属性来降低猫眼睛的位置

如果你留意,猫眼睛已经成功的动起来了,我这样做的目的是向你们展示一种更酷的使用Anime.js错开动画的方法。delay属性可以是一个数字也可以是一个函数,当你在上面的代码中使用函数,你不得不控制你的动画的开始时间。函数告诉Anime你想产生动画的元素是否是第一个(targets数组的第一个元素),例如猫右边的眼睛,如果它是第一个动画元素,那么它就有300毫秒的延时,否则这个元素的动画相对与上一个动画将会有500毫秒的延时。

第 22 段(可获 1.86 积分)

查看SitePoint(@SitePoint)在 CodePen上的Anime JS SVG Example

SVG图形修改自Pixabay.com的原图

结论

我写下这篇文章简要地介绍了在web上如何使用动画,接下来讨论什么情况下你可以考虑使用Javascript和CSS动画,还有一个对Web动画API粗略的参考。

通过说明Anime.js的特性和在CodePen上编写简单的可工作的示例,我给你们介绍了本系列文章中的第一个动画库Anime.js。

总体上,我发现Anime.js以下几点是很有趣的:它的特性覆盖了相当多使用案例,它的语法很简单,能够让你创建出平滑优美的动画效果。

第 23 段(可获 1.48 积分)

对那些第一次接触Anime.js的人,我必须说在GitHub上的 README.md是此时唯一可用的参考文档

更多来自作者的信息

这就是说,遇到问题时你能在project’s GitHub issues section上找到一些很棒的答案,Anime.js的作者Julian Garnier似乎也密切关注维护着这些内容

同时,你也可以挖掘那些使用Anime作为动画引擎的炫目的动画的源码,这样你能了解这个动画库的更多的使用方法。

如果你已经在使用Anime.js,并且想把你的经验分享出来或者想给本系列文章推荐一些你喜爱的动画库,请点击评论框留下你的信息。

第 24 段(可获 2.25 积分)

文章评论