缓动的小球
实现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即可。