Question

我正在开发一款工作简单且效率很高的应用程序。但我有一个地方，我正在寻找一些看起来不太好的东西，那就是翻动动画。

我想要的：

我在按钮下面有一个Button和一个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>

在活动中

@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度时，我们可以看到图像视图边缘，因此它使动画看起来不那么好。并且图像也会先改变然后翻转动画开始，因为我想要翻转动画应该开始，在它的中间应该出现新图像。因此，当动画停止时，应该为用户提供令人惊讶的新图像。所以我真的不希望Image在图像视图中设置，然后动画启动并动画图像视图

请建议我更好的方法或者有没有过时的图书馆。

Answer 1

Chathuranga的解决方案将完成这项工作。但你最好：

1.使用ViewPropertyAnimator。特别是，当您需要在多个ImageViews上执行不同的动画。

2.从270f转到360f进行第二次翻转，否则您的图片将镜像。

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

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

                @Override
                public void onAnimationStart(Animator animation) 
                {
                }

                @Override
                public void onAnimationRepeat(Animator animation) 
                {                       
                }

                @Override
                public void onAnimationEnd(Animator animation) 
                {   
                    iv.setImageDrawable(drawable);
                    iv.setRotationY(270f);
                    iv.animate().rotationY(360f).setListener(null);

                }

                @Override
                public void onAnimationCancel(Animator animation) 
                {                       
                }
            });

Answer 2

试试这段简单的代码并告诉我

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

Answer 3

我在你的情况下试图弄清楚如何完成这个动画。以下是我实现这一目标的方法。

你需要定义两个动画。一个从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) {

                }
            });

imageIcon1是xml布局中图像视图的引用。

在ImageView

3 个答案: