注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】放弃使用jQuery实现动画  

2015-03-12 23:36:26|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自路过心上《放弃使用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

Velocity 和 GSAP

两个最常用的javascript动画库是 Velocity.js 和 GSAP。这些库在使用jQuery的时候并没有性能损耗,因为它们都没有使用jQuery的动画栈。

如果你在页面中必须使用jQuery,你可以用Velocity和GSAP来代替你的jQuery $.animate()。比如

$element.animate({ opacity: 0.5 });  可以写成 $element.velocity({ opacity: 0.5 })


http://www.gbtags.com/gb/share/3868.htm

欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
  评论这张
 
阅读(33)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017