在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()。

比方

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

能够写成:

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

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

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

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

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

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

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

  1. document.getElementByID
  2. document.getElementsByTagName
  3. document.getElementsByClassName
  4. document.querySelectorAll

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

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

杜绝jQuery

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

让我们看看querySelectorAll的功能::

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

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

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

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

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

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

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

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

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

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

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

放弃使用jQuery实现动画的更多相关文章

  1. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  2. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  3. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  4. jQuery Easing动画效果扩展(转)

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  5. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  8. jQuery 停止动画

    jQuery stop() 方法用于在动画或效果完成前对它们进行停止. 停止滑动 点击这里,向上/向下滑动面板 实例 jQuery stop() 滑动演示 jQuery stop() 方法. jQue ...

  9. jQuery Easing 动画效果扩展

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

随机推荐

  1. java遍历泛型的方法

    一.List遍历 Java中List遍历有三种方法来遍历泛型,主要为: 1.for循环遍历 2.iterator遍历 3.foreach遍历 package com.gmail.lsgjzhuwei; ...

  2. ASP.NET MVC 阻止当前请求的视图页面缓存OutputCache

    设置缓存 [OutputCache(Duration =333,VaryByCustom ="Index")] 缓存: //在action中,临时阻止该次请求的视图页面缓存 Res ...

  3. MyEclipse安装xfire插件

    xfire因为过时,MyEclipse已经将其支,如果想用只能手动添加了. 安装步骤: 1.点击help┈┈┈→install from site出现下图 在第一栏里,输出http://dist.co ...

  4. Nubiers to follow

    VGG Andrea Vedaldi Berkeley Trevor Darrell Jeff Donahue Ross Girshick Sergio Guadarrama Stanford And ...

  5. [Leetcode] Container With Most Water ( C++)

    题目: Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, a ...

  6. 安装mysqlsla性能分析工具

    开启mysql慢查询日志 vi /etc/my.cnf slow-query-log = on  #开启MySQL慢查询功能 slow_query_log_file = /data/mysql/127 ...

  7. haproxy之负载均衡算法

    backend     blance 算法 动态hash的特点     服务器运行时就可进行权重调整,即只需要重新载入配置文件即可,不需要重新启动haproxy     支持慢速启动,即重新恢复的后端 ...

  8. ASP.NET Ajax In Action!

    创建XMLHTTPRequest 代码 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeH ...

  9. c# Parallel并行运算

    string str = ""; DataTable dt=new DataTable(); dt.Columns.Add("name", typeof(Sys ...

  10. Hibernate中3种结果转换的详细说明(转)

    Hibernate中3种结果转换的详细说明 在hibernate使用的过程中.我们通常需要对结果进行解释. Hibernate为我们提供了以下3种解释方法: Transformers.ALIAS_TO ...