幽灵Bug
不知道有没有遇到和我一样的bug,实现了同时运动的效果。但是呢。 宽从200变到201,透明度也从0.3变到了1,高度却只从100变成了198.致命的两像素。 //计算速度 var speed = (json[attr] - icur)/4; speed = speed>0?Math.ceil(speed):Math.floor(speed); 把/10 改成/8后,高度199,改成现在这样,高度200. 求大佬答疑。
不知道有没有遇到和我一样的bug,实现了同时运动的效果。但是呢。 宽从200变到201,透明度也从0.3变到了1,高度却只从100变成了198.致命的两像素。 //计算速度 var speed = (json[attr] - icur)/4; speed = speed>0?Math.ceil(speed):Math.floor(speed); 把/10 改成/8后,高度199,改成现在这样,高度200. 求大佬答疑。
2017-12-20
终于想通了,还是flag的问题。大家注意,var flag =true;这句话一定一定要放在for-in外面
理解如下:
首先for-in虽然使得看起来是同步进行,但实际还是你定义的运动1,运动2,运动3 顺序操作。
当放在外面的时候,三个运动是修改一个flag,有一个没满足都是false。
而当flag定义放在循环里的时候,每一个运动的每一次操作,都会重置flag为true。
模拟一下:
假定速度为1.
首先第一圈。宽是false,然运动,达到目标。高是false,运动,仍未达到。透明度是false,运动,仍未达到。
第二圈,宽为true,无运动,高是false,运动,仍未达到。透明度是false,运动,仍未达到。
第N-1圈,高值196,false, =197 ,透明度值0.31 false = 0.3
第N圈,高值为197,判断为false之后,高变成198 。而因为在刚刚N-1圈的时候,透明度的运动刚好达到目标值。所以这一圈初始就把运动2判断为false的flag掰成了true。
清除定时器。BUG出现。这也是为什么速度值改变结果会不一样。
总结:如果flag定义放在for-in。则你定义的3个运动里如果某个运动时间大于 排序靠后的,则这个运动无法完成。除非,你的速度够快。
举报