欢迎您访问我爱IT技术网，今天小编为你分享的电脑教程是建站经验系列之：【放弃使用jQuery实现动画】，下面是详细的分享！
放弃使用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的时候使用：
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的选择。它会在数组中返回所有匹配的元素：
var divs=document.querySelectorAll("div");
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中，你可以像这样简化你的代码：
Velocity(element,{ opacity:0.5},1000);
Velocity(element,{ opacity:1},1000);
这样来处理动画就不会存在性能上的浪费。你会发现它javascript的性能真的和CSS差不多，而且操作更方便。
极客标签 - 专业和精准的分享，关注你感兴趣的极客，社区提供超棒的精品教程，互动授课
了解前端技术，请访问极客互动课程库和代码录播
以上所分享的是关于放弃使用jQuery实现动画，下面是编辑为你推荐的有价值的用户互动：
相关问题：JQUERY中的animate动画效果，可以两种一起实现吗
答：$(this).find(".gtt").stop().animate({bottom:'0px',opacity:"show"},'fast');opacity的值也可以是一个百分值，比如 opacity:"0.5" 就是透明度为0.5这种问题，应该学会用搜索引擎，百度“animate 透明度”就能出来答案，来这里问效率低下。 >>详细
相关问题：jQuery如何实现动画的循环？
答：可以建个时间器,每2秒运行： $(document).ready(function(){ setTimeout(function () { abc(); }, 2000) }); function abc() { .animate({top:"-=20px"},2247) .animate({top:"+=20px"},2247) .animate({left:"-=20px"},2247) .animate({left:"+... >>详细
相关问题：jquery怎样实现动画的缩小？
答：jQuery animate() - 操作多个属性。注意，生成动画的过程中可同时使用多个属性。 jQuery animate() - 使用相对值。也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上-=。 jQuery animate() - 使用预定义的值。把属性的动画值设置... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-