如何显示imageview幻灯片动画与其下面的另一个imageview?

时间:2012-12-11 00:47:46

标签: java android animation view imageview

我正在尝试找出在另一个上方显示图像视图的最佳方法,并且通过手指滑动,顶部图像视图将从屏幕上滑落。想想一副牌:当你用手指将顶牌从牌组上滑下来时,它下方的牌变得越来越明显。

在使用ImageSwitcher之前,我创建了一个幻灯片放入和缩小动画。但是有效的方式是当一个图像滑出屏幕右侧时,另一个图像从左侧向右滑动(这不是我想要的情况)。因此,我考虑过两个图像视图(一个在另一个上面),当顶部移出屏幕时,底部变得更加明显,看起来好像它位于顶部图像视图之下。但问题是我有很多图像可以做到这一点,如果我这样做,我需要将顶部的imageview放在屏幕下方的底部。

所以,要清楚我要问的是什么,什么是接近显示两个图像视图的最佳方式,一个在另一个图像视图的顶部(Z轴),当用户滑动他们的时候手指在屏幕上方,顶部的imageview将从屏幕上滑落,让底部的imageview可见?

非常感谢任何建议,想法或帮助!

1 个答案:

答案 0 :(得分: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_width="match_parent"
        android:layout_height="match_parent" >
    <ImageView 
        android:id="@+id/image_below"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" /> 
    <ImageView
        android:id="@+id/image_above"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    </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

        }

});

如果您在onAnimationEnd方法的上述代码中注意到我放置imageTwo.bringToFront();那么当顶部imageview滑出屏幕时它将不再可见(如果我没有使用该方法,顶部一旦动画完成,imageview将重新出现在其原始位置,在其他imageview上。)

最后,剩下要做的就是设置图像视图的图像并在需要时启动动画:

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

我希望这证明对任何可能遇到同样问题的人都有用。