数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何在 JavaScript 中区分手动动画和自动动画？
通常，JavaScript 中的动画用于获得不同的效果并使对象在页面上移动。您可以使用 JavaScript 中的手动或自动动画来移动和动画化任何类型的 HTML 元素。
在本教程中，我们将学习如何在 JavaScript 中区分手动动画和自动动画。
手动动画
在解释 JavaScript 中使用的两种常见动画类型之间的区别之前，我们必须学习手动动画对象的过程。
在手动动画下，动画过程不是自动化的。以下是使用 DOM 对象属性和 JavaScript 函数实现简单动画的方法。以下列表包含不同的 DOM 方法。
我们使用 JavaScript 函数getElementById获取 DOM 对象，然后将其分配给全局变量 imgObj
我们定义了一个初始化函数init()来初始化imgObj，其中我们设置了它的位置和 left 属性
我们在窗口加载时调用初始化函数。
最后，我们调用moveRight()函数将左侧距离增加 10 像素。您也可以将其设置为负值以将其移动到左侧。
步骤
步骤 1 - 选择或确定用户需要手动动画的对象或图像。
步骤 2 - 确定元素的位置和大小。
步骤 3 - 添加一个按钮或其他可以与 onClick 方法一起使用的元素以手动动画化对象。
步骤 4 - 确定每次点击时对象的变化或移动。
示例
以下示例显示了如何创建对象或添加图像，这些图像可以使用 moveRight() 或 moveLeft() 函数手动移动或动画化。
<html> <head> <title>JavaScript Manual Animation</title> <script> 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="https://tutorialspoint.com/javascript/images/javascript-mini-logo.jpg" /> <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()函数设置的计时器，并将对象设置在其初始位置。
步骤
步骤 1 - 查找或创建将用于自动动画的对象。
步骤 2 - 选择对象的初始样式和位置。
步骤 3 - 根据需要添加一个按钮来启动和停止动画过程。
步骤 4 - 确定动画需要停止或重新启动的时间或位置。
示例
您可以从以下示例中看到，对象可以在某个点自动停止动画。此示例可用于试验并找出 JavaScript 中自动动画的范围
<html> <head> <title>JavaScript Automated Animation</title> <script> 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="https://tutorialspoint.com/javascript/images/javascript-mini-logo.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> </body> </html>
我们如何区分手动动画和自动动画？
步骤 1 - 找出是否必须进行手动更改才能获得结果。
例如，如果您想订阅某个网站，您可以看到一个自动弹出的订阅表单，或者您必须单击一个按钮才能查看表单。
步骤 2 - 检查动画的时间限制。
在手动动画中，您不会在不单击按钮的情况下看到动画工作。通常，在自动动画中，淡入或其他功能可以继续。
使用鼠标移动的 JavaScript 动画
您可以看到各种鼠标移动动画。在创建响应式按钮、图像和其他元素时，我们通常使用 JavaScript。在这种方法中，您将看到图像大小如何随着鼠标在元素上移动而改变。
语法
以下语法显示了如何使用 onMoveOver 和 onMoveOut 用户行为更改元素。
if(document.images){
var animation1 = new Image();
var animation2 = new Image();
}
onMouseOver = animation2.src;
onMouseOut = animation1.src;
示例
以下示例显示了对象如何随着鼠标在元素上移动而改变其大小或位置。
<html> <head> <script> if(document.images){ var animation1 = new Image(); // Preload an image animation1.src = "https://demo.sirv.com/nuphar.jpg?w=400&h=250"; var animation2 = new Image(); // Preload second image animation2.src = "https://demo.sirv.com/nuphar.jpg?w=200&h=450"; } </script> </head> <body> <h3> Change in image size with the <i> movement of a mouse </i>. </h3> <a id = SVG href = "#" onMouseOver = "document.myImage.src=animation2.src;" onMouseOut = "document.myImage.src = animation1.src;"> <img id = SVG name = "myImage" src = "https://demo.sirv.com/nuphar.jpg?w=400&h=250" /> </a> </body> </html>
使用上述方法，您可以找到已在 JavaScript 函数中传递的参数数量。通过运行此代码，您将看到结果的输出。
412 次查看
