下面是“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样式。