前言
最近要实现一个类似文字波浪线的效果，使用了velocity-ui这个动画库,第一个感觉就是使用简单，代码量少,性能优异,在此简单介绍一下使用方法，并实现一个看上去不错的动画.
方法可以点击这里
基本使用
要使用 velocity-ui 需要先引入velocity,其中velocity可以是依赖jquery,也可以不依赖jquery，具体看一下下面就行了
可以看出在使用jquery时,velocity的基本使用就像jquery的animate,引入 velocity-ui 的
目的就是提供一些已经定义好的动画(指令),有一点像Animate.css这样的动画库,但是可以提供
更细致的控制,
基本配置项
属性 宽度到 "500px" 的动画
property2: value2 // 属性示例
},{
/* Velocity 动画配置项的默认值 */
duration: 400,// 动画执行时间
easing: "swing",// 缓动效果
queue: "",// 队列
begin: undefined,// 动画开始时的回调函数
progress: undefined,// 动画执行中的回调函数（该函数会随着动画执行被不断触发）
complete: undefined,// 动画结束时的回调函数
display: undefined,// 动画结束时设置元素的 css display 属性
visibility: undefined,// 动画结束时设置元素的 css visibility 属性
loop: false,// 循环
delay: false,// 延迟
mobileHA: true // 移动端硬件加速（默认开启）
});
width: ["500px","300px"]//这样设置后面的300px会作为初始默认值
width: ["500px","spring"，"300px"]//这样可以为单个属性指定缓动函数
width: function (index,total) {}//对集合对象可以设置不同的属性值
可以看出velocity也可以设置quequ,使用和animate是一致的,而且velocity自身提供一些指令来实现动画,有fadeIn/fadeOut,slideUp/slideDown,
scroll,finish,reverse,除此以外velocity实现了对transform,color这些属性动画的支持,并支持SVG和promise,具体使用可以看上面链接的文档。
velocity-ui 除了提供更多的指令外,还提供了两个方法 RunSequence 和 RegisterEffect(非jquery可以去掉$.,把jquery换为原生DOM)
显示了它们的执行顺序
var mySequence = [
{ e: $element1,p: { translateX: 100 },o: { duration: 1000 } },{ e: $element2,p: { translateX: 200 },{ e: $element3,p: { translateX: 300 },o: { duration: 1000 } }
];
// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name,{
defaultDuration: duration,calls: [
[ { property: value },durationPercentage,{ options } ],[ { property: value },{ options } ]
],reset: { property: value,property: value }
});
stagger 可以让集合对象依次错开一段时间执行动画
drag 可以让集合对象的最后一个元素有缓冲效果
backwards 可以让集合对象从最后一个元素往前依次错开一段时间执行动画
下面就利用 RegisterEffect 和 stagger 实现一个简单的文字动画
实现一个自定义动画