不依赖jQuery也能做好动画

标签: 动画 | 发表时间:2015-01-29 15:25 | 作者:江小湖Laker
出处:http://segmentfault.com/blogs

在开发者社区中有种错误的观念——认为在web中,CSS动画是唯一高性能的动画方式。这使很多开发者放弃基于JavaScript的动画。所以导致——(1)强制使用大量样式表来完成复杂的UI交互,(2)不能很好地支持IE8、9,(3)放弃只有JS才能完成的完美物理运动效果。

事实证明:基于JavaScript的动画和基于CSS的动画一样快,甚至有时更快。CSS动画通常是和非常慢的jQuery $.animate()比较。但是,JavaScript库如果能避免像jQuery那样大量的DOM操作,性能就会非常高。这些库能比jQuery快20倍。

所以,让我们来打破一些神话,通过一些动画实例,并在此过程中提高自己的设计技巧。

为什么是JavaScript

CSS动画能方便地实现渐变效果,也不需要额外地加载库。但是它很难支持复杂的效果。代码不易管理、特性不能满足需求而导致失败。

最终CSS动画无法完成要求。但JavaScript和大多编程语言一样,支持大量的逻辑控制。JavaScript动画引擎用事实证明了这点,这里有些小技巧可以参考:

如果你对性能感兴趣,可以看看Julian Shapiro 的 “ CSS vs. JS Animation: Which Is Faster?” 和
Jack Doyle 的 “ Myth Busting: CSS Animations vs. JavaScript” 。性能的演示可参考 Velocity 的 “ performance pane” 和 GSAP 的 “ Library Speed Comparison

Velocity 和 GSAP

两个最流行的JavaScript动画库是 Velocity.jsGSAP。它们都不依赖于jQuery,使得性能提高。

假如你的网站已经用了 jQuery,那就可以像使用 jQuery 一样使用 Velocity 和 GSAP。例如: $element.animate({ opacity: 0.5 }); 就可以写成 $element.velocity({ opacity: 0.5 })

如果你没有使用 jQuery 也能使用这两个库。但是不能像绑定一系列动画到JQ元素上那样,要把元素传进动画函数里,例如:

  /* Working without jQuery */

Velocity(element, { opacity: 0.5 }, 1000); // Velocity

TweenMax.to(element, 1, { opacity: 0.5 }); // GSAP

如上所示,在没有使用JQ的情况下,Velocity 的用法和JQ一样,把目标元素写到第一个参数位置,再把其他参数依次往右写。

GSAP与此不同,采用的是面向对象的API设计,和静态方法一样方便。所以你可以完全掌控整个动画。

在这两种情况下,你不再是使用一个jQuery的动画元素对象,而是一个原始的DOM节点。你可以通过 document.getElementByIDdocument.getElementsByTagNamedocument.getElementsByClassNamedocument.querySelectorAll(和jQuery的选择器很类似)。

不使用jQuery

(注:如果你要学习基本的jQuery $.animate()的用法,可以参考Velocity文档开始的几段)

querySelectorAll是摆脱jQuery的好武器

  document.querySelectorAll("body"); // 获取body元素
document.querySelectorAll(".squares"); // 获取所有包含square类的元素
document.querySelectorAll("div"); // 获取所有div
document.querySelectorAll("#main"); // "main"获取含有id为main的元素
document.querySelectorAll("#main div"); // 获取#main里的div

如上面所示,你可以轻松地把CSS选择器传给 querySelectorAll,它会返回一个包含所有匹配元素的数组。所以,你可以这样做:

  /* 获取所有div */
var divs = document.querySelectorAll("div");

/* 给所有div加上动画 */
Velocity(divs, { opacity: 0.5 }, 1000); // Velocity
TweenMax.to(divs, 1, { opacity: 0.5 }); // GSAP

我们不再将元素绑定为jQuery对象,那如何一个接一个地实现动画呢?

  $element // jQuery 对象
    .velocity({ opacity: 0.5 }, 1000)
    .velocity({ opacity: 1 }, 1000);

在Velocity里,你只需一个接一个调用动画:

  Velocity(element, { opacity: 0.5 }, 1000);
Velocity(element, { opacity: 1 }, 1000);

这种方式没有性能缺陷。要把做动画的目标元素用变量存储起来使用,而不是每次都用querySelectorAll查找一次。

(提示:使用Velocity的包,你可以创建自己的多操作的动画,并给他们取名字,你就可以像Velocity的第一参数一样操作它。 点击这里查看更多。)

这种 one-Velocity-call-at-a-time的方式有个好处:如果你使用promises,那么Velocity每次调用后会返回一个可使用的 promise对象,这非常有用。你可以通过 Jake Archibald的文章了解更多。

GSAP面对对象的方式允许把动画排入时间线,方便调度和同步控制。这样就不局限于一个接一个的链接动画。你可以嵌套时间表、使动画重叠等。

  var tl = new TimelineMax();
/* GSAP默认使用tweens链,但你可以在时间线上指定精确的插入点,包括相对偏移 */
tl
  .to(element, 1, { opacity: 0.5 })
  .to(element, 1, { opacity: 1 });

英文原文: Animating Without jQuery
SegmentFault整理编译

相关 [jquery 动画] 推荐:

[转]jquery自定义动画animate()

- - dxh_0829的专栏
在以前很长一段时间里,网页上的各种特效还需要采用flash 在进行. 但最近几年里,我们已经很少看到这种情况了,绝大部分已经使用JavaScript 动画效果来取代flash. 说的取代是网页特效部分,而不是动画. 网页特效比如:渐变菜单、渐进显示、图片轮播等;而动画比如:故事情节广告、MV 等等.

不依赖jQuery也能做好动画

- - SegmentFault 最新的文章
在开发者社区中有种错误的观念——认为在web中,CSS动画是唯一高性能的动画方式. 这使很多开发者放弃基于JavaScript的动画. 所以导致——(1)强制使用大量样式表来完成复杂的UI交互,(2)不能很好地支持IE8、9,(3)放弃只有JS才能完成的完美物理运动效果. 事实证明:基于JavaScript的动画和基于CSS的动画一样快,甚至有时更快.

使用 jQuery Easing Plugin 增强动画过渡效果

- - 我爱水煮鱼
jQuery 提供了一些诸如 show, hide, slideUp, fadeIn 等动画方法,可以方便的切换元素的显隐. 更有强大的自定义动画方法 animate ,可以实现很多动画效果. 为了让动画有好的过渡变化过程,官方为这些方法设置 easing 属性,但是官方没有给出很多过渡效果. jquery.easing.js 这个 jQuery 插件增加了很多过渡效果,引入之后可以让动画过渡过程更加多样化.

使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效

- - 译言-电脑/网络/数码科技
在线演示1  在线演示2  本地下载. 在过去我们的文章中,我们介绍过很多不错的 时间轴插件,使用这些超棒的插件可以帮助你创建动感漂亮的时间轴展示,其中比较不错的插件如下:. 使用以上jQuery插件或者类库都可以创建漂亮的时间轴timline特效. 由于在我们的 gbtags.com社区开发中,我们需要创建一个简单实用的用户时间轴应用,这里我们选择使用Timelinr来开发,并且为了使得动画过程更加丰富和有趣我们同时使用 Animate.css来创建各种不同的CSS动画特效.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥,因为它并没有将网页内容和行为分离,所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大,虽然一直在用jquery,不用一直都没有深入,这几天重新学习了一下,不得不感叹她的强大,已经让我深深入迷. 这里记录一下,她是怎么快速地操作xml的.. 这里我们有一个xml文件:. jquery如何操作呢,总的思想,就是和操作dom差不多的方法. 首先我们获取这个文件的内容:(我先引入jquery库哈).

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候,由于使用了单点登录,所以页面会跳转到sso服务器,进行统一登录,. 现在需要在该界面增加令牌的认证,但是SSO服务器和令牌服务器部署在不同的服务器,且暂时没有要合并的可能,所以在SSO登录的时候必须要对令牌进行验证,就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种:. 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了,最近重新看了一下,看到一些不错的文章,转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快,你应该总是使用最新的版本. 因为新版本会改进性能,还有很多新功能. 下面就来看看,不同版本的jQuery性能差异有多大.

jQuery Tools:Web开发必备的 jQuery UI 库

- - 博客园_首页
jQuery Tools 是基于. jQuery 开发的网站界面库,包含网站最常用的Tabs(选项卡)、Tooltip(信息提示)、Overlay(遮罩、弹窗)、Scrollable(滚动控制)、Form Validator(表单验证)、Rangeinput(范围选择)、Dateinput(日期选择)等众多功能.