封装一个原生JavaScript动画函数
函数说明
- startAnimation() 函数的入口。接收三个参数:
- obj:被操作的Dom对象
- json:{"预处理的属性":预处理属性值}
- fn:startAnimation函数的回调,动画是否为联动/同步等形式。
使用场景:
- 缓动场景,透明度动画,多物体运动,多值运动,自动轮播图...。
代码
var speed = 0; //起始定义一个运动速度变量。 function startAnimation(obj, json, fn) { clearInterval(obj.timer); //在动画开始之前,先进行动画定时器的清理工作。 obj.timer = setInterval(function () { var cur = 0; //定义一个初始值为零的变量,用来接收操作对象的属性 var flag = true; //如果所有的属性值都到达终点值,则为true //透明度处理 for (var attr in json) { switch(attr){ case 'opacity': cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); break; case 'scrollTop': cur = obj[attr]; break; default: cur = parseInt(getStyle(obj, attr)); break; } //1.求速度 speed = (json[attr] - cur) / 20; speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed); //2.临界处理 if (json[attr] !== cur) { flag = false; } //3.运动起来 switch(attr){ case 'opacity': obj.style[attr] = (cur + speed) / 100; break; case 'scrollTop': obj.scrollTop = cur + speed; break; default: obj.style[attr] = cur + speed + 'px'; break; } } if (flag) { clearInterval(obj.timer); if (fn) { fn(); } return; } }, 30); } //获取属性的函数 function getStyle(obj, attr) { if (obj.currentStyle) { //兼容IE return obj.currentStyle[attr]; } else { //主流浏览器 return getComputedStyle(obj, null)[attr]; } }