velocity.js学习（一）

来源：互联网发布：java ee圣思园教程编辑：程序博客网时间：2024/06/03 10:29

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');});

其中es716.pulse是自己对动画的命名，$(this).velocity('es716.pulse')是对动画的调用；[{scaleX:[ 1.1, 1 ]},0.5]的1.1是动画结束状态，1是动画开始状态，0.5是动画执行时间所占defaultDuration中的比例。

ps：如有错误，欢迎指正。

1 0