集册 轻松学习 JavaScript 动画

动画

Xebcnor     最近更新时间：2020-08-04 05:37:59

208

你可以利用 JavaScript 创造一些复杂的运动，包括下面但不限于下面的：

  • 烟花式
  • 淡出效果
  • 旋转进入或者旋转推出
  • 整个页面进入或者整个页面出去
  • 对象移动

这个教程将讲解如何利用 JavaScript 创建一些基本的运动。

JavaScript 可以用来移动一些文档对象模型元素(<img>, <div> 或者其他的 HTML 元素)在页面附近，这个是通过一些逻辑等式或者函数来决定的。

JavaScript 提供如下的几种比较常用的函数来进行动画编程。

  • setTimeout(function, duration)： 这个函数在规定的时间 duration 到达时，会调用参数中的函数 function。
  • setInterval(function, duration)： 这个方法调用了之后会清除所有 setTimeout() 函数设定的计时器。

JavaScript 能够设置一系列文档模型对象的属性值，包括该对象在屏幕中的位置。你可以通过设置 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;

手动动画

让我们利用文档对象模型的对象的属性值实现一个简单的动画，JavaScript 的函数如下：

    <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>Click button below to move the image to right</p>
    <input type="button" value="Click Me" onclick="moveRight();" />
    </form>
    </body>
    </html>

如下是对上面例子的解释：

  • 我们利用 JavaScript 的函数 getElementById() 得到了文档对象模型对象，接着把它赋值给一个全局变量 imgObj。
  • 我们定义了一个初始化函数 init() 用来初始化 imgObj 对象,初始化时设置了该对象的 position 和 left 属性的值。
  • 初始化函数在网页窗口加载的时候被调用。
  • 最后，我们调用 moveRight() 函数增加该对象到左边边界的距离为 10 个像素点。你也可以设置该对象到左边的距离为负值。

自动动画

在上面的例子中我们已经看到如何让一张图片在每次点击之后向右移动。我们可以通过利用 JavaScript 中的函数 setTimeout() 让它自动执行这个操作：

    <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>Click the buttons below to handle animation</p>
    <input type="button" value="Start" onclick="moveRight();" />
    <input type="button" value="Stop" onclick="stop();" />
    </form>
    </body>
    </html>

这里我们增加了一些新的知识：

  • moveRight() 函数通过调用 setTimeout() 函数设置 imgObj 对象的位置。
  • 我们添加了一个新的函数 stop() ，它的作用是用来清除 setTimeout() 函数设置的计时器和让文档对象处于它的初始位置。

伴随鼠标事件的翻转

如下是一个简单的例子演示由鼠标事件引起的图片翻转：

展开阅读全文