ES6 动画

JavaScript 中的动画可以处理 CSS 无法处理的事情。 JavaScript 中的几个元素有助于创建复杂的动画，例如淡入淡出效果、烟花、滚入或滚出等。 通过使用 JavaScript，我们可以移动 DOM 元素，例如 </img>, </div> 或任何其他 HTML 元素。

有两种方法可以在 JavaScript 中执行动画，如下所示

• 使用 setInterval() 方法：它接受两个参数，一个函数和一个整数。 此方法使用 clearInterval() 方法终止。
• 使用 requestAnimationFrame() 方法：当屏幕准备好接受下一次重绘时，此方法运行该函数。 它接受一个参数函数。 当我们递归调用此方法时，会发生动画效果。 预期的动画是逐帧创建的，并且每当浏览器准备好时，都会调用每一帧。

让我们尝试详细阐述这些方法。

setInterval() 方法

这是 JavaScript 用于生成动画效果的传统方法。 它依赖于重复执行代码，以便逐帧更改元素。

如果函数 show 更改元素样式，则可以使用 setInterval(show, t) 方法在每次时间间隔后产生元素样式的渐进变化。 当时间间隔很小时，动画看起来是连续的。

requestAnimationFrame() 方法

这种方法易于设置，但很难取消。 它经过优化以执行流畅的动画。 需要手动创建其中的循环，并且还需要手动设置时间。 这种方法不是为了在特定的时间间隔使用而设计的。

此方法旨在以 60fps（每秒帧数） 循环以执行流畅的动画。 它不会在后台运行，并且它也节能。

现在，让我们看看一些 JavaScript 动画的演示。

示例-1

在此示例中，我们正在使用 DOM 对象的属性和 JavaScript 的函数来实现一个简单的动画。 我们使用 JavaScript 函数 getElementById() 获取 DOM 对象，然后将该对象分配给一个全局变量。

让我们通过以下示例了解简单的动画。

示例

示例-2

让我们了解另一个 JavaScript 动画的例子。

在此动画中，我们将使用 setTimeout() JavaScript 函数。 显然，如果使用 setTimeout() 函数，那么要清除计时器，我们必须手动设置 JavaScript 的 clearTimeout() 函数。

在上面的示例中，我们看到了图像如何每次点击都向右移动。 让我们尝试使用 JavaScript 的 setTimeout() 函数来自动化此过程。

使用鼠标事件的图像滚动

让我们了解另一个动画示例，其中通过鼠标事件进行图像滚动。 当鼠标移动到图像上时，HTTP 图像将从第一张图像更改为第二张图像。 但是当鼠标从图像上移开时，将显示原始图像。

示例

当用户将鼠标移到链接上时，onMouseOver 事件处理程序将触发，当用户将鼠标从链接上移开时，onMouseOut 事件处理程序将触发。