不依赖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动画引擎用事实证明了这点,这里有些小技巧可以参考:
- cross-browser SVG support(跨浏览器的SVG)
- physics-based loader animations(物理加载动画)
- timeline control(时间控制)
- Bezier translations(贝塞尔渐变)
如果你对性能感兴趣,可以看看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, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP
我们不再将元素绑定为jQuery对象,那如何一个接一个地实现动画呢?
$element // jQuery 对象
.velocity({ opacity: 0.5 }, 1000)
.velocity({ opacity: 1 }, 1000);
在Velocity里,你只需一个接一个调用动画:
Velocity(element, { opacity: 0.5 }, 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, 1, { opacity: 0.5 })
.to(element, 1, { opacity: 1 });
英文原文: Animating Without jQuery
由 SegmentFault整理编译
相关 [jquery 动画] 推荐:
不依赖jQuery也能做好动画
- - SegmentFault 最新的文章使用 jQuery Easing Plugin 增强动画过渡效果
- - 我爱水煮鱼使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
- - 译言-电脑/网络/数码科技JQuery 选择器
- - CSDN博客Web前端推荐文章点击我
. 像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.点击我
. //给class为demo的元素添加行为.