两个状态之间的平滑过渡（动态生成）

Question

我有一个图形元素。让我们给出一个初始状态。

定义状态：屏幕上的位置以及由图像的3个角的坐标给出的自定义变换（比例+旋转+倾斜）（左上角，右上角和下角 - 左）。

在稍后的某个时刻，该应用程序收到了一些输入，给出了一个新的状态。此时我需要图形元素开始向新状态的转换，进行自然过渡（不要在元素的比例中出现大的失真）。

此外，如果在转换结束之前收到新状态，它将被放弃，新转换将从它保留的位置开始。

有什么建议我能做到这一点吗？

Answer 1

iuliux，

在N个步骤中设置转换动画的经典实现如下：

for (i = 0;  i <= N;  ++i) {
  for (p = 0;  p < nPoints;  ++p) {
    pointsToDraw[p] = initialPoints[p] + (finalPoints[p] - initialPoints[p]) * i / N
  }
  drawFigureAt(pointsToDraw);
}

英文：

1. 对于每个点，想象一下它的初始和最终位置之间的一条线。
2. 计算沿线的点，将其划分为相等大小的N段。
3. 使用第一组点绘制图形，然后是下一个等。

如果图形在您绘制最终状态之前移动，请将其当前位置复制到initialPoints并再次开始转换。

希望有所帮助！