srcmini本文概述
JavaScript中的动画可以处理CSS无法处理的事情。 JavaScript中的多个元素可帮助创建复杂的动画, 例如淡入淡出效果, Fireworks, 滚入或滚出等。通过使用JavaScript, 我们可以移动</ img>, </ div>或其他任何DOM元素其他HTML元素。
有两种在JavaScript中执行动画的方法, 如下所示：
- 使用setInterval()方法：它接受两个参数, 它们是一个函数和一个整数。该方法使用clearInterval()方法终止。
- 使用requestAnimationFrame()方法：当屏幕准备好接受下一次重绘时, 此方法将运行该函数。它采用单个参数函数。当我们递归调用此方法时, 就会产生动画效果。预期的动画是逐帧创建的, 并且在浏览器准备就绪时会调用每个动画。
让我们尝试详细说明这些方法。
setInterval()方法
它是JavaScript产生动画效果的传统方法。它依靠重复执行代码来逐帧更改元素。
anime = setInterval(show, t);
//It calls the function show after every t milliseconds
clearInterval(anime);
//It terminates above process如果函数show产生元素样式的更改, 则可以使用setInterval(show, t)方法在每个时间间隔后逐步产生元素样式的更改。如果时间间隔较小, 则动画看起来是连续的。
requestAnimationFrame()方法
此方法易于设置且难以取消。它经过优化以执行流畅的动画。需要手动创建其中的循环, 并且还需要手动设置时序。请勿以特定间隔使用此方法。
此方法旨在以60fps(每秒帧数)的速度循环执行平滑的动画。它不会在后台运行, 而且还是节能的。
现在, 让我们看一些JavaScript动画的演示。
示例1
在此示例中, 我们通过使用DOM对象的属性和JavaScript函数来实现简单的动画。我们使用JavaScript函数getElementById()获取DOM对象, 然后将该对象分配给全局变量。
让我们通过使用以下示例来了解简单的动画。
例子
<html>
<head>
<script type = "text/javascript">
var img = null;
function init(){
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '50px';
}
function moveRight(){
img.style.left = parseInt(
img.style.left) + 100 + 'px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myimg" src = "train1.png" />
<center>
<p>Click the below button to move the image right</p>
<input type = "button" value = "Click Me" onclick = "moveRight();" />
</center>
</form>
</body>
</html>输出如下
LIVE OUTPUT示例2
让我们了解另一个JavaScript动画示例。
在此动画中, 我们将使用JavaScript的setTimeout()函数。显然, 如果使用setTimeout()函数, 则要清除计时器, 我们必须手动设置JavaScript的clearTimeout()函数。
在上面的示例中, 我们看到了图像如何在每次单击时向右移动。让我们尝试使用JavaScript的setTimeout()函数自动执行此过程。
<html>
<head>
<title>JavaScript Animation</title>
<script type = "text/javascript">
var anime ;
function init(){
img = document.getElementById('myimg');
img.style.position = 'relative';
img.style.left = '0px';
}
function towardRight(){
img.style.left = parseInt(img.style.left) + 10 + 'px';
anime = setTimeout(towardRight, 50);
}
function stop() {
clearTimeout(anime);
img.style.left = '0px';
}
window.onload = init;
</script>
</head>
<body>
<form>
<img id = "myimg" src = "train1.png" />
<center>
<h2 style="color:darkblue;">Click the following buttons to handle animation</h2>
<input type="button" value="Start" onclick = "towardRight();" />
<input type = "button" value="Stop" onclick = "stop();" />
<center>
</form>
</body>
</html>输出如下
LIVE OUTPUT带有鼠标事件的图像翻转
让我们了解动画的另一个示例, 其中有一个鼠标事件导致图像翻转。当鼠标移到图像上时, HTTP图像将从第一个图像更改为第二个图像。但是, 当鼠标从图像上移开时, 将显示原始图像。
例子
当用户将鼠标移到链接上时, onMouseOver事件处理程序将触发, 而当用户将鼠标从链接上移开时, onMouseOut事件处理程序将被触发。
<html>
<head>
<script type = "text/javascript">
if(document.images) {
var img1 = new Image();
img1.src = "cat.jpg";
var img2 = new Image();
img2.src = "tiger.jpg";
}
</script>
</head>
<body>
<center>
<a href = "#" onMouseOver = "document.myImg.src = img2.src;"
onMouseOut = "document.myImg.src = img1.src;">
<img name = "myImg" src = "cat.jpg" />
</a><br><br><br>
<h1>Move your mouse over the image to see the result</h1>
</center>
</body>
</html>输出如下
LIVE OUTPUT
评论前必须登录！
注册