在Android中移除帧动画的背景

Question

如何在动画帧中删除背景（或将其设置为透明)？

当我在xml布局文件中将背景颜色设置为透明时，运行时会变成黑色。

当我在Java代码中使用setBackgroundColor(0);时，会出现以下异常：   java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android.graphics.drawable.AnimationDrawable /res/layout/dialog_loading.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/background_black_semitransparent" >
    <!-- The background of this LinearLayout is so that there is 
         a semi transparent black overlay over the application content 
         while the loading animation plays -->

    <FrameLayout
        android:layout_width="@dimen/dialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@android:color/transparent" >

        <ImageView
            android:id="@+id/iv_loading"
            android:layout_width="@dimen/dialog_width"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:background="@android:color/transparent" />

    </FrameLayout>

</LinearLayout>

/res/anim/frame_animation.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- The animation is defined by the animation-list element. The oneshot attribute defines whether or not the animation loops.
Each image is placed in a separate item elementwith the drawable attribute specifying the image file in /res/drawable/. 
The duration attribute specifies the time delay between images.
 -->

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" 
    android:oneshot="false">
<item android:drawable="@drawable/loading_1_00000" android:duration="75" />
<item android:drawable="@drawable/loading_1_00002" android:duration="75" />
<item android:drawable="@drawable/loading_1_00004" android:duration="75" />
<item android:drawable="@drawable/loading_1_00006" android:duration="75" />
<item android:drawable="@drawable/loading_1_00008" android:duration="75" />
<item android:drawable="@drawable/loading_1_00010" android:duration="75" />

<item android:drawable="@drawable/loading_1_00012" android:duration="75" />
<item android:drawable="@drawable/loading_1_00014" android:duration="75" />
<item android:drawable="@drawable/loading_1_00016" android:duration="75" />
<item android:drawable="@drawable/loading_1_00018" android:duration="75" />
<item android:drawable="@drawable/loading_1_00020" android:duration="75" />
<item android:drawable="@drawable/loading_1_00022" android:duration="75" />

<item android:drawable="@drawable/loading_1_00024" android:duration="75" />
<item android:drawable="@drawable/loading_1_00026" android:duration="75" />
<item android:drawable="@drawable/loading_1_00028" android:duration="75" />
<item android:drawable="@drawable/loading_1_00030" android:duration="75" />
<item android:drawable="@drawable/loading_1_00032" android:duration="75" />
<item android:drawable="@drawable/loading_1_00034" android:duration="75" />

<item android:drawable="@drawable/loading_1_00036" android:duration="75" />
<item android:drawable="@drawable/loading_1_00038" android:duration="75" />
<item android:drawable="@drawable/loading_1_00040" android:duration="75" />
<item android:drawable="@drawable/loading_1_00042" android:duration="75" />
<item android:drawable="@drawable/loading_1_00044" android:duration="75" />
<item android:drawable="@drawable/loading_1_00046" android:duration="75" />

<item android:drawable="@drawable/loading_1_00048" android:duration="75" />
<item android:drawable="@drawable/loading_1_00050" android:duration="75" />
<item android:drawable="@drawable/loading_1_00052" android:duration="75" />

</animation-list>

Java代码：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {

    // Inflate the layout to use as dialog or embedded fragment
    view = inflater.inflate(R.layout.dialog_loading, container, false);

    //Get the ImageView 
    ImageView img1 = (ImageView) view.findViewById(R.id.iv_loading);
    //set the animation as the background of the ImageView
    //the animation is described in /res/anim/frame_animation.xml

    img1.setBackgroundResource(R.anim.frame_animation);

    img1.setBackgroundColor(0);   // <---- get error here

    //create an instance of AnimationLoop
    AnimationLoop animLoop = new AnimationLoop(img1);

    //create a timer
    Timer t = new Timer(false);
    //schedule the animation loop
    t.schedule(animLoop, 100);

    return view;
}

//our animation handler
class AnimationLoop extends TimerTask
{
    ImageView img1;
    AnimationLoop(ImageView im)
    {
        img1 = im;
    }

    public void run()
    {
        // Get the background, which has been compiled to an AnimationDrawable object.
        AnimationDrawable frameAnimation1 = (AnimationDrawable) img1.getBackground();

        // Start the animation (looped play back by default).
        frameAnimation1.start();
    }
}

错误：

06-07 12:04:39.450: E/AndroidRuntime(6581): FATAL EXCEPTION: Timer-1
06-07 12:04:39.450: E/AndroidRuntime(6581): java.lang.ClassCastException: android.graphics.drawable.ColorDrawable cannot be cast to android.graphics.drawable.AnimationDrawable
06-07 12:04:39.450: E/AndroidRuntime(6581):     at za.co.domain.client.product.tools.ProgressDialogFragment$AnimationLoop.run(ProgressDialogFragment.java:79)
06-07 12:04:39.450: E/AndroidRuntime(6581):     at java.util.Timer$TimerImpl.run(Timer.java:284)

编辑：

请参见截图，该截图显示在android:background="#0000"建议使用时的效果：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#0000" >
    <FrameLayout
        android:layout_width="@dimen/dialog_width"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="#0000" >        
        <ImageView
            android:id="@+id/iv_loading"
            android:layout_width="@dimen/dialog_width"
            android:layout_height="wrap_content"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            android:background="#0000" />        
    </FrameLayout>
</LinearLayout>

- marienke

---

动画背景在运行时变黑，因为用于动画的帧图像具有黑色背景。所以，如果您只在XML中进行更改，则在运行动画时它将保持相同（黑色背景）。 - Braj

Answer 1

尝试设置

android:background="@null"

在您的FrameLayout中，从您的imageView中删除android:background="@android:color/transparent"这行代码。

---

更新

你也可以尝试添加以下内容：

AnimationDrawable drawable = (AnimationDrawable)res.getDrawable(R.R.anim.frame_animation);
img1.setBackgroundDrawable(drawable);

- Neoh

---

谢谢Neoh，但这不起作用。背景仍然是黑色的。我认为这是因为这个：img1.setBackgroundResource(R.anim.frame_animation); 但我不知道还有什么其他原因？ - marienke

Answer 2

ImageView有一个名为setImageResource的方法，用于设置前景中要绘制的图像。正如一些人已经指出的那样，您必须将背景设置为透明并调用。

img1.setImageResource(R.anim.frame_animation);

在您的ImageView上。

个人建议尽量避免一次性加载52个位图到内存中。动画列表会加载它们所有。这可能只适用于较新的手机，具体取决于图像大小。

顺便说一下，如果您的帧是在透明背景上的，则所有内容都可以正常工作。如果它们不是，并且您需要将它们变成透明背景或者不可能实现，您可以实现一个自定义视图，该视图将使用PorterDuff混合模式直接绘制位图。请参阅Paint和PorterDuffColorFilter的文档。

- EvilDuck

Answer 3

你尝试过在执行 setBackgroundResource 之前，将背景设置为透明的 R.id.color 值为 #0000 或 #00000000 吗？换句话说，调换一下你代码中的两行设置背景的代码。

- Ben Kane

Answer 4

要使用透明背景，请使用android:background="#0000"。 #0000表示透明背景。 请注意，如果您在FrameLayout中使用此功能，则将具有background_black_semitransparent作为背景。 如果您想要完全透明，请将其替换为上面的代码。

- Rohan Kandwal

---

这在我的端上不起作用 - 背景仍然存在。我已经检查过png图像没有背景。那么这个背景是从哪里来的呢？我在根LinearLayout中添加了android:background="#0000"（测试过 - 背景仍然存在），然后我将其添加到FrameLayout和ImageView中，但背景仍然存在:( - marienke

考虑这样一个情况，你有三个不同的XML组件，每个组件都有自己的背景。每个布局就像是一层。LinearLayout在底部，中间是FrameLayout，最上面是ImageView。现在，就透明度而言，可以将每个层的底部放置一个透明玻璃。如果你将ImageView的背景设置为玻璃，那么你就可以看到FrameLayout的背景。如果你将FrameLayout的背景设置为玻璃，那么你就可以看到LinearLayout的背景，因为ImageView和FrameLayout都是玻璃。 - Rohan Kandwal

如果您只想显示没有任何背景的 ImageView。那么将 LinearLayout 和 FrameLayout 的背景设置为透明，即 #0000。同时将 ImageView 的背景也设置为透明。 由于您正在使用 FrameLayout，因此您的 ImageView 可能无法缩放到完整的宽度和高度。因此，左侧空间会填充背景。我也遇到了这个问题。 - Rohan Kandwal

但我已经将 android:background="#0000" 应用到所有元素，但在运行应用时仍然看到了一个背景。我检查了图像本身并没有背景 - 只有每个帧中要看到的内容。 - marienke

@Enke，你能发一些截图吗？ - Rohan Kandwal

请查看屏幕截图。出于隐私保护的目的，我不得不更改图像的实际内容，但其要点仍在。 - marienke