how to animate flip an image in image view

Question

actually the question is why after first flip animation, the image is always displayed in flipped (looks like the image is always start from its original position) state.

having two imageView, only one is displayed. When clicking on it, it will animate flip by Y axe, and hide the imageView then display another imageView. When clicking again it will repeat the process to flip back the first image.

the problem is when clicking on the image it animates flip and switch from one image to the other, the flip and switch works fine. But next time clicking on it again, it supposes to switch back to the other image and flip it back. But the image after the animation keeps to be in flipped state (reversed image).

code snippet below,

<RelativeLayout
    android:id="@+id/imager_contaner"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_marginLeft="5dp">

<ImageView
    android:id="@+id/imgAvatar"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_gravity="center"
    android:background="@drawable/oval"
    android:src="@mipmap/iamge_one”
    android:scaleType="fitCenter"
/>

<ImageView
    android:id="@+id/imgAvatar_checked"
    android:layout_width="28dp"
    android:layout_height="28dp"
    android:layout_gravity="center"
    android:scaleType="fitCenter"
    android:background="@drawable/oval"
    android:src="@mipmap/check_icon”
    android:visibility="gone"
    />
</RelativeLayout>


View imager_contaner = convertView.findViewById(R.id. imager_contaner);
final ImageView ivAvatar = (ImageView)convertView.findViewById(R.id.imgAvatar);
ImageView avatarChecked = (ImageView)convertView.findViewById(R.id.imgAvatar_checked);

vatarContainer.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

            Object o = imager_contaner.getTag();

            final boolean isChecked = (o != null && (o instanceof String) && ((String)(o)).equals("checked"));
            if (isChecked) {
                imager_contaner.setTag("");
            } else {
                imager_contaner.setTag("checked");
            }

            final int rotate = 179; //!isChecked ? 179 : -179;

            final View animAvatarView = !isChecked ? showingAvater : avatarChecked;

            ObjectAnimator anim3 = ObjectAnimator.ofFloat(animAvatarView, "rotationY", 0, rotate);
            anim3.setDuration(500);
            anim3.addListener(new Animator.AnimatorListener() {
                @Override
                public void onAnimationStart(Animator animation) {

                }

                @Override
                public void onAnimationEnd(Animator animation) {

                    if (!isChecked) {
                        showingAvater.setVisibility(View.GONE);
                        avatarChecked.setVisibility(View.VISIBLE);                      
                    }       
                    else {
                        avatarChecked.setVisibility(View.GONE);
                        showingAvater.setVisibility(View.VISIBLE);
                    }

                }

                @Override
                public void onAnimationCancel(Animator animation) {

                }

                @Override
                public void onAnimationRepeat(Animator animation) {

                }
            });

            anim3.start();


        }
    });

Answer 1

Here's what's happening:

• rotate first ImageView by 179
• hide first ImageView and display second ImageView
• rotate second ImageView by 179
• hide second ImageView and make first ImageView visible again

The first ImageView was rotated by 179 then visibility set to GONE, but it's still rotated by 179. The rotation of the first ImageView is never reset to zero, you're just hiding then re-showing the already rotated ImageView.

In your onAnimationEnd you could add code to reset the rotationY properties, eg.

@Override
public void onAnimationEnd(Animator animation) {

    if (!isChecked) {
        showingAvater.setVisibility(View.GONE);
        showingAvater.setRotationY(0);
        avatarChecked.setVisibility(View.VISIBLE);                      
    }       
    else {
        avatarChecked.setVisibility(View.GONE);
        avatarChecked.setRotationY(0);
        showingAvater.setVisibility(View.VISIBLE);
    }

}