在布局之间切换时的 Android 动画剪辑

Question

我有一个相当复杂的布局。我使用相对布局作为根，然后在其中我有一些表格 View 和一些进一步的嵌套。当我在这些布局之间为 ImageView 设置动画时，我的图像剪辑。我在父布局上有一个背景，动画看起来就像在它下面。我在所有布局上设置了 android:clipChildren="false"和 android:clipToPadding="false"。我还设置了 anim.setZAdjustment(Animation.ZORDER_TOP);在我所有的动画中。我做错了什么？

编辑:到目前为止，我至少发现了 2 个错误。带有十六进制颜色的 android:background= 会导致主要的动画问题。表格布局下似乎也有一个 regoin，这会导致剪裁。我也看到与 framelayouts 相同的事情。一旦我真正让我的东西按照我想要的方式工作，我会添加一个答案。我觉得只使用线性布局是解决方案。

下面是一些产生问题的示例代码。如果您删除两个子相关布局，则动画会按预期完成。

---

Java:

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

    ImageView imageViewtop = (ImageView) findViewById(R.id.ImageView01);
    imageViewtop.setOnClickListener(btnCardListener);
}

private OnClickListener btnCardListener = new OnClickListener() {
    public void onClick(View v) {

        ImageView ImageView03 = (ImageView) findViewById(R.id.ImageView03);
        ImageView ImageView05 = (ImageView) findViewById(R.id.ImageView05);

        int[] playLoc = { 0, 0 };
        int[] botLoc = { 0, 0 };
        ImageView05.getLocationOnScreen(playLoc);
        ImageView03.getLocationOnScreen(botLoc);
        int xMove = playLoc[0] - botLoc[0];
        int yMove = playLoc[1] - botLoc[1];

        AnimationSet animSet = new AnimationSet(true);

        RotateAnimation ranim = new RotateAnimation(0f, 180f,
                Animation.RELATIVE_TO_SELF, 0.5f,
                Animation.RELATIVE_TO_SELF, 0.5f); // , 200, 200); //
                                                    // canvas.getWidth()
        // 2, canvas.getHeight() / 2);
        ranim.setDuration(400);
        ranim.setInterpolator(new DecelerateInterpolator());

        TranslateAnimation transAnim = new TranslateAnimation(
                Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, xMove, // +80.0f,
                Animation.ABSOLUTE, 0.0f, Animation.ABSOLUTE, yMove // -100.0f
        );
        transAnim.setInterpolator(new DecelerateInterpolator()); // AccelerateInterpolator
                                                                    // ,
                                                                    // LinearInterpolator
        transAnim.setZAdjustment(Animation.ZORDER_TOP);
        transAnim.setAnimationListener(new AnimationListener() {
            public void onAnimationStart(Animation animation) {
            }

            public void onAnimationEnd(Animation animation) {
                ImageView ImageView03 = (ImageView) findViewById(R.id.ImageView03);
                ImageView ImageView05 = (ImageView) findViewById(R.id.ImageView05);

                ImageView05.setVisibility(View.VISIBLE);
                ImageView03.setVisibility(View.INVISIBLE);
            }

            public void onAnimationRepeat(Animation animation) {
            }
        });
        transAnim.setDuration(1000);

        // Order matters...
        animSet.addAnimation(ranim);
        animSet.addAnimation(transAnim);

        ImageView03.startAnimation(animSet);
    }
};

XML:

<RelativeLayout android:id="@+id/relativeParentLayout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="fill_parent"
    android:layout_height="fill_parent" android:clipToPadding="false">
    <RelativeLayout android:id="@+id/relativeParentLayout1"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="150dip" android:background="#440000"
        android:layout_alignParentTop="true" android:clipChildren="false"
        android:clipToPadding="false">
        <ImageView android:layout_height="wrap_content" android:id="@+id/ImageView01"
            android:layout_width="wrap_content" android:src="@drawable/card_back"
            android:layout_weight="0" android:layout_alignParentTop="true" />


        <ImageView android:layout_height="wrap_content" android:id="@+id/ImageView03"
            android:layout_width="wrap_content" android:src="@drawable/card_back"
            android:layout_weight="0" android:layout_gravity="center_vertical"
            android:layout_alignParentRight="true" />
    </RelativeLayout>
    <RelativeLayout android:id="@+id/relativeParentLayout2"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical" android:layout_width="fill_parent"
        android:layout_height="150dip" android:background="#000044"
        android:layout_alignParentBottom="true" android:clipChildren="false"
        android:clipToPadding="false">

        <ImageView android:layout_height="wrap_content"
            android:layout_below="@+id/LinearLayout01" android:id="@+id/ImageView05"
            android:layout_width="wrap_content" android:src="@drawable/card_back"
            android:layout_weight="0" android:layout_alignParentBottom="true" />
    </RelativeLayout>
</RelativeLayout>

Answer 1

我遇到了同样的问题，几天后我找到了解决方案......感谢:

http://www.mail-archive.com/android-developers@googlegroups.com/msg67535.html

I figured out a solution to this problem. The clue came from the fact that when showing the view, everything worked fine. Apparently, when the animation is running, the update that would be forced by the show happens in the background and doesn't cause the flicker. Adding a short animation to the back end of the onAnimationEnd() when we are hiding the view makes the flicker go away.

Here is the new onAndimationEnd() in the working code

    public void onAnimationEnd(Animation animation) {
             animation = new TranslateAnimation(0.0f, 0.0f, 0.0f, 0.0f);
                    animation.setDuration(1);
                    mPlayer0Panel.startAnimation(animation);
    }