0513 - 888 20 117
  • 放弃使用jQuery实现动画

      在 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差不多,而且操作更方便。

分享到:
友情链接: 淬火油