如何显示 imageview 滑出动画及其下方的另一个 imageview？

Posted 2023-02-26

【中文标题】如何显示 imageview 滑出动画及其下方的另一个 imageview？

【英文标题】：How to display imageview slide out animation with another imageview beneath it?

【发布时间】：2012-12-11 00:47:45

【问题描述】：

我正在尝试找出在另一个图像视图之上显示图像视图的最佳方法，并且随着手指的滑动，顶部图像视图将滑出屏幕。想象一副纸牌：当您用手指将最上面的纸牌滑出纸牌时，下方的纸牌变得越来越明显。

我在使用 ImageSwitcher 之前创建了滑入和滑出动画。但是工作的方式是一个图像从屏幕右侧滑出另一个图像从左侧滑入右侧（这不是我想要的这种情况）。所以，我想有两个图像视图（一个在另一个顶部），当顶部从屏幕上移开时，底部的图像变得更加明显，看起来好像在顶部图像视图下方。但问题是我有很多图片要这样做，如果我这样做，我需要在它离开屏幕后将顶部的 imageview 放在底部的下方。

所以，为了澄清我的问题，当用户滑动他们的手指在屏幕上，顶部的 imageview 会滑出屏幕，而底部的 imageview 可见？

我们将不胜感激任何建议、想法或帮助！

【问题讨论】：

目标是 14，但我使用 10 的 minSdkVersion

【参考方案1】：

经过一番试验，我终于想出了我的解决方案。不过，我仍然需要调整动画以获得完整的预期效果。我首先考虑使用LayerDrawable，因为这会根据 z 轴将图像相互对齐。但是，我无法想出一种方法来一次只为一个图层设置动画。所以，为了解决我的问题，我使用了FrameLayout.

FrameLayouts 非常适合在 z 轴上进行排序（它们按照您在 XML 中放置的顺序相互叠加）。但是，当尝试将视图放置在屏幕的特定区域时，它们会变得复杂。首先，我制作了我的布局 XML：

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_
        android:layout_ >
    <ImageView 
        android:id="@+id/image_below"
        android:layout_
        android:layout_ /> 
    <ImageView
        android:id="@+id/image_above"
        android:layout_
        android:layout_ />
    </FrameLayout>

然后，当然，在Activity我设置了内容视图，并声明并实例化了imageview对象：

setContentView(R.layout.game_layout);
ImageView imageOne = (ImageView)findViewById(R.id.image_above);
ImageView imageTwo = (ImageView)findViewById(R.id.image_below);

然后，我创建了动画：

Animation slideOutRight = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right);

现在动画已创建，我为其设置了AnimationListener。这样我就可以知道动画何时完成：

slideOutRight.setAnimationListener(new AnimationListener()
    @Override
        public void onAnimationEnd(Animation arg0) 
            imageTwo.bringToFront();

        

        @Override
        public void onAnimationRepeat(Animation arg0) 
            // TODO Auto-generated method stub

        

        @Override
        public void onAnimationStart(Animation arg0) 
            // TODO Auto-generated method stub

        

);

如果您在上面的代码中注意到我放置了imageTwo.bringToFront(); 的 onAnimationEnd 方法，那么当顶部的 imageview 滑出屏幕时，它将不再可见（如果我不使用该方法，顶部的 imageview 会一旦动画完成，就会重新出现在它原来的位置，在另一个 imageview 上）。

最后，剩下要做的就是设置imageviews的图像并在需要时启动动画：

imageOne.setImageDrawable(getResources().getDrawable(R.drawable.YOUR_DRAWABLE_ONE);
imageTwo.setImageDrawable(getResources().getDrawable(R.drawable.YOUR_DRAWABLE_TWO);
imageOne.startAnimation(slideOutRight);

我希望这对可能面临同样问题的其他人有用。