使用libgdx创建交互式动画

Question

我正在寻找一种连接平移手势和动画完成百分比的方法。让我告诉你我的意思。

此图像表示我想要执行的动画，即移动的Image actor或sprite。动画由 pan 手势执行。动画完成100％，第6阶段用户滑动200px。如果用户仅滑动100px，那么它将完成50％并且处于第3阶段。如果用户没有执行平移手势，则动画保持在0％并且处于第1阶段。我正在寻找有关如何开始构建此类动画的提示一个模型。我相信它被称为互动。你有什么建议吗？

Answer 1

您可以使用GestureDetector处理平移输入。 gestureListener.pan方法可以更新动画位置参数。

private int screenPixelsToAnimationPositionRatio = 0.01f; //will need to tweak this and probably adjust it at runtime based on screen dimensions and resolution
private float animationPosition = 0; //from 0 to 1, fraction of animation complete

public void create () {

    //...

    GestureAdapter gestureAdapter = new GestureAdapter {
        @Override
        public boolean pan (float x, float y, float deltaX, float deltaY) {
            animationPosition += deltaX * screenPixelsToAnimationPositionRatio;
            animationPosition = MathUtils.clamp(animationPosition, 0, 1);
            return true;
        }
    };

    GestureDetector gestureDetector = new GestureDetector(gestureAdapter);
    Gdx.input.setInputProcessor(gestureDetector); //or put the detector in an InputMultiplexer with your other input listeners.
}

然后，您将创建一个方法，可以根据animationPosition的当前值更新对象的位置和旋转。你需要找出决定你想要的运动的方程式。例如，看起来有点像上图所示的内容：

private void updateAnimation (){
    x = animationPosition * 30;
    float y = 0, rotation = 0;
    if (animationPosition >= 0.25f) { 
        float jumpPosition = Math.min(1, (animationPosition - 0.25f) / 0.5f);
        y = 30 * (1 - Interpolation.pow2In.apply(Math.abs(2 * jumpPosition - 1)));
        rotation = 180 * jumpPosition;
    }

    mySprite.setPosition(x, y);
    mySprite.setRotation(rotation);
}

然后在render中的某处调用此更新方法。