博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
放弃使用jQuery实现动画
阅读量:6671 次
发布时间:2019-06-25

本文共 2474 字,大约阅读时间需要 8 分钟。

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

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

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

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

为什么要使用JavaScript?

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

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

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

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

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

提示:假设你对javascript的展示效果比較感兴趣。能够读一下Julian Shapiro的 “

”和Jack Doyle的 “.” 。假设想看一些演示。能够看看  和 “” 。

Velocity 和 GSAP

两个最经常使用的javascript动画库是  和 。这些库在使用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.  
  3. Velocity(element, {
    opacity: 0.5 }, 1000); // Velocity
  4.  
  5. TweenMax.to(element, 1, {
    opacity: 0.5 }); // GSAP

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

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

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

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

 
  1. document.getElementByID
  2.  
  3. document.getElementsByTagName
  4.  
  5. document.getElementsByClassName
  6.  
  7. document.querySelectorAll

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

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

杜绝jQuery

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

让我们看看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.  
  4. /* Animate all divs at once. */
  5. Velocity(divs, {
    opacity: 0.5 }, 1000); // Velocity
  6. 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差点儿相同,并且操作更方便。

 

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

了解前端技术。请訪问极客和

原文来自:

转载地址:http://dloxo.baihongyu.com/

你可能感兴趣的文章
Codeforces 486E LIS of Sequence(线段树+LIS)
查看>>
JavaScript与Java通信
查看>>
Java IO详解(四)------字符输入输出流
查看>>
单元测试入门学习(读 农码一生 博客)
查看>>
【Spring】15、spring mvc路径匹配原则
查看>>
orale 查询每年、每月、每日统计量的sql语句
查看>>
POJ 题目3461 Oulipo(KMP)
查看>>
ado 字符串变量
查看>>
uploadify在chrome下初始化失败,在Firefox下却可以原因探析
查看>>
Java中的数组
查看>>
怎样找对还有一半---第四章认识彼此 完全接纳
查看>>
MySql存储过程与函数
查看>>
android cannot locate symbol 'sigemptyset'问题解决
查看>>
需求分析
查看>>
9、Java并发性和多线程-线程安全与共享资源
查看>>
Python中如何调用Linux命令
查看>>
11 Python Libraries You Might Not Know
查看>>
【LeetCode-面试算法经典-Java实现】【129-Sum Root to Leaf Numbers(全部根到叶子结点组组成的数字相加)】...
查看>>
134、直接拿来用,Android界最火的开源项目
查看>>
ubuntu16.04-x64系统中Jexus web server部署.NetCore和端口分析引发的猜想!
查看>>