Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Card flip animation in android [closed]

Tags:

java

android

xml

I have tired to make a flip card in android.Please make an image view,when I click on,it flip like  this

like image 870
POUYA KARIMI Avatar asked Sep 08 '17 07:09

POUYA KARIMI


People also ask

How do you flip the screen on Android?

You can flip a layout by setting the View property scaleX to -1. So View#setScaleX(1f) is normal, and View#setScaleX(-1f) is flipped (visually).

How do I turn off infinite animation on Android?

Use clearAnimation() to stop an animation.


2 Answers

imageView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        final ObjectAnimator oa1 = ObjectAnimator.ofFloat(imageView, "scaleX", 1f, 0f);
        final ObjectAnimator oa2 = ObjectAnimator.ofFloat(imageView, "scaleX", 0f, 1f);
        oa1.setInterpolator(new DecelerateInterpolator());
        oa2.setInterpolator(new AccelerateDecelerateInterpolator());
        oa1.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                imageView.setImageResource(R.drawable.frontSide);
                oa2.start();
            }
        });
        oa1.start();
    }
});

This animation doesn't have any depth but maybe you will like it.

You can also set animation duration with

oa1.setDuration(1000);
oa2.setDuration(1000);
like image 91
Cahid Enes Keles Avatar answered Oct 16 '22 14:10

Cahid Enes Keles


Property Animations (not to be confused with the older View Animation) are quite powerful :

final View v = <the_image_view>;

// first quarter turn
v.animate().withLayer()
        .rotationY(90)
        .setDuration(300)
        .withEndAction(
                new Runnable() {
                    @Override public void run() {

                        <change the image...>

                        // second quarter turn
                        v.setRotationY(-90);
                        v.animate().withLayer()
                                .rotationY(0)
                                .setDuration(300)
                                .start();
                    }
                }
        ).start();

You can adjust the perspective effect with View.setCameraDistance()

like image 40
bwt Avatar answered Oct 16 '22 15:10

bwt