Card Flip animation in Libgdx

Question

How i achieve the card flip animation in Libgdx (flip at some angle)– i used sprite.flip(boolean x, boolean y) but unable to achieve the desired result.

I want to do similar to this :

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

Answer 1

If you use Actor in your code, you can use these two Actions I wrote:

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;
            }
        };
    }
}

You can combine those actions with

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

If you want your card to have different sides you would have to put in a middle action to switch the image of the actor.

You can also use inbuilt actions, this results in a lot of stuttering though, so I can't really recommend it:

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

Shrink the width of the first picture until it's width is zero, then start increasing the width of the second image. For example:

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

Call the flip() method in the render() method, with an if() statment detecting if the button has been pressed. Something like this:

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

        if(ButtonPressed) { 
            flip(); 
        } 

    }

Activate ButtonPressed with the eventHandler for your button. Set it equal to true. Also, make sure that unless your button's eventHandler is in the render() method, you make ButtonPressed a static variable outside any methods, still inside the class.

    public class Demo {

        static boolean ButtonPressed = false;

        public void onCreate() {
        ...

If you wanted to create an even cooler effect, increase the distance at which the width shrinks each time the flip() method is called, then once the width is zero, start decreasing the amount each time.

Hope this helps!