怎么JavaScript中使用Velocity.js动画库

　　介绍

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

<强> js动画的优点

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

<李>

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

<李>

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

<强>速度。js使用方法

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

速度。js既可以单独用JavaScript使用,也可以配合jquery使用,使用方法(注意先将velocity.js下载好后在身体标签下引入,然后在新脚本标签中书写以下代码):

//jquery方法, 　　var  div 美元;美元=,(& # 39;div # 39;) 　　美元div.velocity({属性:值,属性:值})//javascript 方法 　　var  oDiv =, . getelementbyid (& # 39; div # 39;) 　　oDiv.velocity({属性:值,属性:值})

这里需要注意得几点:

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

<强>速度。js详细介绍

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

+时间持续时间
+宽松缓动方式
+延迟延迟执行
+循环循环次数
+开始和完成回调函数
+显示(值与css相同,可设置为汽车)

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

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

<强>时间持续时间

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

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

也可以这样使用:

//,效果相同 　　div.velocity美元({不透明度:0},1000)

速度也自定了三种持续方式:缓慢(600毫秒),正常(400毫秒),快(200毫秒),可根据自己实际需求使用

<强>宽松缓动方式

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

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

<强>推迟延迟执行

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

//,五秒后执行此动画 　　延迟:5000

<强>循环循环次数

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

//,循环五次 　　循环:5//,无限循环 　　循环:真

<强>开始和完成回调函数

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

开始:函数(){,somgthing…},完成:函数(){,somgthing…}

<强>其他功能:

速度还有一些其他功能,这里就日后再说,比如:反向(反转),滚动(滚动),颜色(颜色),变换(变换包含规模缩放旋转旋转翻译平移等)

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

怎么JavaScript中使用Velocity.js动画库