How to use veloticy-ui to generate text animation
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
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!
Recommended reading:
jquery+css3 to make navigation for the live broadcast platform
Implementation of mouse-responsive Taobao animation effect
How to use jquery to create a magnifying glass effect
The above is the detailed content of How to use veloticy-ui to generate text animation. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











First, draw a circle in PPT, then insert a text box and enter text content. Finally, set the fill and outline of the text box to None to complete the production of circular pictures and text.

When we create Word documents on a daily basis, we sometimes need to add dots under certain words in the document, especially when there are test questions. To highlight this part of the content, the editor will share with you the tips on how to add dots to text in Word. I hope it can help you. 1. Open a blank word document. 2. For example, add dots under the words "How to add dots to text". 3. We first select the words "How to add dots to text" with the left mouse button. Note that if you want to add dots to that word in the future, you must first use the left button of the mouse to select which word. Today we are adding dots to these words, so we have chosen several words. Select these words, right-click, and click Font in the pop-up function box. 4. Then something like this will appear

Generating random data is very important in the field of data science. From building neural network predictions, stock market data, etc., date is usually used as one of the parameters. We may need to generate random numbers between two dates for statistical analysis. This article will show how to generate k random dates between two given dates using the random and datetime modules. Datetime is Python’s built-in library for handling time. On the other hand, the random module helps in generating random numbers. So we can combine random and datetime modules to generate a random date between two dates. Syntax random.randint (start, end, k) random here refers to the Python random library. The randint method uses three important

Golang Image Processing: Learn How to Add Watermarks and Text Quotes: In the modern era of digitalization and social media, image processing has become an important skill. Whether for personal use or business operations, adding watermarks and text are common needs. In this article, we will explore how to use Golang for image processing and learn how to add watermarks and text. Background: Golang is an open source programming language known for its concise syntax, efficient performance and powerful concurrency capabilities. it has become the subject of many developments

Modifying the text on the image can be done by using image editing software, online tools or screenshot tools. The specific steps are: 1. Open the picture editing software and import the picture that needs to be modified; 2. Select the text tool; 3. Click the text area on the picture to create a text box; 4. Enter the text you want in the text box. 5. If you just want to delete the text on the picture, you can use the eraser tool or the selection tool to select and delete the text area.

How to use PHP to generate refreshable image verification codes. With the development of the Internet, in order to prevent malicious attacks and automatic machine operations, many websites use verification codes for user verification. One common type of verification code is the image verification code, which generates a picture containing random characters and requires the user to enter the correct characters before proceeding. This article will introduce how to use PHP to generate refreshable image verification codes and provide specific code examples. Step 1: Create a verification code image First, we need to create a verification code image

Natural language generation is an artificial intelligence technology that converts data into natural language text. In today's big data era, more and more businesses need to visualize or present data to users, and natural language generation is a very effective method. PHP is a very popular server-side scripting language that can be used to develop web applications. This article will briefly introduce how to use PHP for basic natural language generation. Introducing the natural language generation library The function library that comes with PHP does not include the functions required for natural language generation, so

Data visualization is essential for efficient information understanding and presentation. Among the many chart types available, waffle charts are a novel way of displaying data in a grid-like structure with square tiles. The powerful Python module PyWaffle facilitates the development of waffle charts, similar to many computational and data analysis methods. In this article, we will look at how to create a waffle chart using the sophisticated Python module PyWaffle. Let’s install PyWafle and see how to use it to visualize categorical data. Run the following command in your cmd to install the library and then import it into your code. The Chinese translation of pipinstallpywaffleExample1 is: Example 1 In this example, we
