如何在图像视图中动画翻转图像
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);
}
}
其实问题是为什么第一次翻转动画后,图片总是显示翻转(貌似图片总是从原来的位置开始)的状态。
有两个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);
}
}