Velocity.js动画库使用

窦涵忍

2023-12-01

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.* 两类。

更多专业前端知识，请上【猿2048】www.mk2048.com

Velocity.js动画库使用

相关阅读

相关文章

相关问答

相关文档