前言
最近要实现一个类似文字波浪线的效果，使用了velocity-ui这个动画库,第一个感觉就是使用简单，代码量少,性能优异,在此简单介绍一下使用方法，并实现一个看上去不错的动画.
基本使用
要使用 velocity-ui 需要先引入velocity,其中velocity可以是依赖jquery,也可以不依赖jquery，具体看一下下面就行了
我要评论
//不依赖jquery，第一个参数为原生js的dom选择器
velocity(document.getelementbyid("dummy"), {
opacity: 0.5
}, {
duration: 1000
});
// 使用 jquery 或 zepto 时
$("#dummy").velocity({
opacity: 0.5
}, {
duration: 1000
});
可以看出在使用jquery时,velocity的基本使用就像jquery的animate,引入 velocity-ui 的
目的就是提供一些已经定义好的动画(指令),有一点像animate.css这样的动画库,但是可以提供
更细致的控制,
基本配置项
$element.velocity({
width: "500px", // 动画属性 宽度到 "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 }, o: { duration: 1000 } },
{ 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 }, durationpercentage, { options } ]
],
reset: { property: value, property: value }
});
除了以上两个函数外,还提供了3个额外的options属性
stagger 可以让集合对象依次错开一段时间执行动画
drag 可以让集合对象的最后一个元素有缓冲效果
backwards 可以让集合对象从最后一个元素往前依次错开一段时间执行动画
下面就利用 registereffect 和 stagger 实现一个简单的文字动画
实现一个自定义动画
<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="renderer" content="webkit">
<title>document</title>
</head>
<body>
<h1 id="j_text">segmentfault</h1>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.min.js"></script>
<script src="https://cdn.bootcss.com/velocity/1.5.1/velocity.ui.min.js"></script>
<script>
jquery(function ($) {
$.velocity.registereffect('custom', {//注册一个叫'custom'自定义动画
defaultduration: 1500,
calls:[
[{
rotatey: 360,
translatey: '-=15',
}, 0.5],
[{
translatey: '+=15',
}, 0.5]
],
})
$('#j_text').css({
fontsize: 40,
color: '#333',
}) .html(function () {
return $(this).text().split('').map(function (char) {
return '<span>' + char + '</span>'; //让每字符被span元素包裹
}).join('');
}).find('span')
.filter(function (index) {
return index > 6
}).css('color', '#009a63').end() //让后面几个字符变为绿色
.css({
position: 'absolute',
left: function (index) {
return index * 20; //设置字符的间隔
}
})
.velocity('custom', { //调用自定义的动画指令
stagger: 300,
delay: 1000,
})
})
</script>
</body>
</html>
除去一些字符的操作,可以看出实现一个看似复杂的动画只需简单设置calls 和stagger属性的值就可以了,这个gif在循环播放那个动画,实际上这个动画只执行了一次，大家可以思考一下怎么实现整个队列的循环
最后
velocity内部由于对动画方面进行了优化，所以性能方面比jquery的animate要好，甚至比css的transition还要出色,当然这个我没有测试过，大家可以测试一下。
总结
以上所述是小编给大家介绍的使用veloticy-ui生成文字动画效果，希望对大家有所帮助
如对本文有疑问， 点击进行留言回复！！
selenium + ajax抓取英雄联盟全部英雄的详细信息及多线程保存全部皮肤图片到本地
网友评论