1、简介

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。

2、兼容性

可兼容到 IE8 和 Android 2.3。

若需要兼容 IE8，就必须引入 jQuery 1.x

3、示例代码(注意文件引用路径)

（1）index.html

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <link rel="stylesheet" type="text/css" href="css/style.css" />

        <title>velocity.js使用</title>

    </head>

    <body>

        <div class="box" id="div1">

        </div>

        <div class="box" id="div2">

        </div>

        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script>

        <!--velocity.ui 在 velocity 之后加载-->

        <script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script>

        <script src="js/index.js" type="text/javascript" charset="utf-8"></script>

    </body>

</html>

（2）style.css

.box{

    width: 100px;

    height: 100px;

    background-color: pink;

}

(3)index.js

(function($) {

    //    $('#div1').velocity({

    //        width: '300px'

    //    }, {

    //        //动画时长

    //        duration: 3000,

    //        //动画执行完后执行的回调

    //        complete: function() {

    //            $('#div2').velocity({

    //                width: '300px'

    //            }, {

    //                duration: 3000

    //            })

    //        }

    //    });

    //动画序列

//    var seq = [{

//            elements: $('#div1'),

//            properties: {

//                width: '300px'

//            },

//            options: {

//                durations: 1000

//            }

//        },

//        {

//            elements: $('#div2'),

//            properties: {

//                width: '300px'

//            },

//            options: {

//                durations: 1000

//            }

//        }

//    ];

//    $.Velocity.RunSequence(seq);

//预定义动画

$('#div1').on('mouseover',function(){

    $(this).velocity('callout.shake')

});

})(jQuery);

4、使用

（1）参数配置：

$element.velocity({

    properties: { opacity: 1 },

    options: { duration: 500 }

});

// 或者：

$element.velocity({

    p: { opacity: 1 }, // 可以将 properties 简写成 p

    o: { duration: 500 }

});

基础配置：

$element.velocity({

    width: "500px",        // 动画属性 宽度到 "500px" 的动画

    properties: value2      // 属性示例

}, {

    /* Velocity 动画配置项的默认值 */

    duration: 400,         // 动画执行时间

    easing: "swing",       // 缓动效果

    queue: "",             // 队列

    begin: undefined,      // 动画开始时的回调函数

    progress: undefined,   // 动画执行中的回调函数（该函数会随着动画执行被不断触发）

    complete: undefined,   // 动画结束时的回调函数

    display: undefined,    // 动画结束时设置元素的 css display 属性

    visibility: undefined, // 动画结束时设置元素的 css visibility 属性

    loop: false,           // 循环

    delay: false,          // 延迟

    mobileHA: true         // 移动端硬件加速（默认开启）

});

（2）Complete属性

complete为动画结束时的回调函数，在无限循环模式下（设置loop: true） 该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3） 该回调函数 将只会在最后一次循环结束后 执行一次。

（3）delay属性

和 jQuery 的$.delay()方法一样，动画将会延迟所设定的毫秒后执行。

（4）支持SVG动画

（5）velocity.ui.js 

velocity.ui.js 是 velocity.js 的 动画插件（1.8 KB ZIP’ed） 我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js。

elocity.ui 有2个重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允许你将多个 Velocity 动画合并存储到一个自定义数组里，你可以通过引用该数组的名称 在项目中复用， 后者能帮你改进嵌套的动画序列 使得更易于管理。

Velocity.ui.js 内置了很多常用的动画特效，分为 callout.* 和 transition.* 两类。

Velocity.js动画库使用的更多相关文章

  1. 聊聊JS动画库:Velocity.js

    前言 又到了炎热的7月,很久没有更新技术文章了,原因是上月月底实习结束,从公司离职.然后最近在弄自己的项目和考驾照,为了下次公司的应聘做准备,送别了女朋友到外地,哩哩啦啦半个月把一切事情都办妥后,还是 ...

  2. 推荐 11 个好用的 JS 动画库

    为了保证的可读性,本文采用意译而非直译. 1.Three.js 超过46K的星星,这个流行的库提供了非常多的3D显示功能,以一种直观的方式使用 WebGL.这个库提供了<canvas>. ...

  3. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  4. Jwalk发布——一个比较小的Js动画库

    断断续续折腾了几个晚上终于于周日把Jwalk发布了,顺便用了下yahoo的前端框架-pure css ,很简洁,非常帅.推荐使用以下. 下面说下Jwalk是做什么的: 前端开发过程中经常会用到一些动画 ...

  5. TweenJS----前端常用的js动画库，缓动画和复制动画的制作，效果非常好。

    TweenJS类库主要用来调整和动画HTML5和Javascript属性,提供了简单并且强大的tweening接口. http://www.createjs.cc/tweenjs/ http://ww ...

  6. Vue中Js动画 与Velocity.js 多组件多元素 列表过渡

    Vue提供我们很多js动画钩子 写在tansition标签内部 入场动画 @before-enter="" 处理函数收到一个参数(e l) el为这个元素 @enter=" ...

  7. 前端笔记之移动端&响应式（上）媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  8. Velocity.js的使用

    前面的话 Velocity是一款优秀的JS动画库,完全可以作为jQuery的animate的替代品.需要动画功能时,使用Velocity是一个好选择.本文将详细介绍Velocity.js的使用 概述 ...

  9. vue里面使用Velocity.js

    英文文档:http://velocityjs.org/ https://github.com/julianshapiro/velocity 中文手册(教程):http://www.mrfront.co ...

随机推荐

  1. KnockJs 绑定语法

    按照汤姆大叔的教程,学习了KnockJs相关知识,练习一下KnockoutJs的绑定语法. 相关的教程大家可以去看 汤姆大叔的博客. 练习代码下载 由于没有环境,代码直接用记事本写的,可能比较乱,仅作 ...

  2. 杭电oj2022-2030

    2022 海选女主角 #include <stdio.h> #include <math.h> int main(){ ][]; int n,m,x,y,z,i,j; whil ...

  3. openGL深度缓冲区问题

    http://zhidao.baidu.com/question/368299839.html&__bd_tkn__=6aa9196c746cd3357f1eec74aeb127b395029 ...

  4. 明远智睿IMX6Q Android4.4.2移植USBWIFI(RTL8188EUS)

    移植过程中得到网友的不少帮助,很感谢!为了让更多的网友不像我这样折腾,特写此文以做参照.过程中主要参考< Realtek_Wi-Fi_SDK_for_Android_KK_4_4.pdf > ...

  5. Error:Execution failed for task ':app:transformClassesWithDexForDebug'. > com.android.build.api.transform.TransformException: com.android.ide.common.process.ProcessException: java.util.concurrent.Exec

    Error:Execution failed for task ':app:transformClassesWithDexForDebug'.> com.android.build.api.tr ...

  6. 初学springMVC的拦截器

    springMvc拦截器的执行顺序! 拦截器的各个方法的作用: /** * 登录验证拦截器 */      public class Intercepter implements HandlerInt ...

  7. Hashmap与Hashtable的区别及Hashmap的原理

    Hashtable和HashMap有几个主要的不同:线程安全以及速度.仅在你需要完全的线程安全的时候使用Hashtable,而如果你使用Java 5或以上的话,请使用ConcurrentHashMap ...

  8. CSS控制图片显示区域

    优化页面响应速度,减少页面向服务端请求图片次数,有时候可能会将多个小图合并到一张图中,用的时候通过css控制显示的区域,比如:上传一张人物图片到服务器检测人脸,最后在页面上列出所有识别出来的人脸,实现 ...

  9. springboot webapi 支持跨域 CORS

    1.创建corsConfig 配置文件 @Configuration public class corsConfig { @Autowired varModel varModel_; @Bean pu ...

  10. (28)C#委托,匿名函数,lambda表达式,事件

    一.委托 委托是一种用于封装命名和匿名方法的引用类型. 把方法当参数,传给另一个方法(这么说好理解,但实际上方法不能当参数,传入的是委托类型),委托是一种引用类型,委托里包含很多方法的引用 创建的方法 ...