java - 如何使 LibGDX Actions moveTo() 以曲线形式从一个点到另一个点进行动画处理？

Question

我正在 LibGDX 中开发一个项目，并且我正在为我的一些 Sprite 使用 Scene2D Actor 。在这方面，我有一个 Sprite ，它在屏幕上的某个位置生成，需要移动到屏幕上的另一个位置。为此，我在操作中使用 moveTo(xPos, yPos,uration, interpolation) 方法来制作移动动画。

但是，当我使用这种方法时， Actor 按照我的指示移动，但它只沿直线移动，从 A 点到 B 点。我尝试了几种插值选项，例如圆插值等，但它似乎只影响动画线的速度。

现在我的问题是:如何使我的动画从 A 到 B 形成平滑的曲线(见图)？

我目前正在使用此代码来制作 Action 动画:

adultCustomerPointActor.addAction(Actions.sequence(
    Actions.moveTo(300, 200, 2f, Interpolation.circle)
));

预先感谢您的帮助:)

Answer 1

这是一道几何问题。使用 vector ，找到两点之间的中间点:

vec1.set(bx, by).sub(ax, ay).scl(0.5f).add(ax, ay);

从点之间的 vector 获取另一个 90 或 270 的 vector :

vec2.set(bx, by).sub(ax, ay).rotate90().add(vec1);

这个vec2可以缩放以调整弧的极端曲率。如果你不管它，你就会得到四分之一圆。您还可以将其缩放为负值以反转曲率。

然后将第二个 vector 添加到第一个 vector 以找到弧的中心点，我们可以将其称为点 C。

vec1.set(bx, by).sub(vec2); // CB
vec3.set(ax, ay).sub(vec2); // CA
float angle = vec1.angle(vec3);

现在您需要一个从 C 点指向 A 点的 vector 。您将旋转该 vector 直到它到达 B 点。因此您需要 CA 和 CB 之间的角度。

这里有一个非常简单的类来实现这一点。它还没有考虑到你是否想要弧线向上或向下以及是否想要缩放它看起来有多极端。您可以使用 getter/setter 将它们添加为附加参数。我还没有测试过，所以可能需要一些调试。

public class ArcToAction extends MoveToAction {
    private float angle;
    private final Vector2 vec1 = new Vector2(), vec2 = new Vector2(), vec3 = new Vector2();

    @Override
    protected void begin () {
        super.begin();
        float ax = target.getX(getAlignment()); // have to recalculate these because private in parent
        float ay = target.getY(getAlignment());
        vec1.set(getX(), getY()).sub(ax, ay);
        vec2.set(vec1).rotate90();
        vec1.scl(0.5f).add(ax, ay);
        vec2.add(vec1);
        vec1.set(bx, by).sub(vec2); // CB
        vec3.set(ax, ay).sub(vec2); // CA
        angle = vec1.angle(vec3);
    }

    protected void update (float percent) {
        if (percent >= 1){
            target.setPosition(getX(), getY(), getAlignment());
            return;
        }

        vec1.set(vec3).rotate(percent * angle);
        target.setPosition(vec1.x, vec1.y, getAlignment());
    }

}

如果你想支持自动池化，你可以添加这样的方法:

static public ArcToAction arcTo (float x, float y, float duration, Interpolation interpolation) {
    ArcToAction action = Actions.action(ArcToAction .class);
    action.setPosition(x, y);
    action.setDuration(duration);
    action.setInterpolation(interpolation);
    return action;
}