Use veloticy-ui generate text animation

Foreword

To achieve a similar effect recently wavy line of text, using the velocity-ui animation library, the first feeling is simple to use, less code, excellent performance, in this brief use, and to achieve a nice-looking animation.
specific use click here

Basic use

To use the velocity-ui need to introduce velocity, which velocity may be dependent jquery, you may not rely jquery, look at the following specific on the line

//不依赖jquery，第一个参数为原生js的dom选择器
Velocity(document.getElementById("dummy"), {
    opacity: 0.5
}, {
    duration: 1000
});

// 使用 jQuery 或 Zepto 时
$("#dummy").velocity({
    opacity: 0.5
}, {
    duration: 1000
});

As can be seen when using jquery, velocity substantially jquery used as the animate, the introduction of velocity-ui

The purpose is to provide some already defined animation (instruction), a little animation library such as Animate.css, but can provide

More fine-grained control,

The basic configuration items

$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) {}//对集合对象可以设置不同的属性值

It can be seen velocity may be provided quequ, animate and use are consistent, and some of the instructions themselves provide velocity to achieve animation, there fadeIn /. FadeOut, slideUp / slideDown,
Scroll, Finish, Reverse, except velocity realizes the Transform, these attributes color animation support, and support for SVG and promise, the specific use can see the document linked above.

velocity-ui addition to providing more instructions, but also provides two methods RunSequence and RegisterEffect (non jquery can be removed $., replaced the native 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 }
});

In addition to these two functions, it provides three additional options property

stagger stagger in turn allows the collection of objects for some time to execute animation

drag a collection of objects can make the last element of a buffer effect

backwards allows a collection of objects from the last element of a staggered period of time in order to move forward the implementation of animation

Here the use of RegisterEffect and stagger implement a simple text animation

Implement a custom animation

<!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>

image description

Operation to remove some characters can be seen by simply setting the value of calls and stagger properties to achieve a seemingly complex animations can be, in this loop that gif animation, the animation is actually executed only once, we can think about how to achieve the entire circular queue

At last

Because of the internal velocity animation has been optimized, so the performance is better than the jquery animate, even more than css
also excellent transition, of course, I have not tested this, we can test

Foreword

Basic use

The basic configuration items

Implement a custom animation

At last

Guess you like