Categories
JavaScript

JavaScript-动画

JavaScript-动画


您可以使用JavaScript创建具有但不限于以下元素的复杂动画-

  • 烟花
  • 渐隐效果
  • 滚入或滚出
  • 页内或页外
  • 物体运动

您可能对现有的基于JavaScript的动画库Script.Aculo.us感兴趣

本教程对如何使用JavaScript创建动画有基本的了解。

JavaScript可用于根据逻辑方程式或函数确定的某种模式在页面上移动许多DOM元素(<img />,<div>或任何其他HTML元素)。

JavaScript提供了以下两个在动画程序中经常使用的功能。

  • setTimeout( 函数,duration) -此函数从现在开始的持续时间毫秒后调用函数

  • 的setInterval(函数,持续时间) -该函数每隔毫秒后调用函数

  • clearTimeout(setTimeout_variable) -此函数调用清除由setTimeout()函数设置的任何计时器。

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

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

手动动画

因此,让我们使用DOM对象属性和JavaScript函数来实现一个简单的动画,如下所示。以下列表包含不同的DOM方法。

  • 我们正在使用JavaScript函数getElementById()获取DOM对象,然后将其分配给全局变量imgObj

  • 我们定义了一个初始化函数init()来初始化imgObj ,在那里我们设置了它的位置left属性。

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

  • 最后,我们调用moveRight()函数将左距离增加10个像素。您也可以将其设置为负值以将其移至左侧。

请尝试以下示例。

<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>
   
   
      
      <form>
         <img id="myImage" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/programiz/49c6f8468978f001f9b28ff8bd7e2739f880ff072d88f678d9eefa60_1.jpg">
         <p>Click button below to move the image to right</p>
         <input type="button" value="Click Me" onclick="moveRight();">
      </form>      
   

输出

自动化动画

在上面的示例中,我们看到了图像如何在每次单击时向右移动。我们可以使用JavaScript函数setTimeout()来自动执行此过程,如下所示:

在这里,我们添加了更多方法。所以让我们看看这里有什么新东西-

  • moveRight()函数正在调用setTimeout()函数来设置imgObj的位置。

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

请尝试以下示例代码。

<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>
   
   
      
      <form>
         <img id="myImage" src="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/programiz/49c6f8468978f001f9b28ff8bd7e2739f880ff072d88f678d9eefa60_2.jpg">
         <p>Click the buttons below to handle animation</p>
         <input type="button" value="Start" onclick="moveRight();">
         <input type="button" value="Stop" onclick="stop();">
      </form>      
   

鼠标事件进行翻转

这是一个显示鼠标事件的图像翻转的简单示例。

让我们看看在下面的示例中我们正在使用什么-

  • 在加载此页面时,“ if”语句检查图像对象的存在。如果图像对象不可用,则不会执行此块。

  • Image()构造函数创建并预加载一个名为image1的新图像对象。

  • src属性被分配了名为/images/html.gif的外部图像文件的名称。

  • 同样,我们创建了image2对象,并在此对象中分配了/images/http.gif。

  • #(井号)会禁用链接,以便浏览器在单击时不会尝试转到URL。该链接是图像。

  • 当用户的鼠标移动到链路,而onmouseout事件处理程序被触发时该用户的从链路(图像)的距离的鼠标移动的onMouseOver触发事件处理程序。

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

  • 当鼠标移离链接时,初始图像html.gif将重新出现在屏幕上。

<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>
   
   
   
      <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="https://mangdo-1254073825.cos.ap-chengdu.myqcloud.com//front_eng_imgs/programiz/49c6f8468978f001f9b28ff8bd7e2739f880ff072d88f678d9eefa60_3.jpg">
      </a>
   

蜀ICP备20006366号
error: 内容受到保护 !!