Libgdx 中的卡片翻转动画

Question

我如何在 Libgdx 中实现卡片翻转动画（以某个角度翻转）——我使用了sprite.flip(boolean x, boolean y)但无法达到预期的结果。

我想做类似的事情：

http://developer.android.com/training/animation/cardflip.html

Answer 1

如果你在你的代码中使用Actor，你可以使用我写的这两个Action：

public class MyActions {
    public static Action flipOut(final float x, final float width, final float duration) {
        return new Action() {
            float left = duration;

            @Override
            public boolean act(float delta) {
                left -= delta;
                if (left <= 0) {
                    actor.setX(x + (width / 2));
                    actor.setWidth(0);
                    return true;
                }
                float tmpWidth = width * (left / duration);
                actor.setX(x + ((width / 2) - (tmpWidth / 2)));
                actor.setWidth(tmpWidth);
                return false;
            }
        };
    }

    public static Action flipIn(final float x, final float width, final float duration) {
        return new Action() {
            float done = 0;

            @Override
            public boolean act(float delta) {
                done += delta;
                if (done >= duration) {
                    actor.setX(x);
                    actor.setWidth(width);
                    return true;
                }
                float tmpWidth = width * (done / duration);
                actor.setX(x + ((width / 2) - (tmpWidth / 2)));
                actor.setWidth(tmpWidth);
                return false;
            }
        };
    }
}

您可以将这些操作与

myActor.addAction(
    new SequenceAction(
        MyActions.flipOut(x, width, duration),
        MyActions.flipIn(x, width, duration)));

如果你想让你的卡片有不同的一面，你必须在中间动作来切换演员的形象。

您还可以使用内置操作，但这会导致很多口吃，所以我不能真正推荐它：

SequenceAction action = new SequenceAction(
    new ParallelAction(
        Actions.scaleTo(0, 1, duration), 
        Actions.moveBy(width / 2, 0, duration)),
    new ParallelAction(
        Actions.scaleTo(1, 1, duration), 
        Actions.moveBy(-width / 2, 0, duration)));

Answer 2

缩小第一张图片的宽度直到其宽度为零，然后开始增加第二张图片的宽度。例如：

    public void flip() {
        if(Graphic1.getWidth() == 0) {
             Graphic2.setWidth(Graphic2.getWidth()+5);
        } else {
             Graphic1.setWidth(Graphic1.getWidth()-5);
        }
    }

flip()在方法中调用该方法render()，用一条if()语句检测按钮是否被按下。像这样的东西：

    @Override
    public void render() { 
        Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT); 
        boolean ButtonPressed = false;

        if(ButtonPressed) { 
            flip(); 
        } 

    }

ButtonPressed使用按钮的 eventHandler激活。将其设置为等于true。另外，请确保除非按钮的 eventHandler 位于方法中render()，否则您将ButtonPressed在任何方法外部创建一个静态变量，但仍在类内部。

    public class Demo {

        static boolean ButtonPressed = false;

        public void onCreate() {
        ...

如果您想创建更酷的效果，请增加每次flip()调用该方法时宽度缩小的距离，然后一旦宽度为零，就开始每次减少宽度。

希望这可以帮助！