为了账号安全,请及时绑定邮箱和手机立即绑定

幽灵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. 求大佬答疑。

正在回答

1 回答

终于想通了,还是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个运动里如果某个运动时间大于 排序靠后的,则这个运动无法完成。除非,你的速度够快。

3 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS动画效果
  • 参与学习       113926    人
  • 解答问题       1443    个

通过本课程JS动画的学习,从简单动画开始,逐步深入各种动画框架封装

进入课程
意见反馈 帮助中心 APP下载
官方微信