是这样的。因为比较喜欢js,而且js数组也好操作,想用网页写一个电梯模拟算法,用到了animate来表现动画效果。
最开始的时候我遇到了这样的问题。假设电梯从6楼下降到1楼,那么就要生成一个从6到1楼的匀速运动动画,这个动画是一个线程。但是如果到了4楼的时候,突然3楼有人要上电梯,那就必须得停下来。如果在这个线程之后直接调用,毫无疑问是不可能的,它会先到1楼后上3楼,但如果在接收到3楼请求的时候立刻调用stop(true)方法停止动画并且重新生成一个动画的话,在这里会卡顿一下,这样看起来好像电梯故障,不是想要的效果。
经过一番查资料,我找到了step这个方法,先贴一下网上的资料代码。借用,无意冒犯
$(".demo").animate({
aa:2,
bb:10
}, {
step:function(now,fx){
//参数step:规定每个动画的每一步完成之后要执行的函数
// now:是当前动画正在改变的属性的实时值;
// fx: jQuery.fx 原型对象的一个引用,其中包含了多项属性,比如
// 执行动画的元素:elem;
// 动画正在改变的属性:prop;
// 正在改变属性的当前值:now;
// 正在改变属性的结束值:end;
// 正在改变属性的单位:unit;等
// 可在这里改变animate第1个参数中设置的属性bb在动画结束时的值
if(fx.prop=="bb"){fx.end=5}
//console.log(fx.prop+": "+n);
},
duration:1000
})
这个step方法相当于把一个动画分解成无数小段,每执行一个小段就会调用一遍。并且提供了修改fx.now和fx.end的值的机会,我以为这就是我要的方法。只要接收到3楼请求的时候,修改fx.end为3楼就行了。紧接着新的问题就出来了。
fx.now虽然也是fx的一个属性,但这个属性是根据start、end以及移动百分比来计算的,一旦修改了end,now值就会改变,造成电梯突然往上抽搐一下接着下降的效果。有没有dalao对这个方法比较熟悉,能不能帮忙想个解决办法