js code to achieve the core method of animation effect_javascript skills

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;}

   

Statement：

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