Velocity.js动画库使用

Posted 2020-10-23 web前端开发技术

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Velocity.js动画库使用相关的知识，希望对你有一定的参考价值。

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         // 移动端硬件加速（默认开启）
});