js定时器+简单的动画效果实例

下面是“js定时器+简单的动画效果实例”的完整攻略：

1. 什么是定时器？

定时器就是指定一个时间间隔，然后每隔指定的时间就执行一次某个代码块。在JavaScript中，有两种类型的定时器：setInterval()和setTimeout()。

setInterval()用于每隔一定时间执行一次指定的代码块，直到被取消。语法如下：

setInterval(function, interval);

其中，function参数表示要执行的代码块，interval参数表示执行时间间隔（毫秒）。返回值是一个计时器ID，可以用该ID来取消计时器。

setTimeout()则用于在指定时间后执行一次特定的代码块。语法如下：

setTimeout(function, delay);

其中，function参数表示要执行的代码块，delay参数表示延迟执行的时间（毫秒）。返回值是一个计时器ID，可以用该ID来取消计时器。

2. 动画实现的基本原理

实现动画效果的基本原理是通过设置不同的CSS属性值，使得HTML元素的外观呈现出一定的变化，在一定时间间隔内完成多次变化，就形成了动画效果。在JavaScript中，我们可以通过不断修改HTML元素的CSS属性来实现动画效果。

3. 动画实例1：简单的颜色晃动效果

下面是一个简单的颜色晃动效果实例：点击按钮后，背景色会在一定时间内扫过多种颜色，直至停止。

HTML代码如下：

<button onclick="startAnimation()">开始动画</button>
<div id="animationDiv"></div>

JavaScript代码如下：

let animationDiv = document.getElementById("animationDiv");

function startAnimation() {
  let colors = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
  let currentIndex = 0;
  let intervalId = setInterval(function() {
    currentIndex++;
    if (currentIndex === colors.length) {
      clearInterval(intervalId);
    } else {
      animationDiv.style.backgroundColor = colors[currentIndex];
    }
  }, 100);
}

上面这段代码中，我们首先获取到了HTML中的animationDiv元素，然后定义了一个颜色数组colors，包含了要展示的所有颜色。在startAnimation()函数中，我们使用了一个计时器intervalId来每隔一定时间修改一次animationDiv元素的背景色。具体而言，我们首先将当前索引currentIndex加1，然后检查currentIndex是否达到了colors.length，如果达到了，则停止计时器；否则，将当前索引所对应的颜色赋值给animationDiv元素的背景色属性。

4. 动画实例2：元素位置变化的动画效果

下面是一个元素位置变化的动画效果实例：点击按钮后，元素会在一定时间内向右移动一定距离，直至到达指定位置。

HTML代码如下：

<button onclick="startAnimation()">开始动画</button>
<div id="animationDiv"></div>

CSS代码如下：

#animationDiv {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;
  left: 0;
}

JavaScript代码如下：

let animationDiv = document.getElementById("animationDiv");

function startAnimation() {
  let targetPosition = 200;
  let currentPosition = 0;
  let intervalId = setInterval(function() {
    currentPosition += 10;
    if (currentPosition >= targetPosition) {
      clearInterval(intervalId);
    } else {
      animationDiv.style.left = currentPosition + "px";
    }
  }, 50);
}

上面这段代码中，我们首先获取到了HTML中的animationDiv元素，并为其设置了初始位置。通过CSS的position属性设置为relative，再通过left属性设置其初始left值为0。在startAnimation()函数中，我们定义了要移动到的目标位置targetPosition，和当前元素的位置currentPosition。然后使用计时器每隔一定时间就将当前位置增加一定数值（本例中为10），直至到达目标位置为止。需要注意的是，在动画过程中我们使用了animationDiv.style.left来修改元素的CSS样式。