放弃使用jQuery实现动画

2022-08-08 07:44:59

在Web开发的圈子里，开发人员经常觉得CSS动画是一种高性能web动画技术。假设想让网页载入的更快一些，就应该用纯CSS动画。事实上这样的观点是错误的，非常多开发人员早就放弃了javascript的动画。迫使自己使用复杂的CSS样式来实现同样效果的UI交互。

他们全然忽视了javascript带来的更好的交互性。

但事实是基于javascript的动画效果通常和基于css的动画一样快。有些甚至更快一些。CSS动画通常被认为比較快。由于我们总是拿它和jQuery动画相比，事实上慢的是jQuery的$.animate()，然而javascript的动画库避免了DOM操作。经常比jQuery快20倍左右。

所以，让我们一起粉碎那个谣言，写一些真实的样例，来评估一下javascript动画的性能。

为什么要使用JavaScript?

把属性转换到样式中的时候用CSS很方便，并且在不使用其他库的情况下。它们也能提供出色的表现。

可是当你使用CSS来实现复杂的设计时，它们变的很麻烦。

总而言之，CSS一定会限制你的设计。可是假设你使用javascript。就能够从逻辑上解决这些问题。

javascript的动画引擎提供例如以下功能：

跨浏览器的 SVG 支持
基于物理学的动画载入
时间轴控制,
Bezier translations

提示：假设你对javascript的展示效果比較感兴趣。能够读一下Julian Shapiro的 “CSS vs. JS Animation: Which Is Faster?

”和Jack Doyle的 “Myth
Busting: CSS Animations vs. JavaScript.” 。假设想看一些演示。能够看看 performance pane 和 “Library Speed Comparison” 。

Velocity 和 GSAP

两个最经常使用的javascript动画库是 Velocity.js 和 GSAP。这些库在使用jQuery的时候并没有性能损耗，由于它们都没有使用jQuery的动画栈。

假设你在页面中必须使用jQuery，你能够用Velocity和GSAP来取代你的jQuery $.animate()。

比方



$element.animate({ opacity: 0.5 });

能够写成：



$element.velocity({ opacity: 0.5 }).

这两个库也当然也能够在没有jQuery的时候使用：




/* Working without jQuery */
Velocity(element, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP

像上面的样例一样。即全不使用jQuery，Velocity也保留了和jQuery的$.animate()类似的语法。

GSAP和它相反，通过面向对象的设计，更方便了对静态方法的调用。

你能够对动画进行全面的控制。

在这两种解决方式中，你都不会用到jQuery的对象元素，可是假设是要操作原始的DOM结点呢？你能够通过




document.getElementByID
document.getElementsByTagName
document.getElementsByClassName
document.querySelectorAll

这些类似于jQuery’s selector的实现。

以下我们会对这些方法进行简单的介绍。

杜绝jQuery

提示：假设你须要了解jQuery的$.animate()。能够看看 Velocity’s documentation.。

让我们看看querySelectorAll的功能：:




document.querySelectorAll("body"); // Get the body element
document.querySelectorAll(".squares"); // Get all elements with the "square" class
document.querySelectorAll("div"); // Get all divs
document.querySelectorAll("#main"); // Get the element with an id of "main"
document.querySelectorAll("#main div"); // Get the divs contained by "main"

向代码展示的一样，你能够通过querySelectorAll简单的进行对CSS的选择。它会在数组中返回全部匹配的元素：




/* Get all div elements. */
var divs = document.querySelectorAll("div");
/* Animate all divs at once. */
Velocity(divs, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP

由于我们没有使用jQuery的对象元素，你可能会好奇我们应该怎么把动画链接起来。事实上我们能够这样做：




$element // jQuery element object
.velocity({ opacity: 0.5 }, 1000)
.velocity({ opacity: 1 }, 1000);

在 Velocity中。你能够像这样简化你的代码：




/* These animations automatically chain onto one another. */
Velocity(element, { opacity: 0.5 }, 1000);
Velocity(element, { opacity: 1 }, 1000);

这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和CSS差点儿相同，并且操作更方便。

极客标签 - 专业和精准的分享，关注你感兴趣的极客，社区提供超棒的精品教程，互动授课

了解前端技术。请訪问极客互动课程库和代码录播

原文来自：放弃使用jQuery实现动画

码农公寓

为什么要使用JavaScript?

Velocity 和 GSAP

杜绝jQuery

相关文章