Home >Web Front-end >JS Tutorial >veloticy-ui implements text animation effects

veloticy-ui implements text animation effects

亚连Original: 2018-06-06 17:43:491553browse

This article mainly introduces the use of veloticy-ui to generate text animation effects and basic usage methods. Friends in need can refer to it

Preface

Recently, I want to achieve an effect similar to text wavy lines. I used the animation library velocity-ui. The first feeling is that it is simple to use, has a small amount of code, and has excellent performance. Here I will briefly introduce how to use it, and implement a view. Nice animation.

You can click here for specific usage

Basic usage

To use velocity-ui, you need to first Introduce velocity, 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. Introducing velocity- The

purpose of ui is to provide some defined animations (commands). There are some animation libraries like Animate.css, but they 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. There are fadeIn/fadeOut, slideUp/slideDown,

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

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(&#39;custom&#39;, {//注册一个叫&#39;custom&#39;自定义动画
 defaultDuration: 1500,
 calls:[
  [{
  rotateY: 360,
  translateY: &#39;-=15&#39;,
  }, 0.5],
  [{
  translateY: &#39;+=15&#39;,
  }, 0.5]
 ], 
 })
 $(&#39;#J_Text&#39;).css({
 fontSize: 40,
 color: &#39;#333&#39;,
 }) .html(function () {
  return $(this).text().split(&#39;&#39;).map(function (char) {
 return &#39;<span>&#39; + char + &#39;</span>&#39;; //让每字符被span元素包裹
 }).join(&#39;&#39;);
 }).find(&#39;span&#39;)
 .filter(function (index) {
 return index > 6
 }).css(&#39;color&#39;, &#39;#009A63&#39;).end() //让后面几个字符变为绿色
 .css({
 position: &#39;absolute&#39;,
 left: function (index) {
  return index * 20; //设置字符的间隔
 }
 })
 .velocity(&#39;custom&#39;, { //调用自定义的动画指令
 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.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Detailed interpretation of the separation and combination of vue-admin and backend (flask)

How to implement timed hiding in jQuery Dialog box

How to implement panda tv navigation using jquery css3

The above is the detailed content of veloticy-ui implements text animation effects. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use jquery layur popup layer in actual projectsNext article：How to use jquery layur popup layer in actual projects

See more

veloticy-ui implements text animation effects

Related articles