Android 使用 ImageView 淡入淡出 [英] Android fade in and fade out with ImageView

问题描述

我在制作幻灯片时遇到了一些问题.

I'm having some troubles with a slideshow I'm building.

我在 xml 中创建了 2 个淡入淡出动画:

I've created 2 animations in xml for fade in and fade out:

fadein.xml

    <?xml version="1.0" encoding="UTF-8"?>
       <set xmlns:android="http://schemas.android.com/apk/res/android">
         <alpha android:fromAlpha="0.0" android:toAlpha="1.0" 
          android:interpolator="@android:anim/accelerate_interpolator" 
          android:duration="2000"/>
     </set>

fadeout.xml

    <?xml version="1.0" encoding="UTF-8"?>
       <set xmlns:android="http://schemas.android.com/apk/res/android">
         <alpha android:fromAlpha="1.0" android:toAlpha="0.0" 
          android:interpolator="@android:anim/accelerate_interpolator" 
          android:duration="2000"/>
     </set>

我想要做的是使用淡入淡出效果从 ImageView 更改图像，因此当前显示的图像将淡出，而另一个将淡入.考虑到我已经设置了一个图像，我可以毫无问题地淡出这个图像:

What Im'trying to do, is to change images from an ImageView using the fade effect, so the currently displayed image will fade out, and another one will fade in. Considering that I have an image already set, I can fadeout this Image without problem, with this:

    Animation fadeInAnimation = AnimationUtils.loadAnimation(this, R.anim.your_fade_in_anim);
    imageView.startAnimation(fadeoutAnim);

但是，我设置了下一个要显示的图像:

But then, I set the next image to be displayed:

    imageView.setImageBitmap(secondImage);

它只显示在 imageView 中，当我设置动画时，它会隐藏图像，淡入淡出......有什么办法可以解决这个问题，我的意思是，当我执行 imageView.setImageBitmap(secondImage);命令，图像不会立即显示，只有在执行淡入动画时才显示?

It just shows up in the imageView, and when i set the animation it hides the image, the fade it in... Is there any way to fix that, I mean, when I do imageView.setImageBitmap(secondImage); command, the image do not shows up immediately, and only when the fade in animation is executed?

推荐答案

要按照您开始的方式实现这一点，您需要添加一个 AnimationListener 以便您可以检测动画的开始和结束.当调用淡出的 onAnimationEnd() 时，您可以将 ImageView 对象的可见性设置为 View.INVISIBLE，切换图像并开始淡入动画 - 您还需要另一个 AnimationListener 在这里.当您收到 onAnimationEnd() 的淡入动画时，将 ImageView 设置为 View.VISIBLE，这应该会给您想要的效果.

To implement this the way you have started, you'll need to add an AnimationListener so that you can detect the beginning and ending of an animation. When onAnimationEnd() for the fade out is called, you can set the visibility of your ImageView object to View.INVISIBLE, switch the images and start your fade in animation - you'll need another AnimationListener here too. When you receive onAnimationEnd() for your fade in animation, set the ImageView to be View.VISIBLE and that should give you the effect you're looking for.

我之前实现过类似的效果，但我使用了一个 ViewSwitcher 使用 2 个 ImageView 而不是单个 ImageView.您可以使用淡入和淡出为 ViewSwitcher 设置进入"和退出"动画，以便它可以管理 AnimationListener 实现.然后你需要做的就是在 2 个 ImageView 之间交替.

I've implemented a similar effect before, but I used a ViewSwitcher with 2 ImageViews rather than a single ImageView. You can set the "in" and "out" animations for the ViewSwitcher with your fade in and fade out so it can manage the AnimationListener implementation. Then all you need to do is alternate between the 2 ImageViews.

为了更有用，这里有一个关于如何使用 ViewSwitcher 的快速示例.我在 https://github.com/aldryd/imageswitcher 中包含了完整的源代码.

To be a bit more useful, here is a quick example of how to use the ViewSwitcher. I have included the full source at https://github.com/aldryd/imageswitcher.

activity_main.xml

    <ViewSwitcher
        android:id="@+id/switcher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:inAnimation="@anim/fade_in"
        android:outAnimation="@anim/fade_out" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:src="@drawable/sunset" />

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:src="@drawable/clouds" />
    </ViewSwitcher>

MainActivity.java

    // Let the ViewSwitcher do the animation listening for you
    ((ViewSwitcher) findViewById(R.id.switcher)).setOnClickListener(new View.OnClickListener() {

        @Override
        public void onClick(View v) {
            ViewSwitcher switcher = (ViewSwitcher) v;

            if (switcher.getDisplayedChild() == 0) {
                switcher.showNext();
            } else {
                switcher.showPrevious();
            }
        }
    });

这篇关于Android 使用 ImageView 淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！