JavaScript | 事件案例之缓动的小球

一、案例简介

在 Web 开发中，实现 DOM 元素的动画特效是 JavaScript 的常见功能之一。它的实现原理是，通过定时器连续地修改当前 DOM 元素的某个样式值，达到一个动态的特效。其中，DOM元素样式值的改变是根据固定公式运算实现的，缓动动画公式如下。

1 2	`step=(target -leader )/10 //计算每次缓动的步长` `leader = leader + step //计算下次的起始点`

在上述公式中，target 表示目标点，leader 表示起始点，step表示从起始点到目标点每次缓动的步长。而缓动特效在实现时，随着距离 target 越来越近，step 步长值逐渐变小，从而达到非常逼真的缓动效果。

二、具体实现步骤

（1）编写HTML页面

1 2	`<style>#box{position: absolute;}</style>` `<div` `id="box">点我啊，跑!</div>`

在上述代码中，定义了一个id名为 box 的小球，用户单击该小球，通过 JavaScript 代码完成小球的缓速移动。若想要通过改变小球的 left 和 top 值完成小球的移动，需要为小球设置定位。若想要通过改变小球的left和top值完成小球的移动，需要为小球设置定位，如第1行代码所示

（2）为小球绑定单击事件

<script>
var obj = document.getElementById('box'); 
obj onclick = function() {
  animate(obj, {'left': 200, 'top': 50}); 
};
</script>

首先，获取id值为box的小球，然后通过动态方式完成单击事件的绑定，并在该事件处理程序中，调用animate()自定义函数完成动画的实现。其中，animate()函数的第1个参数表示以动画方式移动的对象，第2个参数利用对象保存需要改变的元素性值。需要注意，这里仅实现以像素为单位的数值型的属性。

（3）编写animate()动画函数

function animate(obj,option){
clearInterval(obj.timer); //防止多次触发事件，重复开启定时器 
obj.timer m setinterval(function(){
 var flag= true;
// 元素对象移动的标志，true表示已完成
for (var k in option) {
var leader = parseInt(getStyle(obj,k)) || 0; //获取指定元素当前属性值 
var target = option[k]; //获取指定元素目标属性值 
var step = (target - leader) / 10; //计算每次移动的步长 
step = step > 0? Math.ceil(step): Math.floor(step);
leader = leader + step; //计算属性值 
obj.style[k] = leader + 'px'; // 设置属性值 
if (leader != target) { // 判断是否完成移动 
flag= false; 
}
}
if(flag){ //移动完成后清除定时器 
clearInterval(obj.timer); 
}，15); 
}

上述第2行代码为了防止用户多次单击时，重复在一个元素上开启定时器，因此在自定义函数 animate()的开始立即清除指定元素的定时器。第3~19行代码为obj元素对象开启定时器实现动画效果，并将定时器 ID 保存在 obj 元素对象的属性 timer中，在完成指定操作后用于清除指定元素的定时器。第 5~15 行代码用于遍历所有需要以动画形式移动的属性值。其中，getStyle()自定义函数用于获取 obj的k属性的当前值; 第 8~9行根据计算获取每次移动的步长，并保证每次步长都是一个整数值; 第 12~14行用于判断当前属性值是否已达到目标值，若没有将其 flag标志设为 false。第16~18行代码根据所有属性是否移动完成的情况清除定时器。定时器的间隔设置为15毫秒，是为了达到一个连续的动画效果。定时器的间隔设置为15毫秒，是为了达到一个连续的动画效果。

(4)编写getStyle()函数

function getstyle(obj, attr) {
if (window.getComputedstyle){ // 标准浏览器 
return window.getComputedstyle(obj, null)[attr];
} else { // 早期版本IE的浏览器，IE6~8
return obj.currentstyle[attr];

在实际开发中，虽然window 对象的getCompu utedStyle()方法可以直接获取指定元素当前的实际样式，但是IE6~8版本的浏览器并不支持此方式，需要通过指定元素对象的currentStyle 来实现。其中，getComputedStyle()方法的第1个参数表示元素对象，第2个参数表示伪元素，一般情况下没有伪元素时将其设置null即可。