ES6 - Animation-alljchome-开发者的教程家园

ES6 Tutorial

Selected Reading

ES6 - Animation

You can use JavaScript to create a complex animation having, but not pmited to, the following elements −

Fireworks

Fade effect

Roll-in or Roll-out

Page-in or Page-out

Object movements

In this chapter, we will see how to use JavaScript to create an animation.

JavaScript can be used to move a number of DOM elements (<img />, <span>, or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function.

JavaScript provides the following functions to be frequently used in animation programs.

setTimeout(function, duration) − This function calls the function after duration milpseconds from now.

setInterval(function, duration) − This function calls the function after every duration milpseconds.

clearTimeout(setTimeout_variable) − This function clears any timer set by the setTimeout() function.

JavaScript can also set a number of attributes of a DOM object including its position on the screen. You can set the top and the left attribute of an object to position it anywhere on the screen. Following is the syntax for the same.


// Set distance from left edge of the screen.  
object.style.left = distance in pixels or points;    
or  
// Set distance from top edge of the screen.  
object.style.top = distance in pixels or points;

Manual Animation

So let s implement one simple animation using DOM object properties and JavaScript functions as follows. The following pst contains different DOM methods.

We are using the JavaScript function getElementById() to get a DOM object and then assigning it to a global variable imgObj.

We have defined an initiapzation function init() to initiapze imgObj where we have set its position and left attributes.

We are calpng initiapzation function at the time of window load.

We are calpng moveRight() function to increase the left distance by 10 pixels. You could also set it to a negative value to move it to the left side.

Example

Try the following example


<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; function init(){  
               imgObj = document.getElementById( myImage );
               imgObj.style.position =  relative ;     
               imgObj.style.left =  0px ;   
            }     
            function moveRight(){  
               imgObj.style.left = parseInt(
               imgObj.style.left) + 10 +  px ;  
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 
   
   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Cpck button below to move the image to right</p> 
         <input type = "button" value = "Cpck Me" oncpck = "moveRight();" /> 
      </form>
   </body>
   
</html>

Automated Animation

In the above example, we saw how an image moves to the right with every cpck. We can automate this process by using the JavaScript function setTimeout() as follows.

Here we have added more methods. So, let s see what is new here.

The moveRight() function is calpng setTimeout() function to set the position of imgObj.

We have added a new function stop() to clear the timer set by setTimeout() function and to set the object at its initial position.

Example

Try the following example code.


<html> 
   <head> 
      <title>JavaScript Animation</title> 
      <script type = "text/javascript"> 
         <!--  
            var imgObj = null; var animate ; function init(){  
               imgObj = document.getElementById( myImage );     
               imgObj.style.position =  relative ;    
               imgObj.style.left =  0px ; 
            }  
            function moveRight(){  
               imgObj.style.left = parseInt(imgObj.style.left) + 10 +  px ;    
               animate = setTimeout(moveRight,20); 
               // call moveRight in 20msec  
            }  
            function stop() {     
               clearTimeout(animate);    
               imgObj.style.left =  0px ;   
            }  
            window.onload = init;  
            //
         --> 
      </script> 
   </head> 

   <body> 
      <form> 
         <img id = "myImage" src = "/images/html.gif" /> 
         <p>Cpck the buttons below to handle animation</p> 
         <input type="button" value="Start" oncpck = "moveRight();" /> 
         <input type = "button" value="Stop" oncpck = "stop();" /> 
      </form>    
   </body> 
</html>

Rollover with a Mouse Event

Here is a simple example showing the image rollover with a mouse event.

Let s see what we are using in the following example −

At the time of loading this page, the ‘if’ statement checks for the existence of the image object. If the image object is unavailable, this block will not be executed.

The Image() constructor creates and preloads a new image object called image1.

The src property is assigned the name of the external image file called /images/html.gif.

Similarly, we have created image2 object and assigned /images/http.gif in this object.

The # (hash mark) disables the pnk so that the browser does not try to go to a URL when cpcked. This pnk is an image.

The onMouseOver event handler is triggered when the user s mouse moves onto the pnk, and the onMouseOut event handler is triggered when the user s mouse moves away from the pnk (image).

When the mouse moves over the image, the HTTP image changes from the first image to the second one. When the mouse is moved away from the image, the original image is displayed.

When the mouse is moved away from the pnk, the initial image html.gif will reappear on the screen.


<html> 
   <head> 
      <title>Rollover with a Mouse Events</title> 
      <script type = "text/javascript"> 
         <!--  
            if(document.images) {  
               var image1 = new Image();       
               // Preload an image image1.src = "/images/html.gif";  
                  
               var image2 = new Image();       
               // Preload second image image2.src = "/images/http.gif";  
            }  
            //
         -->
      </script> 
   </head> 

   <body> 
      <p>Move your mouse over the image to see the result</p>
      <a href = "#" onMouseOver = "document.myImage.src = image2.src;"      
         onMouseOut = "document.myImage.src = image1.src;"> 
         <img name = "myImage" src = "/images/html.gif" /> 
      </a> 
   </body>
   
</html>

ES6 - Animation

Manual Animation

Example

Automated Animation

Example

Rollover with a Mouse Event

友情链接