学习与JavaScript动画有关的基础知识

吴欣
155 阅读2分钟

JavaScript动画是通过对元素的样式进行渐进式的编程改变而产生的。这些动画有能力完成CSS自己无法完成的任务。DOM被称为文档对象模型，整个HTML文档由一个文档对象表示。 根据逻辑方程或函数，你可以用JavaScript在页面上移动几个DOM元素。

在这篇文章中，你将利用简单的例子来学习与JavaScript动画有关的基础知识。所以，让我们开始吧!

用于创建JavaScript动画的函数

在JavaScript中，有三个函数常用于创建动画，它们是。

  • setTimeout（函数，持续时间）。**全局性的setTimeout()**函数设置一个定时器，在某个延迟或持续时间后执行一个函数或指定的代码。
  • clearTimeout（setTimeout_variable）。**clearTimeout()函数用于清除由setTimeout()**设置的定时器。
  • setInterval**(function, duration)**。**setInterval()**函数设置了一个定时器，根据指定的持续时间重复执行一个函数或一段代码。

让我们举一个创建JavaScript动画的简单例子来了解它是如何工作的。

如何创建一个JavaScript动画

在这个例子中，我们将使用HTML创建一个JavaScript动画网页。要做到这一点，首先，我们将创建一个名为**"Animation_JS.html "的HTML文件。**

在这个HTML文件中，我们将添加一个名为 "移动 "的按钮，并添加两个名为 "容器 "和 "javascriptAnimation"的容器。对于第一个 "容器"，我们将设置其属性，如高度、宽度、位置、背景、边界半径和显示。此外，我们将设置它的"position "为 "relative"，表示这个容器是正常定位的。

同样地，我们将指定 "javascriptAnimation"容器的宽度、高度和背景颜色属性的值，同时将其**"位置 "设置为 "绝对"。**这样做后，这个容器将被定位到其最近的祖先。

</html>
<!DOCTYPE html>
<html>
    <head>
        <title>What is JavaScript Animation</title>
    </head>
<style>
#container {  
  width: 420px;  
  height: 420px;  
  position: relative;  
  background: purple;  
  border-radius: 50%;
  display: inline-block;
}  
#javascriptAnimation {  
  width: 55px;  
  height: 55px;  
  position: absolute;  
  background-color: orange;  
}
</style>
<body>
<p>
<button onclick="animation()">Move</button>
</p>
<div id ="container">
<div id ="javascriptAnimation"></div>
</div>
</body>
</html>

接下来，在 **<script>标签**内，我们将定义一个**"animation() "**函数，当用户点击**"移动 "**按钮时，该函数将被调用。这个 **"animation() "**函数将首先获取**"javascriptAnimation "**HTML元素。然后，我们将 **给 "clearInterval() "函数**分配一个 **"id"**，它**在 "5 "**毫秒**后**调用**"frame() "函数**。

在 **"frame() "函数**中，每秒的帧数将被设定。如果元素的位置达到**305px**，那么**"clearInterval() "**函数就会将其清除，否则取来的HTML**"javascriptAnimation "**元素将根据**"position "值**在顶部移动**。**
<script>
var id = null;
function animation() {
var elem = document.getElementById("javascriptAnimation");
    var position = 0;
    clearInterval(id);
    id = setInterval(frame, 5);
    function frame() {
        if (position == 305) {
            clearInterval(id);
        } else {
            position++;
            elem.style.top = position + 'px';
            elem.style.left = position + 'px';
        }
    }
}
</script>

下面是脚本代码的片段。

执行上述给定的JavaScript程序将显示以下输出。

然后点击 "移动"按钮来查看创建的JavaScript动画。

这就是与JavaScript动画有关的所有基本信息。你可以根据需要进一步探索。

总结

动画被称为由一系列图像组成的运动模拟。JavaScript动画是通过对一个元素的风格进行小的编程修改来创建的。在JavaScript中，你可以使用三个最常用的函数来创建动画，它们分别是**setTimeout(), setInterval()和clearTimeout()。**在这篇文章中，我们通过一个简单的例子讨论了JavaScript动画及其相关函数。

avatar
文章
阅读
粉丝