                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /canvas实现星星闪烁特效

为什么把aliveUpdate里更新的内容在update内效果就不好呢？

如果把代码修改为这样

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(){}

效果会差很多，想知道为什么

shisanyan

2019-11-14

源自：canvas实现星星闪烁特效 3-2

关注问题我要回答

1040

操作

收起

1 回答

Julian_Chance
2019-11-17

就我个人学完这个课程之后的收获来解答这个问题，之所以效果会变得很差，首先的一个原因是由于将做整体aliveUpdate的内容放入到具体每一个obj后执行的次数会大大增加，从原来的每一次动画判断一次life到现在的每一次动画都要在每一个星星中判断life，进而导致效率变慢，执行一次所需的时间大大增长。再而我们运用resquestAnimationFrame函数，其中的deltatime由于运行时间大大增长导致其值较大， 0.03×deltatime×0.05的值直接就大于1。因此到最后的效果不是差，只不过渐变效果优于时间间隔太长已经变成很僵硬的跳转而已。同学这这个想法的初衷应该是想让代码更简洁，只不过在实际运用过程中，代码的运行效率应该更多地被考虑