Let's talk about the use of JS animation library Velocity.js

This article mainly introduces the use of the JS animation library Velocity.js. Now I will share it with you and give you a reference.

Preface

It’s the hot July again, and I haven’t updated technical articles for a long time. The reason is that my internship ended at the end of last month and I resigned from the company. Then I have recently been working on my own projects and taking the driving license test. In order to prepare for the next company application, I said goodbye to my girlfriend and went to other places. After finishing everything for half a month, I still calmed down to learn new technologies and Write a technical article, I hope you can continue to persevere.

JS animation

As the Internet becomes more and more diverse, beautification and new technologies on the web page emerge in endlessly. As a website viewer, there are more things that attract them besides In addition to ensuring the smoothness of the website, there are also various cool interactive effects.

The interactive effects of web pages are roughly divided into css animation and js animation.

Advantages of JS animation

Now that we have a general understanding of these two types of animation, let’s analyze their different advantages

1. css animation Since css3 can customize animation according to css attributes, the advantage of this type of animation is that it does not need to be calculated and changed, and it will appear very smooth.

2. JS animation js animation has powerful performance, and is better than css animation. The characteristic is that since the attribute value is changed based on js, it does not have the limitations of css and can achieve more Functions and animations, some people may say that some js animation libraries will be very slow. In fact, js animation is inherently fast, but jquery slows it down. Because sometimes it is used with jquery, so due to some functions of jquery itself, it will be very slow when implemented.

velocity.js How to use

There are many JS animation libraries, each with its own advantages, such as the animate animation that comes with jquery. There are webGL, or using canvas, SVG, etc. to achieve other effects. This time we are talking about one of the many libraries, velocity.js animation library.

velocity.js can be used alone with JavaScript or with jquery. How to use it (note that you first download velocity.js and introduce it under the body tag, and then write the following code in the new script tag) ：

//jquery方法 
var $p = $('p')
$p.velocity({属性:值,属性:值})
//javascript 方法
var op = document.getElementById('p')
op.velocity({属性:值,属性:值})

There are a few points to note here:

1. The attributes inside cannot be written in quotation marks, and if the following value has Strings are quoted. If they are integers, they are not required. For example, width: 100 and width: "100px"
2. The attribute values ​​​​in it cannot be passed in multiple times at one time. For example, in CSS, padding: 5px 5px 6px 5px; we can Pass it in like this, but if you want to pass in multiple values ​​​​in velocity, it is {paddingLeft: 5, paddingRirght: 5 omitted}
3. If the attribute value inside has multiple transitions, the second first letter needs to be capitalized as above

velocity.js Detailed introduction

As mentioned above, the value that needs to be changed is passed as the first parameter of the object to velocity, then the second parameter is its specification. Animation options include:

duration duration
easing easing mode
delay delayed execution
loop number of loops
begin and complete callback functions
display (value is the same as css, Can be set to auto)

Before talking about velocity’s specified animation options, let’s talk about the values ​​supported by velocity: px em rem % vm vh or use the operator *=2 to represent 2 times the current value or /=2 Waiting for the operation method

The following analyzes one by one to specify the animation options:

duration duration

This represents the duration of the animation. The default value is milliseconds. (ms) You can use it like this:

// 表示一秒内将透明度从1到0
$p.velocity({opacity:0},{duration:1000})

You can also use it like this:

// 效果相同
$p.velocity({opacity:0},1000)

velocity has also customized three continuous modes: slow (600ms), normal (400ms), fast (200ms), which can be used according to your actual needs

easing easing method

This represents the way the animation transforms: ease-in-out (increase and then decrease), ease-in (accelerate first and then at a constant speed), dase-out (first a constant speed and then decelerate)

It can also be implemented based on trigonometric function easing "easeInOutSine", css Bezier curve [0.17, 0.67, 0.83, 0.67] or spring physics [tension, friction] and other values ​​

delay Delay execution

Indicates how long this animation is delayed to execute. Default unit is milliseconds (ms)

// 五秒后执行此动画
delay：5000

loop Number of loops

Indicates the number of cycles required for this animation:

// 循环五次
loop:5
// 无限循环
loop:true

begin and complete callback functions

These two represent the functions executed before the animation starts and after the animation ends:

begin:function(){ somgthing... },complete:function(){ somgthing... }

Other functions:

Velocity also has some other functions, which will be discussed in the future, such as: reverse, scrolling, color, transform (transformation includes scale, rotate, rotation, translation, etc.)

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

Related articles:

JS method to generate a QR code from a link and convert it into an image

Method to obtain DOM elements based on vue1 and vue2

nodejs mongodb aggregate cascade query operation example

The above is the detailed content of Let's talk about the use of JS animation library Velocity.js. For more information, please follow other related articles on the PHP Chinese website!