一个高性能js动画库velocityj

一、为什么是velocity不是jquery

时下,如何快速制作js动效,许多人可能会首先想到使用jquery。jquery的就是如此流行。使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻,简单易用,高效开发。但要知道jquery动画性能并不是最优的。因为jquery想要实现的目标太多,动画性能上就不可避免做出妥协。因此要制作高性能js动画,可能不得不放弃jquery,转而使用原生js制作动画。那有没有一种js高性能动效库,既像jquery一样简单易用,动画又高性能?这就是velocity.js动画库了。

二、velocity的优点

1、Velocity是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和jQuery完美协作,并和$.animate()有相同的API,但它不依赖jQuery,可单独使用。Velocity不仅包含了$.animate()的全部功能,还拥有:颜色动画、转换动画(transforms)、循环、缓动、SVG动画、和滚动动画等特色功能。2.也有几十种类似animate.css的预定义动画api3.支持自定义动效,拼装队列动效等等4.动画回调比如BeginCompleteProgress回调函数

三、velocity的使用

1、velocity的引入

可以使用script标签引入

scriptsrc=../lib/velocity.min.js/script

也可以通过npm安装

npminstallvelocity-animate

2、Velocity语法

Velocity使用和jquery相同的语法。换句话说,如果你熟悉jquery的animate()函数,那么你只需把animate()语法套用在velocity()就行。

Jquery:

$(选择器).animate();

Velocity:

$(选择器).velocity();

Velocity参数用法

$element.velocity({

width:px,//动画属性宽度到px的动画

property2:value2//属性示例

},{

/*Velocity动画配置项的默认值*/

duration:,//动画执行时间

easing:swing,//缓动效果

queue:,//队列

begin:undefined,//动画开始时的回调函数

progress:undefined,//动画执行中的回调函数(该函数会随着动画执行被不断触发)




转载请注明:http://www.aierlanlan.com/cyrz/3150.html