使用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 相关文章推荐
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JS绘制微信小程序画布时钟
Dec 24 Javascript
js实现横向拖拽导航条功能
Feb 17 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
angular-ngSanitize模块-$sanitize服务详解
Jun 13 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
Dec 20 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
通过js随机函数Math.random实现乱序
May 19 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 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
php session劫持和防范的方法
2013/11/12 PHP
一个简单的PHP验证码实现代码
2014/05/10 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
原生js实现滑块区间组件
2021/01/20 Javascript
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python写的一个简单监控系统
2015/06/19 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
Pytorch 保存模型生成图片方式
2020/01/10 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
印度服装购物网站:Limeroad
2018/09/26 全球购物
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
介绍一下XMLHttpRequest对象
2012/02/12 面试题
八年级生物教学反思
2014/01/22 职场文书
《美丽的公鸡》教学反思
2014/02/25 职场文书
2014年母亲节寄语
2014/05/07 职场文书
2016中秋晚会开幕词
2016/03/03 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
vue基于Teleport实现Modal组件
2021/05/31 Vue.js
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
vue+iview实现手机号分段输入框
2022/03/25 Vue.js