css3技术

CSS 和 JS 动画哪个更快,cssjs动画(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-12 19:02 我要评论( )

12345$element/* Slide the element down into view. */.velocity({ opacity: 1, top: "50%" })/* After a delay of 1000ms, slide the element out of view. */.velocity({ opacity: 0, top: "-50%" }, { delay: 1

1 2 3 4 5 $element     /* Slide the element down into view. */     .velocity({ opacity: 1, top: "50%" })     /* After a delay of 1000ms, slide the element out of view. */     .velocity({ opacity: 0, top: "-50%" }, { delay: 1000 });

  在上面例子中,第二个 Velocity 调用知道它应该自动从 opacity为1 和 top为50% 开始。

  浏览器本身最终能够执行许多这些相同的优化,但这样做会明显减少开发者能够制作的动画代码的方式。因此,出于同样原因,由于jQuery不使用RAF(如上所述),浏览器就不会强制优化它,甚至给出一个很小的机会去打破规格或偏离预期的行为。

  最后,我们对这两个JavaScript动画库(Velocity.js 和 GSAP)互相比较一下。

  GSAP was the first animation library to demonstrate JavaScript's impressive DOM animation performance. It does, however, have a few drawbacks:

  • In medium-to-high stress animations, GSAP's DOM interaction overhead causes dropped frames at the start of, and between, animations.

  • Whereas Velocity.js is released under the ultra-permissive MIT license, GSAP is closed-source and requires an annual licensing fee for many types of businesses.

  • Because GSAP is a full animation suite, it is triple the size of Velocity. However, since GSAP is so richly-featured, it does have the benefit of being a Swiss Army Knife of animation.

  •   My recommendation is to use GSAP when you require precise control over timing (e.g. remapping, pause/resume) and motion (e.g. bezier curve paths). These features are crucial for game development and certain niche applications, but are typically not needed in web app UI's.

     Velocity.js

      引用 GSAP 丰富的特性并不代表Velocity自身在特性上是轻量级的. 相反,在压缩后仅有的7kb中,Velocity不仅仅复制了jQuery $.animate()的所有功能, 它还把颜色动画,转换,循环,easing效果,类动画还有滚动都打包了进去.

      总之,Velocity是jQuery,jQuery UI,以及CSS渐变效果的最佳组合.

      此外,从便利的角度看,Velocity在hood(盖子,大概意思是公共的接口)之下使用jQuery的 $.queue() 方法, 如此就可以实现同 jQuery 的 $.animate(), $.fade(), 和 $.delay() 函数的无缝互操作. 而且,由于Velocity的语法同 $.animate() 的语法是相同的, 你不需要改变页面的任何代码.

      让我们快速地来看一看 Velocity.js. 在基础的层面,Velocity的行为同$.animate()一样:

    1 2 3 4 5 6 $element     .delay(1000)     /* Use Velocity to animate the element's top property over a duration of 2000ms. */     .velocity({ top: "50%" }, 2000)     /* Use a standard jQuery method to fade the element out once Velocity is done animating top. */     .fadeOut(1000);

      在其最高级的层面,可以创建带有3D动画的复杂滚动场景 — 几乎只要用到两行简单的代码:

    1 2 3 4 5 $element     /* Scroll the browser to the top of this element over a duration of 1000ms. */     .velocity("scroll", 1000)     /* Then rotate the element around its Y axis by 360 degrees. */     .velocity({ rotateY: "360deg" }, 1000);

     结束

      Velocity的目标是仍旧成为 DOM 中的动画性能和便利性的领导者。本文侧重于前者。  Head on over to  VelocityJS.org更多地了解后者。

      之前,我们得出结论,记住,一个高性能的UI并不仅仅是选择更多的Lib。你的页面的其余部分也应进行优化。可以从Google talks了解更多,更梦幻的内容:

  • Jank Free

  • Rendering Without Lumps

  • Faster Websites

  •   原文地址:


    在网页制作中,导航的效果可以用css样式、js 与 flash来实现,那种方法更利于优化?

    css/js都可以,flash就不用想了,不是说它不好,但是这东西做的导航条维护一次也太麻烦了吧,改点东西都要用flash重新编辑然后再输出上传,好麻烦。

    一般html+css就可以,javascript能不用尽量不用,html/css/javascript都是明文的,维护起来很方便,至于说兼容性,我觉得没什么问题,其实常用的浏览器就这几个,不用兼顾所有,只要兼容主流浏览器就OK了。

    html+css+js或flash+flex建站,学哪个好,现在很纠结,

    1楼过于偏激。
    固然 html+css+js的网站 绝对要比 flex网站 普及很多很多

    但是flash player的%98的安装率 也不能说 flash是不普及的

    并且flex做的网站 有很多东西是js完全做不到的 并且从感官上说flex做的比较华丽

    有人说 我们不要华丽

    那好 那你 回到从前的 没有CSS没有JS的时代去 只能看到静态网页 只有文字和图片 的时代去 那个更加不华丽

    我认为 华丽 只要做到 实用的话 越华丽越好 我认为 华丽和实用是不对立的

    并且 现在GOOGLE BAIDU啊 对FLASH比以往 要好很多了

    所以 SEO还是可以做的

    最后总结 一个正规的网站 比如政府网站 我认为必定不能用FLASH来做

    不过一些 比如 个人网站啊 商品展示网站啊 楼房展示网站啊 用FLASH来做

    是相当好的

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 用JavaScript控制CSS Animations(动画)和Transitions(过渡)

      用JavaScript控制CSS Animations(动画)和Transitions(过渡)

      2015-09-13 18:17

    • css教程css3动画下拉菜单

      css教程css3动画下拉菜单

      2015-09-13 18:00

    • CssLoad:CSS动画设计工具

      CssLoad:CSS动画设计工具

      2015-09-13 17:21

    • CSS图片翻转动画技术详解(IE也实现了)

      CSS图片翻转动画技术详解(IE也实现了)

      2015-09-13 09:16

    网友点评