缓动的小球

缓动的小球

实现DOM元素的动画特效是JS常见的功能，实现原理是通过定时器连续修改当前DOM元素的某个样式值，达到一个动态的特效。DOM元素样式值的改变是通过公式实现的：

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

target是目标点，leader是起始点，step表示从起始位置到目标点每次缓动的步长。

1、编写HTML代码

    <style>
      #box{position:absolute;width:120px;height:120px;
	  line-height:120px;text-align:center;
	  background:red;color:#fff;border-radius:60px;}
    </style>
    <div id="box">点我啊，跑！</div>

通过position:absolute设置小球的绝对定位属性。

2、为小球绑定单击事件

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

通过获取id值为box的小球，调用animate()自定义函数完成动画的实现。obj代表以动画方式移动的对象，{‘left’: 400, ‘top’: 200}利用对象保存需要改变的元素属性值。

3、animate()动画函数

      	function animate(obj, option) {
        clearInterval(obj.timer);                           // 防止多次触发事件，重复开启定时器
        obj.timer = 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;              // 计算每次移动的步长 target代表目标点/leader表示起始点
            step = step > 0 ? Math.ceil(step) : Math.floor(step);//step表示从起始点到目标点每次缓动的步长
            leader = leader + step;           // 计算属性值
            obj.style[k] = leader + 'px';     // 设置属性值
            if (leader != target) {           // 判断是否完成移动
              flag = false;
            }
          }
          if (flag) {                         // 移动完成后清除定时器
            clearInterval(obj.timer);
          }
        }, 60);
      }

clearInterval(obj.timer); 清理计时器，为了防止用户多次单击时，重复在一个元素上开启定时器，所以在animate()的开始立即清除指定元素的定时器，for循环用于遍历所有需要以动画形式移动的属性值，第一个if判断语句用于判断当前属性值是否已达到目标值，若没有将其flag标志设为false，第二个if判断语句根据所有属性是否移动完成的情况清除定时器。

4、通过getStyle()函数获取指定元素对象的属性值

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

getComputedStyle()方法第一个参数代表元素对象，第二个参数代表伪元素，一般没有伪元素时将其设置为null即可。