使用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 实现一个简单的文字动画

实现一个自定义动画

<!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还要出色,当然这个我没有测试过，大家可以测试一下