Home Web Front-end JS Tutorial How to use veloticy-ui to generate text animation

How to use veloticy-ui to generate text animation

Mar 14, 2018 pm 05:38 PM
letter generate

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
});
Copy after login

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

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 }
});
Copy after login

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>
Copy after login

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!

Statement of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

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

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1657
14
PHP Tutorial
1257
29
C# Tutorial
1229
24
How to make round pictures and text in ppt How to make round pictures and text in ppt Mar 26, 2024 am 10:23 AM

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.

How to add dots to text in word? How to add dots to text in word? Mar 19, 2024 pm 08:04 PM

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 &quot;How to add dots to text&quot;. 3. We first select the words &quot;How to add dots to text&quot; 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

How to generate k random dates between two dates using Python? How to generate k random dates between two dates using Python? Sep 09, 2023 pm 08:17 PM

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 Golang Image Processing: Learn How to Add Watermarks and Text Aug 17, 2023 am 08:41 AM

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

How to modify text on pictures How to modify text on pictures Aug 29, 2023 am 10:29 AM

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 generate refreshable image verification code using PHP How to generate refreshable image verification code using PHP Sep 13, 2023 am 11:54 AM

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

How to do basic natural language generation using PHP How to do basic natural language generation using PHP Jun 22, 2023 am 11:05 AM

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

Generate a waffle chart using pyWaffle in Python Generate a waffle chart using pyWaffle in Python Aug 17, 2023 am 11:49 AM

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

See all articles