为安在完成动画抛弃使用jQuery

摘要: 在 Web开发设计的社交圈里,开发设计者经常觉得CSS动漫是一种性能卓越web动漫技术性,假如想让网页页面载入的迅速一些,就应当用纯CSS动漫。实际上这类见解是不正确的, 许多开发...

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


联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 400-000-8888