不依赖jQuery也能做好动画

在开发者社区中有种错误的观念——认为在web中，CSS动画是唯一高性能的动画方式。这使很多开发者放弃基于JavaScript的动画。所以导致——（1）强制使用大量样式表来完成复杂的UI交互，（2）不能很好地支持IE8、9，（3）放弃只有JS才能完成的完美物理运动效果。

事实证明：基于JavaScript的动画和基于CSS的动画一样快，甚至有时更快。CSS动画通常是和非常慢的jQuery $.animate()比较。但是，JavaScript库如果能避免像jQuery那样大量的DOM操作，性能就会非常高。这些库能比jQuery快20倍。

所以，让我们来打破一些神话，通过一些动画实例，并在此过程中提高自己的设计技巧。

为什么是JavaScript

CSS动画能方便地实现渐变效果，也不需要额外地加载库。但是它很难支持复杂的效果。代码不易管理、特性不能满足需求而导致失败。

最终CSS动画无法完成要求。但JavaScript和大多编程语言一样，支持大量的逻辑控制。JavaScript动画引擎用事实证明了这点，这里有些小技巧可以参考：

如果你对性能感兴趣，可以看看Julian Shapiro 的 “CSS vs. JS Animation: Which Is Faster?” 和
Jack Doyle 的 “Myth Busting: CSS Animations vs. JavaScript” 。性能的演示可参考 VeLocity 的 “performance pane” 和 GSAP 的 “Library Speed Comparison

VeLocity 和 GSAP

两个最流行的JavaScript动画库是Velocity.js 和 GSAP。它们都不依赖于jQuery，使得性能提高。

假如你的网站已经用了 jQuery，那就可以像使用 jQuery 一样使用 VeLocity 和 GSAP。例如： $element.animate({ opacity: 0.5 }); 就可以写成 $element.veLocity({ opacity: 0.5 })。

如果你没有使用 jQuery 也能使用这两个库。但是不能像绑定一系列动画到JQ元素上那样，要把元素传进动画函数里，例如：

/* Working without jQuery */

VeLocity(element,{ opacity: 0.5 },1000); // VeLocity

TweenMax.to(element,1,{ opacity: 0.5 }); // GSAP

如上所示，在没有使用JQ的情况下，VeLocity 的用法和JQ一样，把目标元素写到第一个参数位置，再把其他参数依次往右写。

GSAP与此不同，采用的是面向对象的API设计，和静态方法一样方便。所以你可以完全掌控整个动画。

在这两种情况下，你不再是使用一个jQuery的动画元素对象，而是一个原始的DOM节点。你可以通过document.getElementByID、document.getElementsByTagName、 document.getElementsByClassName 和 document.querySelectorAll（和jQuery的选择器很类似）。

不使用jQuery

（注：如果你要学习基本的jQuery $.animate()的用法，可以参考VeLocity文档开始的几段）

querySelectorAll是摆脱jQuery的好武器

document.querySelectorAll("body"); // 获取body元素
document.querySelectorAll(".squares"); // 获取所有包含square类的元素
document.querySelectorAll("div"); // 获取所有div
document.querySelectorAll("#main"); // "main"获取含有id为main的元素
document.querySelectorAll("#main div"); // 获取#main里的div

如上面所示，你可以轻松地把CSS选择器传给querySelectorAll，它会返回一个包含所有匹配元素的数组。所以，你可以这样做：

/* 获取所有div */
var divs = document.querySelectorAll("div");

/* 给所有div加上动画 */
VeLocity(divs,1000); // VeLocity
TweenMax.to(divs,{ opacity: 0.5 }); // GSAP

我们不再将元素绑定为jQuery对象，那如何一个接一个地实现动画呢？

$element // jQuery 对象
    .veLocity({ opacity: 0.5 },1000)
    .veLocity({ opacity: 1 },1000);

在VeLocity里，你只需一个接一个调用动画：

VeLocity(element,1000);
VeLocity(element,{ opacity: 1 },1000);

这种方式没有性能缺陷。要把做动画的目标元素用变量存储起来使用，而不是每次都用querySelectorAll查找一次。

（提示：使用VeLocity的包，你可以创建自己的多操作的动画，并给他们取名字，你就可以像VeLocity的第一参数一样操作它。点击这里查看更多。）

这种one-VeLocity-call-at-a-time的方式有个好处：如果你使用promises，那么VeLocity每次调用后会返回一个可使用的promise对象，这非常有用。你可以通过Jake Archibald的文章了解更多。

GSAP面对对象的方式允许把动画排入时间线，方便调度和同步控制。这样就不局限于一个接一个的链接动画。你可以嵌套时间表、使动画重叠等。

var tl = new TimelineMax();
/* GSAP默认使用tweens链，但你可以在时间线上指定精确的插入点，包括相对偏移 */
tl
  .to(element,{ opacity: 0.5 })
  .to(element,{ opacity: 1 });

英文原文：Animating Without jQuery
由SegmentFault整理编译

不依赖jQuery也能做好动画

为什么是JavaScript

VeLocity 和 GSAP

不使用jQuery

相关推荐