Android 动画 Frame Animation

AndroidAnimation 2016-06

关于帧动画，先看一下官方的介绍：

Frame动画是一系列图片按照一定的顺序展示的过程，和放电影的机制很相似，我们称为逐帧动画。Frame动画可以被定义在XML文件中，也可以完全编码实现。

实例

先定义 @drawable/app_progress_logo

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="false"
    android:variablePadding="true" >
    <item
        android:drawable="@drawable/app_progress_logo1"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo2"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo3"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo4"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo5"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo6"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo7"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo8"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo9"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo10"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo11"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo12"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo13"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo14"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo15"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo16"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo17"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo18"
        android:duration="30"/>
    <item
        android:drawable="@drawable/app_progress_logo19"
        android:duration="30"/>
</animation-list>

必须以<animation-list>为根元素，以<item>表示要轮换显示的图片，duration属性表示各项显示的时间。XML文件要放在/res/drawable/目录下。

然后 看看UI界面定义

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/app_background">
    <ImageView
        android:id="@+id/splash_logo"
        android:layout_width="@dimen/splash_logo_width"
        android:layout_height="@dimen/splash_logo_height"
        android:layout_centerInParent="true"
        android:contentDescription="@null"
        android:scaleType="fitXY"
        android:src="@drawable/app_progress_logo" />
</RelativeLayout>        

接着看看如何使用这个帧动画

public class SplashActivity extends SplashActivity_Base
{
    private ImageView mLogo;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        mLogo = (ImageView) findViewById(R.id.splash_logo);
        mLogo.post(new Runnable()
        {
            @Override
            public void run()
            {
                Drawable progressDrawable = mLogo.getDrawable();
                if (progressDrawable instanceof AnimationDrawable)
                {
                    ((AnimationDrawable) progressDrawable).start();
                }
            }
        });
    }
    ...
}

假如上面的代码在onCreate()方法中这么写会如何？

public class SplashActivity extends SplashActivity_Base
{
    private ImageView mLogo;
    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        mLogo = (ImageView) findViewById(R.id.splash_logo);
        Drawable progressDrawable = mLogo.getDrawable();
        if (progressDrawable instanceof AnimationDrawable)
        {
            ((AnimationDrawable) progressDrawable).start();
        }
    }
    ...
}

运行以后，停留在第一帧 不动了，出现这种现象是因为当我们在onCreate中调用AnimationDrawable的start方法时，窗口Window对象还没有完全初始化，AnimationDrawable不能完全追加到窗口Window对象中，那么该怎么办呢？我们需要把这段代码放在onWindowFocusChanged方法中，当Activity展示给用户时，onWindowFocusChanged方法就会被调用，像下面这样。

@Override 
public void onWindowFocusChanged(boolean hasFocus) { 
    super.onWindowFocusChanged(hasFocus); 
    Drawable progressDrawable = mLogo.getDrawable();
    if (progressDrawable instanceof AnimationDrawable)
    {
        ((AnimationDrawable) progressDrawable).start();
    }
}

当然了，也可以使用View.post(Runnable runnable)，当View完全准备好了以后，再启动动画亦可。当然 如果你不想这样通过XML来定义，完全可以通过代码来定义，比如：

AnimationDrawable anim = new AnimationDrawable();
for (int i = 1; i <= 19; i++) {
    int id = getResources().getIdentifier("app_progress_logo" + i, "drawable", getPackageName());
    Drawable drawable = getResources().getDrawable(id);
    anim.addFrame(drawable, 300);
}
anim.setOneShot(false);
image.setBackgroundDrawable(anim);
anim.start();

在实践中遇到的问题小结：

1. 要在代码中调用Imageview的setBackgroundResource方法，如果直接在XML布局文件中设置其src属性当触发动画时会FC。（这里没有重现）
2. 在动画start()之前要先stop()，不然在第一次动画之后会停在最后一帧，这样动画就只会触发一次。
3. 最后一点是SDK中提到的，不要在onCreate中调用start，因为AnimationDrawable还没有完全跟Window相关联，如果想要界面显示时就开始动画的话，可以在onWindowFoucsChanged()中调用start()，或者使用View.post(Runnable runnable);