Home > Article > Web Front-end > How to use veloticy-ui to generate text animation

How to use veloticy-ui to generate text animation

php中世界最好的语言Original: 2018-03-14 17:38:481422browse

This time I will show you how to use veloticy-ui to generate text animation, and what are the precautions for using veloticy-ui to generate text animation. The following is a practical case, let's take a look.

Preface

Recently, I want to achieve an effect similar to text wavy lines. I used the animation library velocity-ui. The first feeling is It is simple to use, has a small amount of code, and has excellent performance. Here is a brief introduction to how to use it, and implement a good-looking animation.

For specific usage methods, you can click here

Basic use

To use velocity-ui, you need to introduce velocity first, where velocity can depend on jquery or not. Just look at the details below.

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

It can be seen that when using jquery, the basic use of velocity is like jquery's animate. The

purpose of introducing velocity-ui is to provide some defined animations (instructions). An animation library like Animate.css, but it can provide

more detailed control,

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 that velocity can also set quequ, the use is consistent with animate, and velocity itself provides some instructions to implement animation, including fadeIn/fadeOut, slideUp/slideDown,

scroll, finish, reverse, except In addition, Velocity implements support for attribute animations such as transform and color, and supports SVG and promise. For specific usage, please see the document linked above.

In addition to providing more instructions, velocity-ui also provides two methods RunSequence and RegisterEffect (non-jquery can remove $. and replace jquery with native 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 the above In addition to the two functions, it also provides 3 additional options attributes

stagger can make the collection object stagger the execution of animation for a period of time

drag can make the last element of the collection object have a buffering effect

backwards allows the collection object to stagger the execution of animation for a period of time from the last element forward

The following uses RegisterEffect and stagger to 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>

After removing some characters, you can see that to achieve a seemingly complex animation, you only need to simply set the values of the calls and stagger attributes. This gif is in Play that animation in a loop. In fact, this animation is only executed once. You can think about how to realize the loop of the entire queue

Finally

velocity Due to the internal optimization of animation, the performance is better than jquery's animate, and even better than css's transition. Of course, I have not tested this, you can test it.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use veloticy-ui to generate text animation

Related articles