JavaScript - 动画

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

烟火
淡化效果
滚入或滚出
分页输入或分页输出
对象移动

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

本教程提供了有关如何使用 JavaScript 创建动画的基本理解。

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

JavaScript 提供了以下两个函数，在动画程序中经常使用。

setTimeout（ function， duration） − 此函数在从现在开始的 duration 毫秒后调用函数。
setInterval（function， duration） − 此函数在每个持续时间毫秒后调用 function。
clearTimeout（setTimeout_variable） − 此函数调用将清除 setTimeout（）函数设置的任何计时器。

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


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

or

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

手动动画

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

我们使用 JavaScript 函数 getElementById（） 来获取 DOM 对象，然后将其分配给全局变量 imgObj。
我们定义了一个初始化函数 init（） 来初始化 imgObj，其中我们设置了它的 position 和 left 属性。
我们在窗口加载时调用初始化函数。
最后，我们调用 moveRight（） 函数将左距离增加 10 个像素。您还可以将其设置为负值以将其移动到左侧。

例

请尝试以下示例。


<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 函数 setTimeout（） 自动执行此过程，如下所示 -

在这里，我们添加了更多方法。那么让我们看看这里有什么新内容 -

moveRight（） 函数调用 setTimeout（） 函数来设置 imgObj 的位置。
我们添加了一个新函数 stop（） 来清除 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); 	 	// 呼叫移动20毫秒后
	 	 	 	 	}
	 	 	 	 	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>

使用 Mouse 事件进行鼠标悬停

下面是一个简单的示例，显示了使用 mouse 事件进行图像翻转。

让我们看看我们在以下示例中使用了什么 -

在加载此页面时，'if' 语句会检查图像对象是否存在。如果 image 对象不可用，则不会执行此块。
Image（） 构造函数创建并预加载一个名为 image1 的新 image 对象。
src 属性被分配了名为 /images/html.gif 的外部图像文件的名称。
同样，我们创建了 image2 对象，并在此对象中分配了 /images/http.gif。
# （哈希标记）禁用链接，以便浏览器在单击时不会尝试转到 URL。此链接是一张图片。
当用户的鼠标移动到链接上时，将触发 onMouseOver 事件处理程序，当用户的鼠标离开链接时，将触发 onMouseOut 事件处理程序（图像）。
当鼠标移动到图像上时，HTTP 图像会从第一个图像更改为第二个图像。当鼠标从图像上移开时，将显示原始图像。
当鼠标从链接上移开时，初始图像html.gif将重新出现在屏幕上。


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

打印本页