在ImageView中翻转和修改图像

Question

我正在开发一个简单而高效的应用程序。但是我有一个地方需要改进，那就是翻转动画。

我的需求是：我有一个按钮和一个位于按钮下方的ImageView。当点击按钮时，我希望进行一次动画，看起来像是ImageView被翻转了，下一张图像显示在ImageView中。因此，每次点击都应该显示下一张图像并带有翻转动画，但是存在一些问题。我稍后再讨论这些问题，首先让我展示一下我目前的做法。

到目前为止，我已经完成了以下内容：

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>

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

问题：

当它从0旋转到180时，当它恰好在90度时，我们可以看到图像视图边缘，这使得动画效果不太好。而且图片先改变，然后翻转动画开始，而我希望翻转动画应该在中间开始，新的图片应该出现。因此，当动画停止时，用户应该有惊喜的新图像。 所以我真的不希望将图像设置在图像视图中，然后动画开始并动画化图像视图。

请给我建议或者是否有不过时的库。

- Allay Khalil

---

如果我理解你想要做的事情，你可以尝试改变alpha属性，以开始淡出第一张图片并淡入第二张图片。 - michoprogrammer

一个重要的事情是你必须在onAnimationEnd（Animator animation）中设置新图像，而不是在flipAnimation（）之后！ - michoprogrammer

这看起来也不太好。 - Allay Khalil

但你的第一条评论值得一试，但我并没有完全理解它。 - Allay Khalil

好的，我会尝试解释我的想法 :-)

1. 实现图像翻转的动画
2. 实现渐隐图片 1 的动画
3. 实现渐显图片 2 的动画 在点 1) 和 2) 中使用一个动画集，并且当动画集完成时，在点 3) 开始动画。

- michoprogrammer

这是一个好的例子，但你需要添加翻转动画。 - michoprogrammer

Answer 1

Chathuranga的解决方案可以胜任。但你最好：

1.使用。特别是当你需要在几个上执行不同的动画时。

2.第二次翻转时从<270f>旋转到<360f>，否则你的图像将被镜像。

3.在开始动画之前，将第二张图像加载到中，以实现平滑旋转。

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

- user2548538

---

避免镜像图像的第二个要点非常有帮助。 - png

Answer 2

我曾处于你的情况，试图弄清楚如何完成这个动画。以下是我完成此操作的方法。

你需要定义两个动画。一个从0度旋转到90度，另一个从90度旋转到180度。

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>

请将这两个文件放在res/animator目录下。

在您的代码中首先启动第一个动画，为其添加一个监听器。在动画结束时更改图像并启动第二个动画。

            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) {

                }
            });

回复内容存在敏感词^**$Icon1是XML布局中图片视图的引用。

- Chathuranga Shan Jayarathna

Answer 3

试试这个简单的代码，然后告诉我

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

- michoprogrammer