如何在图像视图中动画翻转图像

how to animate flip an image in image view

其实问题是为什么第一次翻转动画后,图片总是显示翻转(貌似图片总是从原来的位置开始)的状态。

有两个imageView,只显示一个。单击它时,它会动画 Y 轴翻转,并隐藏 imageView,然后显示另一个 imageView。再次点击时会重复翻转第一张图片的过程。

问题是当单击图像时它会动画翻转并从一个图像切换到另一个图像,翻转和切换工作正常。但下次再次点击它时,它应该会切换回另一张图片并将其翻转回来。但是动画后的图像一直处于翻转状态(反转图像)。

下面的代码片段,

<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();


        }
    });

这是正在发生的事情:

  • ImageView旋转179
  • 隐藏第一个 ImageView 并显示第二个 ImageView
  • 将秒 ImageView 旋转 179
  • 隐藏第二个 ImageView 并使第一个 ImageView 再次可见

第一个 ImageView 旋转了 179 然后可见性设置为 GONE,但它仍然旋转了 179。第一个 ImageView 的旋转永远不会重置为零,你只是隐藏然后重新显示已经旋转的 ImageView

在您的 onAnimationEnd 中,您可以添加代码来重置 rotationY 属性,例如

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

}