JavaScript动画

发布时间：2024-04-13 14:30:02

!DOCT YPE html>

在学习 CSS 时我们知道，通过 CSS 可以实现简单的动画效果，但对于比较复杂的动画，使用 CSS 实现起来就会比较麻烦。除了可以使用 CSS 来实现外，也可以使用 JavaScript 来实现。JavaScript 动画主要是通过修改元素样式来实现的，能够实现许多 CSS 动画所不能实现的效果，例如暂停、回放等。

与 CSS 动画相比，JavaScript 动画具有以下特点：

JavaScript 动画控制能力更强，可以在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；
JavaScript 动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JavaScript 动画才能完成；
CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。

JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：

    
    JavaScript
       


    
        分享

运行结果如下：

图1：JavaScript 动画效果

提示：如今，大多数显示器的刷新率为 60HZ，为了实现更加平滑的动画效果，使用定时器的最佳循环间隔约为 17ms。

下面再通过一个示例来演示如何创建 JavaScript 动画，示例代码如下：




    
    JavaScript

运行结果如下：

图2：JavaScript动画效果