经过多番测试,视频中的完美运动代码存在bug,这个框架只可以实现同步动画,不可以实现链式动画。
同步动画最后会停止,不是因为if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
而是代码中的speed = (json[attr] - icur)/8;
这一部分等于0了,也就是说,动画不再变化了,看起来就好像清除了定时器一样。
如果在清除定时器的判定语句中加入一个测试语句,可以发现,第一次鼠标移入目标的时候,第一次执行到这个动画,是不会执行到测试的语句的,说明定时器的判定语句并未执行。if(flag){
alert(12345678978979); //注意这部分,第一次执行动画的时候,是不会执行到这里的。因为flag一直是false
clearInterval(obj.timer);
if(fn){
fn();
}
}
如果没有onmouseout的动画,那么,第二次鼠标移进去的时候,在执行动画之前,都满足json[attr]=icur;
也就是说speed在第二次执行动画的时候,一直是0,那么这个时候,下面这个判定就没有执行了if(icur != json[attr]){
flag = false;
}
于是flag就是第二次执行动画的初始值,也就是:var flag = true;
自然而然的,后面的这部分代码就能够执行了。if(flag){
alert(12345678978979);//第二次执行onmouseover动画,就会执行到这里了
clearInterval(obj.timer);
if(fn){
fn();
}
}
上面讲得比较啰嗦,不知道大家有没有看懂,没看懂的可以照着一步一步去尝试一下,会得到我说的这个结果的