shisanyan
2019-11-14 19:07
如果把代码修改为这样
starObj.prototype.update = function() { // body... this.timer += deltaTime; this.x += this.xSpd*deltaTime*0.002; this.y += this.ySpd*deltaTime*0.002; //判断是否出了canvas边界,如果出了边界就重置 if(this.x < 100 || this.x > 700 || this.y < 150 || this.y > 450){ this.init(); return; } if(this.timer > 100){ this.picNo += 1; this.picNo = this.picNo%7; this.timer = 0; } if(switchy){ life += 0.03*deltaTime*0.05; if(life>1){ life = 1; } }else{ life -= 0.03*deltaTime*0.05; if (life<0) { life = 0; } }};function aliveUpdte(){}
效果会差很多,想知道为什么
就我个人学完这个课程之后的收获来解答这个问题,之所以效果会变得很差,首先的一个原因是由于将做整体aliveUpdate的内容放入到具体每一个obj后执行的次数会大大增加,从原来的每一次动画判断一次life到现在的每一次动画都要在每一个星星中判断life,进而导致效率变慢,执行一次所需的时间大大增长。再而我们运用resquestAnimationFrame函数,其中的deltatime由于运行时间大大增长导致其值较大, 0.03×deltatime×0.05的值直接就大于1。因此到最后的效果不是差,只不过渐变效果优于时间间隔太长已经变成很僵硬的跳转而已。同学这这个想法的初衷应该是想让代码更简洁,只不过在实际运用过程中,代码的运行效率应该更多地被考虑
canvas实现星星闪烁特效
54188 学习 · 121 问题
相似问题