JavaScript中的延迟转换？

我正在开发一个简单的DHTML应用程序，没有什么奇怪的：我有大约500个球以不同的速度相互碰撞，通过点击一个按钮，它们根据自己的速度叠加，创建了一个麦克斯韦-玻尔兹曼分布（但这是另一个话题）。

从第一种情况切换到第二种情况，我要改变每个球的每个x和y坐标，移动它们，并以这种方式堆积它们。 现在，我的问题是：有没有可能有一种动画，在这种动画中，来自第一个混沌情况的球，而不是在一帧内跳入图表配置（只要点击按钮），逐渐堆叠在一个更加奇特的“图形”动画中？例如转换或转换，但我无法找到一种方法来实现。。。我对编程很陌生。 顺便说一下，下面是完整的代码：

完整代码：

班级舞会{
构造函数（x，y，dx，dy，半径，颜色）{
这个半径=半径；
这个.x=x；
这个。y=y；
this.dx=dx；
this.dy=dy；
//质量是球体相对于圆的质量
//它确实改变了它看起来的真实程度
this.mass=this.radius*this.radius*this.radius；
这个颜色=颜色；
};    
画（）{
ctx.beginPath（）；
弧（Math.round（this.x），Math.round（this.y），this.radius，0，2*Math.PI）；
ctx.fillStyle=this.color；
ctx.fill（）；
//ctx.strokeStyle=this.color；
ctx.stroke（）；
ctx.closePath（）；
};
速度（）{
//速度矢量大小
返回Math.sqrt（this.dx*this.dx+this.dy*this.dy）；
};
角度（）{
//速度与x轴的夹角
返回Math.atan2（this.dy，this.dx）；
};
onGround（）{
返回（this.y+this.radius>=canvas.height）
};
};
//功能
//将删除
函数randomColor（）{
设red=Math.floor（Math.random（）*3）*127；
设green=Math.floor（Math.random（）*3）*127；
设blue=Math.floor（Math.random（）*3）*127；
//把小球弄暗
如果（！大球）{
红色*=0.65
绿色*=0.65
蓝色*=0.65
}
设rc=“rgb”（“+红色+”、“+绿色+”、“+蓝色+”）；
返回rc；
}
函数randomX（）{
设x=Math.floor（Math.random（）*canvas.width）；
如果（x<30）{
x=30；
}否则如果（x+30>画布宽度）{
x=画布宽度-30；
}
返回x；
}
函数randomY（）{
设y=Math.floor（Math.random（）*canvas.height）；
如果（y<30）{
y=30；
}否则，如果（y+30>画布高度）{
y=画布高度-30；
}
返回y；
}
//将删除
函数randomRadius（）{
如果（大球）{
设r=Math.ceil（Math.random（）*10+20）；
返回r；
}否则{
设r=Math.ceil（Math.random（）*2+2）；
//设r=5；
返回r；
}
}
//将删除
函数randomDx（）{
设r=Math.floor（Math.random（）*10-4）；
返回r；
}
//将删除
函数randomDy（）{
设r=Math.floor（Math.random（）*10-3）；
返回r；
}
功能距离下一帧（a、b）{
返回Math.sqrt（（a.x+a.dx-b.x-b.dx）**2+（a.y+a.dy-b.y-b.dy）**2）-a.radius-b.radius；
}
功能距离（a，b）{
返回数学sqrt（（a.x-b.x）**2+（a.y-b.y）**2）；
}
让canvas=document.getElementById（“myCanvas”）；
设ctx=canvas.getContext（“2d”）；
设objArray=[]；
设probArray=[]；
让暂停=假；
让bumped=false；
让lefthold=false；
让坚持=错误；
让righthold=false；
失望=错误；
让arrowControlSpeed=0.25；
让重力为假；
让clearCanv=true；
让大球=假；
让lastTime=（新日期（））.getTime（）；
设currentTime=0；
设dt=0；
设numStartingSmallBalls=500；
设numStartingBigBalls=0；
文件。添加了文本列表器（“keydown”，keyDownHandler）；
函数clearCanvas（）{
clearRect（0，0，canvas.width，canvas.height）；
}
函数keyDownHandler（事件）{
如果（event.keyCode==80）{//p
暂停=！暂停；
}如果（event.keyCode==82）{//r
objArray=[]；
}如果（event.keyCode==75）{//k
clearCanv=！clearCanv；
}如果（event.keyCode==88）{//x
大球=！大球；
}
}
函数canvasBackground（）{
canvas.style.backgroundColor=“rgb（215235，240）”；
}
功能墙碰撞（球）{
如果（ball.x-ball.radius+ball.dx<0||
ball.x+ball.radius+ball.dx>canvas.width）{
ball.dx*=-1；
}
如果（ball.y-ball.radius+ball.dy<0||
ball.y+ball.radius+ball.dy>canvas.height）{
ball.dy*=-1；
}
if（ball.y+ball.radius>canvas.height）{
ball.y=canvas.height-ball.radius；
}
if（球y-球半径<0）{
ball.y=ball.radius；
}
if（ball.x+ball.radius>canvas.width）{
ball.x=canvas.width-ball.radius；
}
if（球x-球半径<0）{
ball.x=ball.radius；
}    
}
函数ballCollision（）{
for（设i=0；i 800）
ob2.color=‘红色’；
其他的
ob2.color=‘橙色’*/
静态碰撞（ob1、ob2）；
}            
}
墙碰撞（objArray[i]）；
}
如果（objArray.length>0）
墙碰撞（objArray[objArray.length-1]）
}
功能静态冲突（ob1、ob2、紧急情况=错误）
{
让重叠=ob1.radius+ob2.radius-距离（ob1，ob2）；
设smallerObject=ob1.radiusob2.radius？ob1:ob2；
//当事情正常进行时，这一行不会执行。
//“紧急”是指staticCollision已运行，但碰撞
//仍然没有解决。这意味着其中一个对象
//很可能被卡在拐角处，所以我们必须