zoukankan      html  css  js  c++  java
  • JQuery动画插件Velocity.js发布:更快的动画切换速度

     5月3日,Julian在其GitHub上发布了Velocity.js。Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。Velocity.js只有7k的大小,它不仅包含了$.animate()的所有功能,并且还包含了颜色切换、转换(transform)、循环、缓动、CSS切换、Scroll功能,它是jQuery、 jQuery UICSS变换 在动画方面的最佳组合。Velocity.js支持IE8+、Chrome、Firefox等浏览器,并支持Andriod以及IOS。Velocity.js在内部实现中使用了jQuery的$.queue()方法,因此它比 jQuery的$.animate()、$.fade()、$.delay()方法更加流畅,其性能也高于CSS的animation属性,具体原理读者可以参考这篇文章

      Velocity.js包含两个输入参数,第一个参数用于规定产生的动画效果,第二个参数为可选参数,用于规定动画的额外选项。具体如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $("div").velocity({
        property1: value1,
        property2: value2
    }, {
        /* Default options */
        duration: 400,
        easing: "swing",
        queue: "",
        complete: null,
        loop: false,
        delay: false,
        display: false,
        mobileHA: true
    });

      Velocity.js同样支持jQuery的参数简写语法:$element.velocity(propertyMap [, duration] [, easing] [, complete]):,比如:

    1
    2
    3
    $("div").velocity({ left: 100 }, 1000);
    $("div").velocity({ left: 100 }, 1000, "swing");
    $("div").velocity({ left: 100 }, "swing");

      Velocity.js官方宣传Velocity的目标是成为DOM中动画切换方面的领导者。读者可以从这里下载最新版本的Velocity.js,由于Velocity.js的方法签名和$.animate()一样,因此只需将方法名从animate改为velocity即可。在其官方网站给出了几个绚丽的Demo,读者可以参考学习。

     参考文档

    1. http://julian.com/research/velocity/
    2. http://davidwalsh.name/css-js-animation
    3. https://news.ycombinator.com/item?id=7663775
  • 相关阅读:
    扩展VirtualBox虚拟机磁盘容量
    Java实现莱布尼兹问题
    Java实现子序列问题
    Java实现子序列问题
    Java实现子序列问题
    Java实现子序列问题
    Java实现子序列问题
    第九届蓝桥杯JavaC组省赛真题
    第九届蓝桥杯JavaC组省赛真题
    第九届蓝桥杯JavaC组省赛真题
  • 原文地址:https://www.cnblogs.com/ranzige/p/3718867.html
Copyright © 2011-2022 走看看