189 8069 5689

怎么JavaScript中使用Velocity.js动画库-创新互联

这篇文章给大家介绍怎么JavaScript中使用Velocity.js动画库，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

创新互联公司专注于企业成都营销网站建设、网站重做改版、通许网站定制设计、自适应品牌网站建设、HTML5、商城网站建设、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为通许等各大城市提供网站开发制作服务。

JS动画的优点

既然我们大概了解了这两类动画，那么我们来分析下他们不同的优点

  1. css动画 由于css3可以根据css属性自定义动画 所以这类动画的优点就是不用进行计算和更改dom 会显得非常流畅。

  2. JS动画 js动画拥有强大的性能，并且优于css动画的特点就是 既然是根据js来改变属性值 所以没有css那样的局限性，可以实现更多的功能和动效，或许有人说js动画某些库会很慢，其实js动画本质很快，只是jquery让它慢了下来。因为有时候由于配合jquery使用，所以由于jquery本身的一些功能，所以在实现的时候就会显得很慢。

velocity.js 使用方法

JS动画的库非常多，各有各的有点，比如jquery自带的animate动画还有 webGL,或者利用canvas，SVG等实现其他效果，本次来讲的就是众多库中的其中一个 velocity.js 动画库。

velocity.js 既可以单独用JavaScript使用，也可以配合jquery使用，使用方法(注意先将velocity.js下载好后在body标签下引入，然后在新script标签中书写以下代码) ：

//jquery方法 
var $div = $('div')
$div.velocity({属性:值,属性:值})
//javascript 方法
var oDiv = document.getElementById('div')
oDiv.velocity({属性:值,属性:值})

这里需要注意得几点：

1.里面的属性不能加引号写入，而后面的值如果有字符串则加引号，如果为整数则不用 比如 width:100 和 width："100px"
2.里面的属性值不可一次传入多个，比如在css中 padding:5px 5px 6px 5px;我们可以这样传入 但是在velocity中如果想传入多个值则为 {paddingLeft：5, paddingRirght:5 省略}
3.里面的属性值 如果是多个转折的需要第二个首字母大写 如上

velocity.js 详细介绍

上面已经讲到 需要改变的值作为对象传入velocity的第一个参数，那么第二个参数就是 它的指定动画选项包含：

+ duration 持续时间
+ easing 缓动方式
+ delay 延迟执行
+ loop 循环次数
+ begin 和 complete 回调函数
+ display(值与css相同，可设置为auto)

在讲velocity指定动画选项前 我们先说一下velocity支持的值: px em rem % vm vh 或者 利用运算符 *=2 表示当前值的2倍 或者 /=2 等运算方式

下面一个一个分析下指定动画选项：

duration 持续时间

这个是代表动画的持续时间默认值为毫秒(ms) 你可以这样使用：

// 表示一秒内将透明度从1到0
$div.velocity({opacity:0},{duration:1000})

也可以这样使用:

// 效果相同
$div.velocity({opacity:0},1000)

velocity也自定了三种持续方式：slow（600ms) ,normal（400ms）,fast(200ms),可根据自己实际需求使用

easing 缓动方式

这个是代表着动画以何种方式进行变换：ease-in-out(逐加逐减),ease-in (先加速后匀速),dase-out (先匀速后减速)

也可以根据 三角函数缓动 "easeInOutSine" ，css贝塞尔曲线[0.17,0.67,0.83,0.67] 或者弹簧物理 [张力，摩擦力] 等值进行实现

delay 延迟执行

表示这个动画延迟多少时间执行 默认单位毫秒(ms)

// 五秒后执行此动画
delay：5000

loop 循环次数

表示这个动画需要的循环次数:

// 循环五次
loop:5
// 无限循环
loop:true

begin和complete回调函数

这两个表示在动画开始前和动画结束后所执行的函数：

begin:function(){ somgthing... },complete:function(){ somgthing... }

其他功能：

velocity还有一些其他功能，这里就日后再说，比如：reverse(反转)，scrolling(滚动)，color(颜色)，transform(变换 包含scale缩放 rotate旋转 translation平移等)

关于怎么JavaScript中使用Velocity.js动画库就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文名称：怎么JavaScript中使用Velocity.js动画库-创新互联
标题路径：http://cdxtjz.cn/article/cccees.html

其他资讯