Android动画全面剖析-Frame动画

    从本节起，我将对Android动画做一个全面的总结，包括Frame动画、Tween动画、Property动画的基本用法和高级用法、各种动画的使用场景、Activity切换动画、ViewPager切换动画、LayoutAnimation等，每种动画都有相应的代码实现。下面，我们开始第一节，Frame动画。

    老规矩，先上图，看看Frame动画的实现效果。

    一、基本用法    

   Frame动画通过组合多张图片，每张图片设置播放时长，多张图连续播放，从而形成动画效果。系统给我们提供了”animation-list” 节点用于配置帧动画，存放在res/anim下。使用帧动画，只需两步即可完成。

    第一步，在animation-list节点中配置item项

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item        android:drawable="@drawable/on_the_way_01"        android:duration="100"></item>    <item        android:drawable="@drawable/on_the_way_02"        android:duration="100"></item>    <item        android:drawable="@drawable/on_the_way_03"        android:duration="100"></item></animation-list>

    每个item都是一帧，drawable属性指定了该帧要播放的图片，duration指定了该帧的播放时长，以毫秒为单位。oneshot代表是否只播放一次，false代表循环播放，true代表只播放一次。

    第二步，将xml文件设置为ImageView的背景，然后获取背景转换为AnimationDrawable对象进行播放动画

imageView.setImageResource(R.drawable.frame_on_the_way);AnimationDrawable onTheWay = (AnimationDrawable) imageView.getDrawable();onTheWay.start();

      二、实例场景，京东送货动画、网络加载动画、支付成功动画

      京东送货Frame动画xml：

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item        android:drawable="@drawable/on_the_way_01"        android:duration="100"></item>    <item        android:drawable="@drawable/on_the_way_02"        android:duration="100"></item>    <item        android:drawable="@drawable/on_the_way_03"        android:duration="100"></item></animation-list>

    网络加载动画xml：

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item        android:drawable="@drawable/page_loading_01"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_02"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_03"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_04"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_05"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_06"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_07"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_08"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_09"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_10"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_11"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_12"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_13"        android:duration="100"></item>    <item        android:drawable="@drawable/page_loading_14"        android:duration="100"></item></animation-list>

    支付成功动画xml：

<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"    android:oneshot="false">    <item        android:drawable="@drawable/alipay_msp_success1"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success2"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success3"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success4"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success5"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success6"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success7"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success8"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success9"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success10"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success11"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success12"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success13"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success14"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success15"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success16"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success17"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success18"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success19"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success20"        android:duration="100" />    <item        android:drawable="@drawable/alipay_msp_success21"        android:duration="100" /></animation-list>

    Java代码：

package com.example.liuliu.xi.cityofanimation.activity;import android.graphics.drawable.AnimationDrawable;import android.os.Bundle;import android.support.v7.app.AppCompatActivity;import android.widget.ImageView;import com.example.liuliu.xi.cityofanimation.R;public class FrameAnimationActivity extends AppCompatActivity {    private ImageView mFrame1;    private ImageView mFrame2;    private ImageView mFrame3;    private ImageView mFrame4;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_frame_animation);        mFrame1 = (ImageView) findViewById(R.id.activity_frame_frame1);        mFrame2 = (ImageView) findViewById(R.id.activity_frame_frame2);        mFrame3 = (ImageView) findViewById(R.id.activity_frame_frame3);        mFrame4 = (ImageView) findViewById(R.id.activity_frame_frame4);        startFrameAnimate();    }    private void startFrameAnimate() {        mFrame1.setImageResource(R.drawable.frame_on_the_way);        AnimationDrawable onTheWay = (AnimationDrawable) mFrame1.getDrawable();        onTheWay.start();        mFrame2.setImageResource(R.drawable.frame_page_loading);        AnimationDrawable pageLoading = (AnimationDrawable) mFrame2.getDrawable();        pageLoading.start();        mFrame3.setImageResource(R.drawable.frame_alipay_success);        AnimationDrawable alipaySuccess = (AnimationDrawable) mFrame3.getDrawable();        alipaySuccess.start();        mFrame4.setImageResource(R.drawable.frame_loading);        AnimationDrawable loading = (AnimationDrawable) mFrame4.getDrawable();        loading.start();    }    @Override    public void finish() {        super.finish();        //activity退出时，过渡动画        overridePendingTransition(0, R.anim.zoomout);    }}

    三、AnimationDrawable 常用API

    void start() - 开始播放动画

    void stop() - 停止播放动画

    addFrame(Drawable frame, int duration) - 添加一帧，并设置该帧显示的持续时间

    void setOneShot(boolean flag) - false为循环播放，true为仅播放一次

    boolean isRunning() - 是否正在播放

    四、Frame动画分析

     逐帧动画使用简单，实际开发中使用的频率还是比较高的。但是由于逐帧动画要加载大量的图片，必然占用不小的内存，当加载的图片较多、图片像素数较多时，容易卡顿、严重的话可造成oom，因此逐帧动画只能实现比较小的动画效果，如果复杂而且帧数比较多的动画不建议使用逐帧动画。

    源码地址：https://github.com/xiyy/CityOfAnimation

    下一节，将讲述Tween动画，有兴趣的朋友，欢迎关注！