自己实现js运动框架的一些心得

以前学了js的动画效果，当时看了别人的实现思路，以为自己听懂了，然后没太管，感觉太简单，但是这次做的一个项目中要用到动画效果，想着如果自己都手写一下就太麻烦了，于是想着自己实现一下这个完美运动框架，但是实现的过程中发现，其实没有那么简单，要写一个完美运动框架，那么他就要适合改变各种属性，那么他的参数必须有两个，一个是要改变的元素，第二个是要改变的属性，为了实现多个属性同时运动，我们的第二个参数需要是JSON格式的数据，第三个参数可以是一个回调函数，就是当我们达到目标值后，要执行的函数，看就是下面这个样子

function startMove (obj, json, fn) {
}

代码中要获取一个元素的属性值，需要有这样的一个函数

function getStyle (obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
}

这里关于

obj.currentStyle和getComputedStyle可以参考下面这篇文章

张鑫旭写的获取元素CSS值之getComputedStyle方法熟悉这篇文章，

看了之后会有一个很好的理解，我理解大概就是这么个意思

getComputedStyle是可以把一个元素所有的样式获取出来；而元素的style只能获取到元素的style属性里面的值，如果元素的样式是外联的，就没办法获取了。

currentStyle是ie出的一个产物，作用和getComputedStyle一样

接着又回过头来讲我们运动框架，先上一般别人的代码

function startMove(obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function (){
var bStop = true;

//这一次运动就结束了——所有的值都到达了
for(var attr in json) {

//1.取当前的值
var iCur = 0;

if(attr == 'opacity') {
iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
} else {
iCur = parseInt(getStyle(obj, attr));
}

//2.算速度
var iSpeed = (json[attr]-iCur)/8;

iSpeed = iSpeed > 0?Math.ceil(iSpeed):Math.floor(iSpeed);

//3.检测停止
if(iCur!=json[attr]) {
bStop=false;
}

if(attr=='opacity') {
obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
obj.style.opacity=(iCur+iSpeed)/100;
} else {
obj.style[attr]=iCur+iSpeed+'px';
}

}

if(bStop) {
clearInterval(obj.timer);

if(fn){
fn();
}
}

}, 30)
}

用起来，是没有问题，可是元素要改变的属性如果是opacity的话，他就必须要传入0-100之间的值，这与我们平时写的opacity的值不一样，所以我自己写了一个

function startMove (obj, json, fn) {
clearInterval(obj.timer);
obj.timer = setInterval(function  () {
var bStop = true,
cur,
speed;

for (var attr in json) {
if (attr === "opacity") {
cur = parseInt((getStyle(obj, attr))*100);
//让json[attr]和cur有朝一日能相等
speed =  (parseInt(json[attr]*100) - cur)/8;
} else {
cur = parseInt(getStyle(obj, attr));
speed =  (json[attr] - cur)/8;
}

speed = speed > 0?Math.ceil(speed):Math.floor(speed);

if (cur != json[attr]) {
bStop = false;
}

if (attr === "opacity") {
obj.style.opacity = (cur + speed)/100;
} else {
obj.style[attr] = cur + speed + "px";
}
}

if(bStop) {
clearInterval(obj.timer);
if (fn) {
fn();
}
}
}, 1000);
}

我自己写的这个如果属性是opacity就可以写成0到1之间的值了，这里我总结了一条很重要的一点就是动画的当前值加上速度值，一定要在某个阶段等于目标值，我在代码中还专门为那一行做了注释，为了实现这一目标，我们在速度值的时候因为是有小数的存在，一定要在把他变为整数，这样才会到最后为1的时候精确控制目标元素的值，目标元素的值必须为整数，如果不是整数就必须做上述代码中的opacity的值*100然后在取整的操作，就是还原到整数那个阶段，但是这样其实也不太完美，如果opacity的值的小数位大于两位的话，他就有可能不会完美的到达目标值。

希望看到的人赐教。