使用veloticy-ui生成文字动画效果


Posted in Javascript onFebruary 08, 2018

前言

最近要实现一个类似文字波浪线的效果,使用了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>

使用veloticy-ui生成文字动画效果

除去一些字符的操作,可以看出实现一个看似复杂的动画只需简单设置calls 和stagger属性的值就可以了,这个gif在循环播放那个动画,实际上这个动画只执行了一次,大家可以思考一下怎么实现整个队列的循环

最后

velocity内部由于对动画方面进行了优化,所以性能方面比jquery的animate要好,甚至比css的transition还要出色,当然这个我没有测试过,大家可以测试一下。

总结

以上所述是小编给大家介绍的使用veloticy-ui生成文字动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery常见开发技巧详细整理
Jan 02 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
JavaScript函数详解
Nov 17 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
JS给swf传参数的实现方法
Sep 13 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
JS跨域请求的问题解析
Dec 03 Javascript
js最全的数组的降维5种办法(小结)
Apr 28 Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 #Javascript
You might like
《APMServ 5.1.2》使用图解
2006/10/23 PHP
浅析51个PHP处理字符串的函数
2013/08/02 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
jquery-easyui关闭tab自动切换到前一个tab
2010/07/29 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
JavaScript实现鼠标点击后层展开效果的方法
2015/05/13 Javascript
JS获取地址栏参数的两种方法(简单实用)
2016/06/14 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JavaScript函数节流概念与用法实例详解
2016/06/20 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
2016/07/22 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
jQuery实现判断上传图片类型和大小的方法示例
2018/04/11 jQuery
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
详解微信UnionID作用
2019/05/15 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
selenium+python截图不成功的解决方法
2019/01/30 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python实现最常见加密方式详解
2019/07/13 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
pytorch 准备、训练和测试自己的图片数据的方法
2020/01/10 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
python Scrapy框架原理解析
2021/01/04 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
周鸿祎:教你写创业计划书
2013/12/30 职场文书
美国留学经济担保书
2014/05/20 职场文书
作风大整顿心得体会
2014/09/10 职场文书
采购员岗位职责
2015/02/03 职场文书
员工自我工作评价
2015/03/06 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python