JavaScript 动画

时间:2019-08-20 13:50:45  来源:igfitidea点击:

我们可以使用JavaScript创建一个复杂的动画,比如:

  1. 烟花特效
  2. 褪色的效果
  3. 转入转出
  4. 移动等

JavaScript可用于根据某个模式在页面中移动DOM元素。

JavaScript提供了下面3个在动画程序中经常使用的函数。

setTimeout(function, duration)-这个函数在持续时间毫秒之后调用函数。

setInterval(function, duration)- —这个函数在每个持续时间毫秒后调用函数。

clearTimeout(setTimeout_variable)-这个函数会清除由setTimeout()函数设置的任何计时器。

JavaScript还可以设置DOM对象的许多属性,包括它在屏幕上的位置。
我们可以设置对象的top和left属性来将其放置在屏幕上的任何位置。

// 设置距屏幕左边缘的距离。
object.style.left = distance in pixels or points; 

// 设置距屏幕上边缘的距离。
object.style.top = distance in pixels or points;

实现手动动画

下面让我们使用DOM对象属性和JavaScript函数实现一个简单的动画。

我们使用JavaScript函数getElementById()获取一个DOM对象,然后将其分配给一个全局变量imgObj。
我们定义了初始化函数init()来初始化imgObj,在这里我们设置了它的位置和左属性。

我们在窗口加载时调用初始化函数。

最后,我们调用moveRight()函数将左侧距离增加10个像素。

例子

<html>   
   <head>
      <title>JavaScript 动画</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" />
         <input type = "button" value = "移动图片" onclick = "moveRight();" />
      </form>      
   </body>
</html>

实现自动动画

在上面的例子中,我们每次点击时,图像才会向右移动。
我们可以使用JavaScript函数setTimeout()来自动化这个过程,如下所示

通过setTimeout()调用moveRight()函数来设置imgObj的位置。

我们添加了一个新的函数stop()来清除由setTimeout()函数设置的计时器,并将对象设置为初始位置。

例子

<html>   
   <head>
      <title>JavaScript 动画</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" />
         <input type = "button" value = "开始移动图片" onclick = "moveRight();" />
         <input type = "button" value = "停止移动图片" onclick = "stop();" />
      </form>      
   </body>
</html>

鼠标滚动事件

在这个例子中:
在加载此页面时,“if”语句检查图像对象是否存在。
如果图片对象不可用,则将不执行此块。

当用户的鼠标移动到链接上时触发onMouseOver事件处理程序,当用户的鼠标离开链接(图像)时触发onMouseOut事件处理程序。

当鼠标移到图像上时,HTTP图像从第一个图像更改为第二个图像。
当鼠标移离图像时,将显示原始图像。

<html>
   <head>
      <title>鼠标滚动事件</title>
      
      <script type = "text/javascript">
            if(document.images) {
               var image1 = new Image();     // 预加载图片
               image1.src = "/images/html.gif";
               var image2 = new Image();     // 预加载图片
               image2.src = "/images/http.gif";
            }
      </script>
   </head>
   
   <body>
      <p>将鼠标移动到图片上,查看效果</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>