JavaScript 动画

本文将讨论 JavaScript 动画及其函数。

什么是 JavaScript 动画？

JavaScript 动画是通过对元素样式进行增量式编程更改来实现的。JavaScript 动画可以执行 CSS 无法完成的任务。JavaScript 可用于根据逻辑方程或函数在页面上移动多个 DOM 元素。JavaScript 包含下面提到的三个函数，这些函数常用于动画程序。

1. setTimeout (function, duration): 此函数可在延迟一毫秒后调用函数。
2. setInterval (function, duration): 此函数可在每隔 duration 毫秒调用函数。
3. clearTimeout (setTimeout_variable): 此函数可用于清除由 setTimeout() 设置的计时器。

JavaScript 还可以修改 DOM 对象 的属性，例如其在屏幕上的位置。对象的 top 和 left 属性可以设置为将其放置在帧中的任何位置。JavaScript 的语法可以定义为

示例

让我们以一个基本示例来了解如何创建一个基本的 JavaScript 动画网页。

输出: 执行完此代码后，我们将在屏幕截图中看到如下所示的输出。

样式化元素

让我们再举一个例子来展示通过样式化元素实现的动画。在这里，我们使用 style = "position: relative" 创建一个容器元素，并使用 style = "position: absolute" 在容器元素中创建一个动画元素。

示例

输出: 执行完此代码后，我们将在屏幕截图中看到如下所示的输出。

示例

让我们再举一个例子来了解如何创建 JavaScript 动画。

输出: 执行完此代码后，我们将在屏幕截图中看到如下所示的输出。

正如我们在上面的屏幕截图中看到的，有一个 “点击这里” 按钮。当我们点击该按钮时，图像将从 左上角 动画到 左下角，如屏幕截图所示。

手动动画

现在，使用 DOM 对象属性和 JavaScript 函数，让我们来看一个简单的动画示例。

示例

输出: 执行完此代码后，我们将在屏幕截图中看到如下所示的输出。

正如我们在屏幕截图中看到的，有一个 “点击这里” 按钮。当我们点击该按钮时，图像将在每次点击时从 左到右 移动，如屏幕截图所示。

说明

1. 要获取 DOM 对象，我们使用 JavaScript 函数 getElementById()，然后将其分配给全局变量 imgObj。
2. 为了初始化 imgObj，我们定义了一个初始化函数 init()，在该函数中我们设置了它的 location 和 left 属性。
3. 当窗口加载时，我们调用初始化函数。
4. 最后，我们使用 moveRight() 函数将 left 属性增加 10 像素。要将其切换到左侧，我们可以将其设置为负值。

自动动画

在前面的示例中，我们已经看到了图像如何在每次单击时移至屏幕右侧。我们可以使用 JavaScript 函数 setTimeout() 来自动化此过程，如下所示：

示例

让我们举一个例子来解释如何创建 JavaScript 自动动画。

输出: 执行完上面的代码后，我们将在屏幕截图中看到如下所示的输出。

正如我们在上面的屏幕截图中看到的，有一个 开始 和 停止 按钮。当我们点击开始按钮时，图像会动画到 右侧。如果点击停止按钮，图像将恢复到其原始位置。

说明

在此示例中，我们可以添加另外两种方法来帮助实现动画自动化。这些方法如下：

1. moveRight(): 要设置 imgObj 的位置，moveRight() 方法会调用 setTimeout()。
2. Stop(): 我们添加了一个新函数 stop()，该函数将对象重置为其原始状态并清除 setTimeout() 设置的计时器。