Flipping and changing image in ImageView

Question

I am working on a App that is simple in work and it is working quite efficiently. But I have one place where I am looking something is not looking great and that is flipping Animation.

What I Want :

I have a Button and a ImageView beneath the button. On a Button click I want to make a Animation that it looks like ImageView has flipped and next image is shown in the ImageView. So on every click it should show next image with a flipping animation but there are some problems. I would discuss later but first let me show you how I am doing this.

What I have done so far :

flipping.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:valueFrom="0" android:valueTo="180" android:propertyName="rotationY" >
</objectAnimator>

in Activity

@Override
public void onClick(View v) {
     flipAnimation();
     ivAnimPicture.setImageResource(myImage1);      
}

private void flipAnimation(){
    ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
    anim.setTarget(ivAnimPicture);
    anim.setDuration(1500);
    anim.start();
}

Problem

When It rotates to 180 from 0 , when it comes exactly at 90 degree we can see image view edges so it makes the animation look not so good. and Also the image changes first then the Flipping animation starts where as I want that Flipping animation should start and in the middle of it the new image should appear. so when the animation stops there should be surprisingly new image for the user. So I really do not want Image to set in the image-view and then the Animation starts and Animate the image view

Please suggest me more good way or if there is library which is not obsolete.

Spake

If I understood what you want to do, you can try changing the alpha properties in order to start to fade out the first image and start to fade in the second image. – Nynorsk

One important thing is that you have to set the new image not after flipAnimation() but in the onAnimationEnd(Animator animation)! – Nynorsk

its also no looking good – Spake

but your first comment needs worth a try but I didnt completly understood it – Spake

Ok I'll try to explain my idea :-) 1) Animation for flipping the image1 2) Animation for fading out the image 1 3) Animation for fading in the image 2 Use one animator set for the point 1) and 2) and start the animation at point 3) when animator set has finished. – Nynorsk

This is a good example but you have to add the flipping animation. – Nynorsk

Answer 1

Chathuranga's solution will do the job. but you better:

1.Use ViewPropertyAnimator. Specially, when you need to perform different animations on several ImageViews.

2.rotate from 270f to 360f for second flip, otherwise your image will be mirrored.

3.Load your second Image into a Drawable before starting the animation, to have a smooth rotation.

final Drawable drawable=getResources().getDrawable(R.drawable.a);
final ImageView iv = ((ImageView)findViewById(R.id.imageView1));
iv.setRotationY(0f);
iv.animate().rotationY(90f).setListener(new AnimatorListenerAdapter()
{
    @Override
    public void onAnimationEnd(Animator animation)
    {
        iv.setImageDrawable(drawable);
        iv.setRotationY(270f);
        iv.animate().rotationY(360f).setListener(null);
    }
});

Houck

That second point of avoiding mirroring image was a tons help – Tune

Answer 2

I was in your situation trying to figure out how to get this animation done. Here's how I achieve this.

you need to define two animations. one to rotate from 0 degree to 90 degree and other for to rote from 90 degree to 180 degree

flipstage1.xml

<?xml version="1.0" encoding="utf-8"?>
   <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotationY"
    android:valueFrom="0"
    android:valueTo="90">
</objectAnimator>

flipstage2.xml

<?xml version="1.0" encoding="utf-8"?>
   <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="rotationY"
    android:valueFrom="90"
    android:valueTo="180">
</objectAnimator>

Place these two files under res/animator

In your code start first animation first, add a listener to it. On animation end change the image and start second animation.

            ObjectAnimator animStage1 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage1);
            final ObjectAnimator animStage2 = (ObjectAnimator) AnimatorInflater.loadAnimator(getActivity(), R.animator.flipstage2);
            animStage1.setTarget(imageIcon1);
            animStage2.setTarget(imageIcon1);
            animStage1.setDuration(500);
            animStage2.setDuration(500);
            animStage1.start();
            animStage1.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {
                    animStage2.start();
                    imageIcon1.setImageDrawable(ResourcesCompat.getDrawable(view.getResources(),R.drawable.okicon,null));
                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });

imageIcon1 is the reference to image view in xml layout.

Scots

Answer 3

Try this simple piece of code and let me know

ObjectAnimator anim = (ObjectAnimator) AnimatorInflater.loadAnimator(this, R.animator.flipping);
anim.setTarget(ivAnimPicture);
anim.setDuration(1500);
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        ivAnimPicture.setImageResource(myImage1);     
    }
});
anim.start();

Nynorsk