Javascript 加速Starfield画布动画并控制它

我正在尝试创建starfield的画布动画。它有一个固定的速度值，所以星星以相同的速度移动，但现在我想在星星不移动的情况下启动它，当你点击一个按钮时，我想慢慢启动，然后逐渐增加速度，然后再次减速并停止。我如何做到这一点

速度应该像这个例子

const canvas=document.getElementById（'c'）；
const c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
window.addEventListener（'wheel'，（事件）=>{
如果（event.deltaY<0）速度*=1.1；
其他速度*=0.9；
如果（速度<0.01）速度=0.01；
否则，如果（速度>0.1）速度=0.1；
});
班级明星{
构造函数（）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px，this.py；
this.z=Math.random（）*4；
}
更新（）{
this.px=this.x；
this.py=this.y；
这个.z+=速度；
这个.x+=这个.x*（速度*0.2）*这个.z；
这个.y+=这个.y*（速度*0.2）*这个.z；
如果（this.x>canvas.width/2+50 | | this.x<-canvas.width/2-50||
this.y>canvas.height/2+50 | | this.y<-canvas.height/2-50）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px=this.x；
this.py=this.y；
这个.z=0；
}
}
show（）{
c、 线宽=this.z；
c、 beginPath（）；
c、 移动到（这个.x，这个.y）；
c、 lineTo（this.px，this.py）；
c、 笔划（）；
}
}
让速度=0.09；
让星星=[]；
对于（让i=0；i<1000；i++）星。推（new Star（））；
c、 fillStyle='rgba（0,0,0,0.4）'；
c、 strokeStyle='rgb（255，255，255，0.5）'；
c、 平移（canvas.width/2，canvas.height/2）；
函数绘图（）{
请求动画帧（绘制）；
c、 fillRect（-canvas.width/2，-canvas.height/2，canvas.width，canvas.height）；
为了（让我们一起看星星）{
s、 更新（）；
s、 show（）；
}
}
draw（）；
身体{
填充：0；
保证金：0；
}
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
}

您必须提高

功能绘图中的速度，以产生加速效果，然后降低到减速


const canvas=document.getElementById（'c'）；
const c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
班级明星{
构造函数（）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px，this.py；
this.z=Math.random（）*4；
}
更新（）{
this.px=this.x；
this.py=this.y；
这个.z+=速度；
这个.x+=这个.x*（速度*0.2）*这个.z；
这个.y+=这个.y*（速度*0.2）*这个.z；
如果（this.x>canvas.width/2+50 | | this.x<-canvas.width/2-50||
this.y>canvas.height/2+50 | | this.y<-canvas.height/2-50）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px=this.x；
this.py=this.y；
这个.z=0；
}
}
show（）{
c、 线宽=this.z；
c、 beginPath（）；
c、 移动到（这个.x，这个.y）；
c、 lineTo（this.px，this.py）；
c、 笔划（）；
}
}
让速度=0.005；
设速度=0.0002；
让星星=[]；
对于（让i=0；i<1000；i++）星。推（new Star（））；
c、 fillStyle='rgba（0,0,0,0.4）'；
c、 strokeStyle='rgb（255，255，255，1）'；
c、 翻译（canvas.width/2，canvas.height/2）；
函数绘图（）{
请求动画帧（绘制）；
c、 fillRect（-canvas.width/2，-canvas.height/2，canvas.width，canvas.height）；
为了（让我们一起看星星）{
s、 更新（）；
s、 show（）；
}
如果（速度>=0.005）{
速度+=速度公司
如果（速度>0.1）
速度=0.0004；
}
}
draw（）
正文{
填充：0；
保证金：0；
}
帆布{
位置：绝对位置；
宽度：100%；
身高：100%；
}
您必须提高
函数draw
中的速度，以产生加速效果，然后降低到减速


const canvas=document.getElementById（'c'）；
const c=canvas.getContext（'2d'）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
班级明星{
构造函数（）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px，this.py；
this.z=Math.random（）*4；
}
更新（）{
this.px=this.x；
this.py=this.y；
这个.z+=速度；
这个.x+=这个.x*（速度*0.2）*这个.z；
这个.y+=这个.y*（速度*0.2）*这个.z；
如果（this.x>canvas.width/2+50 | | this.x<-canvas.width/2-50||
this.y>canvas.height/2+50 | | this.y<-canvas.height/2-50）{
this.x=Math.random（）*canvas.width-canvas.width/2；
this.y=Math.random（）*canvas.height-canvas.height/2；
this.px=this.x；
this.py=this.y；
这个.z=0；
}
}
show（）{
c、 线宽=this.z；
c、 beginPath（）；
c、 移动到（这个.x，这个.y）；
c、 lineTo（this.px，this.py）；
c、 笔划（）；
}
}
让速度=0.005；
设速度=0.0002；
让星星=[]；
对于（让i=0；i<1000；i++）星。推（new Star（））；
c、 fillStyle='rgba（0,0,0,0.4）'；
c、 strokeStyle='rgb（255，255，255，1）'；
c、 翻译（canvas.width/2，canvas.height/2）；
函数绘图（）{
请求动画帧（绘制）；
c、 fillRect（-canvas.width/2，-canvas.height/2，canvas.width，canvas.height）；
为了（让我们一起看星星）{
s、 更新（）；
s、 show（）；
}
如果（速度>=0.005）{
速度+=速度公司
如果（速度>0.1）
速度=0.0004；