velocity.js学习（一）

最新推荐文章于 2024-08-20 10:05:13 发布

es716

最新推荐文章于 2024-08-20 10:05:13 发布

阅读量927

点赞数 1

分类专栏：前端文章标签： velocity web动画

本文链接：https://blog.csdn.net/MLeeM/article/details/50470377

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

velocity.js简介：

是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度。在浏览器兼容性方便和移动端性能方面做了优化。

下载地址：

https://github.com/julianshapiro/velocity

官网地址：

http://www.julian.com/research/velocity/
官网地址下面有其使用方法。

简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>velocity动画</title>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/velocity.js"></script>
    <script type="text/javascript" src="js/velocity.ui.js"></script>
    <style type="text/css">
    *{margin:0px;padding:0px;}
    #div1,#div2 {
        width:200px;
        height:100px;
        background-color:#999;
    }
    </style>
</head>
<body>
    <div id="div1">
    </div>
    <div id="div2">
    </div>
    <script type="text/javascript">
    $("#div1").velocity({
        //动画属性
        width:'600px'
    },{
        //动画执行时间
        duration:1000,
        //完成后执行
        complete:function(){
            $("#div2").velocity({
                width:'600px'
            },{
                duration:1000
            });
        }
    });
    </script>
</body>
</html>

说明：

上面的代码完成了在载入网页时，div1的动画完成后，div2才会有动画效果。
但是上述中的js代码可读性较差，所以可以修改成下面这样（只修改js代码）：

var seq=[{
    elements: $('#div1'),
    properties: {width:'600px'},
    option: {duration:1000}
},{
    elements: $('#div2'),
    properties: {width:'600px'},
    option: {
        duration:1000,
        //sequenceQueue:false
    }
}];
$.Velocity.RunSequence(seq);

这样的话，代码就变的容易看懂了。
其中sequenceQueue:false可以是动画同上个动画同时执行，不影响下面动画执行效果。
另外，velocity.js中还提供了写好的动画效果，例如将上述js修改成下面这样：

$("#div1").on('mouseover',function(e){
$(this).velocity('callout.shake');
});

其中callout.shake就是velocity自带的动画样式了

velocity自带样式

自建动画样式：

如果在上述动画效果中没有自己想要的，那么可以自己编写动画样式，js代码如下：

$.Velocity.RegisterEffect('es716.pulse',{
    defaultDuration: 300,
    calls: [
        [{scaleX:[ 1.1,   1 ]},0.5],
        [{scaleX:[   1, 1.1 ]},0.5]
    ]
})
$("#div2").on('mouseover',function(e){
    $(this).velocity('es716.pulse');
});