用libgdx创建交互式动画

Question

我正在寻找一种方式连接pan手势与百分比的动画完成。让我给你看看我的意思。

​

​

这个图像代表了我想要执行的动画，即移动图像演员或精灵。动画由pan手势执行。动画是100%完成，在第6阶段，当用户幻灯片为200 is。如果用户只滑动100 to，它将是50%完成和在第3阶段。如果用户没有执行pan手势，动画停留在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中的某个地方的更新方法。