这次给大家带来怎样使用veloticy-ui生成文字动画，使用veloticy-ui生成文字动画的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
最近要实现一个类似文字波浪线的效果，使用了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 实现一个简单的文字动画
实现一个自定义动画
Document segmentfault
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 '' + char + ''; //让每字符被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, }) })
登录后复制
除去一些字符的操作,可以看出实现一个看似复杂的动画只需简单设置calls 和stagger属性的值就可以了,这个gif在循环播放那个动画,实际上这个动画只执行了一次，大家可以思考一下怎么实现整个队列的循环
最后
velocity内部由于对动画方面进行了优化，所以性能方面比jquery的animate要好，甚至比css的transition还要出色,当然这个我没有测试过，大家可以测试一下。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
jquery+css3做出直播平台的导航
鼠标响应式淘宝动画效果的实现
如何用jquery做出放大镜效果
以上就是怎样使用veloticy-ui生成文字动画的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782737.html
