Javascript 二维变换，为什么会出现这种行为

我有下面的代码，在代码中，我试图设置块相对于我定义的偏移的变换的动画。 但是我得到的不是一个平滑的转换，而是一个非常奇怪的行为，它看起来是复制成三个，然后是两个，然后是三个，然后是一个

我知道这是一种视错觉，但我很好奇为什么我没有得到围绕定义点逐渐旋转的预期行为，而是得到了这种螺旋桨效应

我在2d/3d操作方面是个新手，我不懂所有的数学，但我想学习它，这就是我写这篇文章的原因，来掌握这些数字的实际情况

我正在寻找这种行为发生的原因，因为这并不是我所期望的

总而言之：我希望随着度数的增加逐渐旋转，相反，我得到的是到处都是的动画。我做错了什么

功能块位置（x、y、z）{
这个.x=x；
这个。y=y；
这个。z=z；
}
BlockPos.prototype.getX=函数（）{
归还这个.x；
}
BlockPos.prototype.getZ=函数（）{
返回这个.z；
}
BlockPos.prototype.getY=函数（）{
把这个还给我；
}
BlockPos.prototype.setX=函数（x）{
这个.x=x；
}
BlockPos.prototype.setZ=函数（z）{
这个。z=z；
}
BlockPos.prototype.setY=功能（y）{
这个。y=y；
}
功能块（颜色、块位置）{
这个颜色=颜色；
this.blockpos=blockpos；
}
Block.prototype.getBlock=函数（）{
返回“”；
}
arr=[
新区块（“绿色”，新区块位置（1,1,1）），
新区块（“绿色”，新区块位置（1,1,2）），
新区块（“绿色”，新区块位置（1,1,3）），
新区块（“红色”，新区块位置（2,1,1）），
新区块（“红色”，新区块位置（3,1,1）），
新区块（“红色”，新区块位置（4,1,1）），
新区块（“红色”，新区块位置（5,1,1））
];
html=''；
中心=新区块位置（0,1,0）；
函数旋转起点（位置、中心、角度）{
//点旋转\点（浮动cx、浮动cy、浮动角度、点p）
var s=数学sin（角度）；
var c=数学cos（角度）；
var p=新区块位置（位置getX（），位置getY（），位置getZ（））；
//将点转换回原点：
p、 x-=center.getX（）；
p、 z-=center.getZ（）；
//旋转点
var xnew=p.x*c-p.z*s；
var znew=p.x*s+p.z*c；
//将点翻译回：
p、 x=xnew+center.getX（）；
p、 z=znew+center.getZ（）；
返回p；
}
功能度弧度（度）{
返回度*3.14159265358979323846264338327950288/180
}
功能旋转（arr、中心、度）{
对于（var c=0；c=360）旋转=0；
var html=旋转+度
；
arr=旋转（arr，中心，旋转）；
对于（c=0；c就像你说的，这是一种视错觉。由于它旋转得很快，正方形在每帧之间旋转四分之一甚至三分之一，所以在你的眼睛里，它看起来像是物体的多个副本，因为它只是“跳跃”到它的新位置。你的代码没有问题，只是我们的眼睛处理运动的方式。你甚至可以在现实生活中通过看一个风扇看到这一点。在一定的速度下，你会看到叶片缓慢甚至向后移动。
就像你说的，这是一种视错觉。因为它旋转得如此之快，正方形移动了四分之一度r即使在每一帧之间旋转三分之一，在你的眼中，它看起来像是对象的多个副本，因为它只是“跳跃”到它的新位置。你的代码没有问题，只是我们的眼睛处理运动的方式。在现实生活中，你甚至可以通过看风扇看到这一点。在某些速度下，你会看到叶片缓慢甚至向后移动。
问题的核心在于：

arr = rotate(arr,center,rotation);

您在已旋转的
arr
上指定旋转，并且在旋转函数中不考虑增量时间。相反，您将（已旋转的）
arr
旋转所经过的总时间-这会产生加速度/累积

改为考虑增量时间为
1
的相同代码


功能块位置（x、y、z）{
这个.x=x；
这个。y=y；
这个。z=z；
}
BlockPos.prototype.getX=函数（）{
归还这个.x；
}
BlockPos.prototype.getZ=函数（）{
返回这个.z；
}
BlockPos.prototype.getY=函数（）{
把这个还给我；
}
BlockPos.prototype.setX=函数（x）{
这个.x=x；
}
BlockPos.prototype.setZ=函数（z）{
这个。z=z；
}
BlockPos.prototype.setY=功能（y）{
这个。y=y；
}
功能块（颜色、块位置）{
这个颜色=颜色；
this.blockpos=blockpos；
}
Block.prototype.getBlock=函数（）{
返回“”；
}
arr=[
新区块（“绿色”，新区块位置（1,1,1）），
新区块（“绿色”，新区块位置（1,1,2）），
新区块（“绿色”，新区块位置（1,1,3）），
新区块（“红色”，新区块位置（2,1,1）），
新区块（“红色”，新区块位置（3,1,1）），
新区块（“红色”，新区块位置（4,1,1）），
新区块（“红色”，新区块位置（5,1,1））
];
html=''；
中心=新区块位置（0,1,0）；
函数旋转起点（位置、中心、角度）{
//点旋转\点（浮动cx、浮动cy、浮动角度、点p）
var s=数学sin（角度）；
var c=数学cos（角度）；
var p=新区块位置（位置getX（），位置getY（），位置getZ（））；
//将点转换回原点：
p、 x-=center.getX（）；
p、 z-=center.getZ（）；
//旋转点
var xnew=p.x*c-p.z*s；
var znew=p.x*s+p.z*c；
//将点翻译回：
p、 x=xnew+center.getX（）；
p、 z=znew+center.getZ（）；
返回p；
}
功能度弧度（度）{
返回度*3.14159265358979323846264338327950288/180
}
功能旋转（arr、中心、度）{
对于（var c=0；c=360）旋转=0；
var html=旋转+度
；
arr=旋转（arr，中心，1）；
对于（c=0；c而言，问题的核心在于：

arr = rotate(arr,center,rotation);

您在已旋转的
arr
上指定旋转，并且在旋转函数中不考虑增量时间。相反，您将（已旋转的）
arr
旋转所经过的总时间量，即