js code to achieve the core method of animation effect_javascript skills-JS Tutorial-php.cn

js code to achieve the core method of animation effect_javascript skills

WBOY

Release： 2016-05-16 17:21:17

Original

1103 people have browsed it

Below I will briefly talk about the process and principles.
Step one: Implement an anonymous function and execute it yourself.

Copy code The code is as follows:

(function(){ })()

This function is often seen in well-written JS code. It has the effect of closure and automatic execution. Add a pair of () after the function to indicate automatic execution. The previous anonymous function needs to use ( ) so that it can be understood by the host (our BOM environment). The function(){} inside is an anonymous function.
Step 2: Implement animation, illustrated by changing the brightness of a box.
The div with id animation

Copy the code The code is as follows:

To achieve the transparent gradient of animation, we need to constantly change its transparency opacity. We implement it like this

Copy code The code is as follows:

for(var i=0;i<10;i){ 
 setTimeout((function(pos){ 
         return function(){                        someAnimation(pos); Let’s explain this code. This code is complicated and difficult to understand, so it’s okay if you don’t understand it at first. You will understand it gradually. First, explain the usage of setTimeout here 

Copy code

The code is as follows:

setTimeout((function(){})(i/10),i*100) The first parameter of setTimeout is the function to be executed, and the second parameter is the time parameter, which means how long it will take to start execution However, js does not have the concept of blocks, and the scope is based on the function. So the closure we use here, the implementation principle is as follows:

Copy the code

The code is as follows:

(function(){ 　return function(){} })()

Only then can we execute the for loop and achieve the results we want. If we do not use closure package, the code will be as follows:

Copy the code

The code will be as follows:

for(var i=0 ;i<10;i ){ setTimeout(function(pos){ someAnimation(pos); }(i/10),i*100) }

 
Such a for loop will only be executed once, that is, when i=9, interested students can try it themselves 
So far, the entire code looks like this

Copy code

The code is as follows:

(function(){ . ").style.opacity=args; return function(){ } })()

In this way, the transparency of the box with the ID animation changes from 0 to 1.
The third step is to realize continuous changes. We use setInterval to achieve it.
setInterval also has two parameters. The first is the function to be executed, and the second is the execution interval
The code so far is as follows:

Copy code The code is as follows:

(function(){ 
 function someAnimation(args ){ 
               document.getElementById("animation").style.opacity=args; 10;i ){ 
                                                                                                                                                                                                                                               .                                                                                                                    
               }, 2000); 
The whole code is as follows

Copy the code

 The code is as follows:

;background-color:red;}