The amazing open source animation library is not only awesome, but also small

Hello everyone , I am a ​​ Front end lab ​​ My elder martial brother ！ A veteran Internet player , Focus on sharing large front-end technology 、 Interview treasure 、 Learning materials, etc ~

The first project assigned to me by the company in the new year is a small game , Some animations are involved in the game , Today, senior brother will recommend a small and powerful animation library ：​​anime.js​​

Introduce

​​anime.js​​​ It's a powerful ​​javascript​​​ Animation library plug in ,​​anime.js​​ You can talk to CSS3 attribute ,SVG,DOM Elements and JS Objects work together , Make all kinds of high-performance , Animation effect of smooth transition .

After compression, only 9kb about , Though sparrows are small , But all five internal organs .

github There are also 41.5k Of star, The latest update was also ten days ago

Installation mode

Mode one ： Use npm Installation

Log in and copy

      
      

       
       npm install animejs
      
      
      
      

       
       
1.
      
      

Mode two ： download anime.js Package for , Introduce... Into the page anime.min.js file .

Log in and copy

      
      

       
       <script type="text/javascript" src="js/anime.min.js"></script>
      
      
      
      

       
       
1.
      
      

Use

introduce anime.js after , You can start to write animation effects .

First, write an animation effect of pinball ,HTML Code ：

Log in and copy

      
      

       
       <div class="wrapper">
       
       
 <div class="ball"></div>
       
       
</div>
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
      
      

CSS Code :

Log in and copy

      
      

       
       body {
       
       
 margin: 0;
       
       
 padding: 0;
       
       
 overflow: hidden;
       
       
 background-color: black;
       
       
}
       
       
.wrapper {
       
       
 height: 80vh;
       
       
 width: 100%;
       
       
 margin: 0;
       
       
 padding: 0;
       
       
 position: relative;
       
       
 overflow: hidden;
       
       
 border: 1px solid blue;
       
       
 background-color: lightblue;
       
       
 color: #444;
       
       
}
       
       

       
       
.ball {
       
       
 height: 200px;
       
       
 width: 200px;
       
       
 position: absolute;
       
       
 top: 20px;
       
       
 bottom: 0;
       
       
 left: calc(50% - 100px);
       
       
 background-color: darkblue;
       
       
 border-radius: 50%;
       
       
}
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
       
       
15.
       
       
16.
       
       
17.
       
       
18.
       
       
19.
       
       
20.
       
       
21.
       
       
22.
       
       
23.
       
       
24.
       
       
25.
       
       
26.
       
       
27.
       
       
28.
      
      

Use anime.js Provide methods to write basic structures ：

Log in and copy

      
      

       
       var bouncingBall = anime({
       
       

       
       
  //code here
       
       

       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
      
      

And then use it inside anime.js Provide corresponding methods to achieve animation effects , For example, to be manipulated dom Elements , Animation time and slow curve, etc .

Log in and copy

      
      

       
       var bouncingBall = anime({
       
       
  targets: '.ball',
       
       
  translateY: '50vh',
       
       
  duration: 300,
       
       
  loop: true,
       
       
  direction: 'alternate',
       
       
  easing: 'easeInCubic'
       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
      
      

​​targets​​ Attributes are used to specify the element to move , Similar to CSS Selector to select elements , Or the following methods to select elements ：

DOM Selection method ​​document.querySelector('.ball')​​​ Or is it ​​document.querySelectorAll('.ball')​​ Method ;

js Array way ​​['.ball']​​

js How objects work ​​{elementName: 'ball'}​​

If the element you want to operate on has multiple values or you want to operate on multiple elements , You can do this ：

Log in and copy

      
      

       
       var bouncingBall = anime({
       
       
  targets: ['.ball', '.kick'],
       
       
  //rest of the code
       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
      
      

​​translateY​​​ That is, to manipulate the attributes of elements to make changes , and CSS The method of manipulating elements in is very similar . As a front-end developer who often deals with animation , For the use of ​​transform​​​ Attribute to improve the performance of animation must be very clear , Also in use ​​animejs​​​ When writing animation effects , It is also recommended to use ​​transform​​ And other attributes to improve animation performance .

​​duration​​​ That is, the running time of the animation . If you want to delay the execution of the animation , have access to ​​delay​​ This parameter specifies the animation delay time .

​​loop​​ Attribute is used to define whether the animation runs circularly . The default value is false, That is, the animation only runs once . Of course, you can also specify a specific number to define the number of animation runs or define it as true An infinite loop runs next time .

​​direction​​​ Property defines whether the animation should play backwards in turn . There are three values ​​default​​​、​​alternate​​​ and ​​reverse​​​.​​alternate​​​ Indicates that the animation should be played backwards in turn .​​reverse​​ It means running in the opposite direction .

​​easing​​ It is used to define the animation speed curve , And CSS3 The same as the animation curve in .

In the code above , The effect achieved is just the effect of the ball bouncing up and down . In the real world , When a ball falls to the ground , The ball will be under its own pressure to produce a deformation effect , have access to ​​transform​​​ Medium ​​scaleX​​ To achieve this animation effect .

Here is the specific code ：

Log in and copy

      
      

       
       var bouncingBall = anime({
       
       
  targets: '.ball',
       
       
  translateY: '50vh',
       
       
  duration: 300,
       
       
  loop: true,
       
       
  direction: 'alternate',
       
       
  easing: 'easeInCubic',
       
       
  //new code
       
       
  scaleX: {
       
       
    value: 1.05,  // Represents the value of scaling 
       
       
    duration: 150,  //  The elapsed time 
       
       
    delay: 268   // How long to delay the execution of 
       
       
  }
       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
      
      

Animation control

​​anime.js​​​ There are also offers such as ​​play、pause and restart​​​ Method to control the execution of animation 、 Pause and rerun animation . You can also use ​​seek()​​ Method to jump frames and run animation .

Pass below ​​ Button ​​ Respectively to control the animation start effect ：

Log in and copy

      
      

       
       // Add a new one button
       
       
<div class="wrapper">
       
       
 <button class="btn"> Start </button>
       
       
 <div class="ball"></div>
       
       
</div>
       
       

       
       
//js Code acquisition button , And add click event 
       
       
var btn = document.querySelector('.btn')
       
       
btn.addEventListener('click', function(e) {
       
       
  e.preventDefault();
       
       
  bouncingBall.play();
       
       
});
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
      
      

The effect is as follows ：

The above introduces ​​anime.js​​ A way to use , More ways to use it depend on your imagination .

At the end

Welcome to the front-end laboratory reader exchange group , There are many technical gods in the group , I will share some technical points from time to time , Some resource collectors will share some high-quality learning materials . Eat the melon 、 loaf on a job 、 White whoring technology is waiting for you ~

Group approach ： Behind the official account. , reply 111 , Press the prompt to enter the group .