Libgdx 中的卡片翻转动画答案

【问题标题】：Card Flip animation in LibgdxLibgdx 中的卡片翻转动画
【发布时间】：2014-03-21 09:24:52
【问题描述】：

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

我想做类似的事情：

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

【问题讨论】：

sprite.flip 在这种情况下对您没有帮助，您可以制作两个网格平面并沿 x 轴旋转它们以实现此动画
@whiteFang 感谢您的回复.. 请给我一些参考或链接来帮助我做到这一点（我从未使用过网格平面）

标签： 3d libgdx flip

【解决方案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)));

【讨论】：

【解决方案2】：

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

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

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

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

        if(ButtonPressed) { 
            flip(); 
        } 

    }

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

    public class Demo {

        static boolean ButtonPressed = false;

        public void onCreate() {
        ...

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

希望这会有所帮助！

【讨论】：