前言
最近要实现一个类似文字波浪线的效果, 使用了 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 还要出色, 当然这个我没有测试过, 大家可以测试一下
来源: https://segmentfault.com/a/1190000013203083