Android逐帧动画的实现

转自http://blog.csdn.net/jwzhangjie/article/details/18323101

分类： android 视频播放器制作2014-01-15 21:39 3315人阅读 评论(0) 收藏 举报

在处理耗时工作的时候，大多数会弹出一个加载的框，里面有一个连续旋转的图片，很多时候都是用一张图片，使用rotate来设定旋转，不过看起来不太美观，没有形象感，在3.0之前Android有两种动画效果分别是补间动画和帧动画，用一张图片实现的是使用补间动画，定义给出两个关键帧，通过一些算法将给定属性值在给定的时间内在两个关键帧间渐变。我个人比较倾向的是帧动画，不过这个需要美工的支持，还有一种方式就是通过反编译其他的软件获取图片，我不是美工也没有美工的支持，所以就解压QQ的apk，获取它里面的显示加载动画的图片，图片资源http://download.csdn.net/download/jwzhangjie/6852981。

看看如何实现的

load_animation_1.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
    根标签下，通过item标签对动画中的每一个图片进行声明
    android:duration 表示展示所用的该图片的时间长度
 -->
 <animation-list
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:oneshot="false"
     >
    <item android:drawable="@drawable/qb_tenpay_loading_1" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_2" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_3" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_4" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_5" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_6" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_7" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_8" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_9" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_10" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_11" android:duration="150"></item>
    <item android:drawable="@drawable/qb_tenpay_loading_12" android:duration="150"></item>
 </animation-list>

load_animation_2.xml

<?xml version="1.0" encoding="utf-8"?>
<!--
    根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画
    根标签下，通过item标签对动画中的每一个图片进行声明
    android:duration 表示展示所用的该图片的时间长度
 -->
 <animation-list
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:oneshot="false"
     >
    <item android:drawable="@drawable/common_loading_0" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_1" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_2" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_3" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_4" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_5" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_6" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_7" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_8" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_9" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_10" android:duration="150"></item>
    <item android:drawable="@drawable/common_loading_11" android:duration="150"></item>
 </animation-list>

wifi_animation_1.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/wifi_1" android:duration="150"></item>
    <item android:drawable="@drawable/wifi_2" android:duration="150"></item>
    <item android:drawable="@drawable/wifi_3" android:duration="150"></item>
    <item android:drawable="@drawable/wifi_4" android:duration="150"></item>
    <item android:drawable="@drawable/wifi_5" android:duration="150"></item>
    <item android:drawable="@drawable/wifi_6" android:duration="150"></item>
 </animation-list>

布局文件：

<?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:orientation="vertical" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="动画加载1"
        android:id="@android:id/button1"
        ></Button>
    <Button
        android:id="@android:id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@android:id/button1"
        android:layout_marginLeft="20dip"
        android:text="动画加载2"
        />
    <Button
        android:id="@android:id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@android:id/button2"
        android:layout_marginLeft="20dip"
        android:text="动画wifi1"
        />
    <ImageView
        android:id="@+id/animationIV"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:contentDescription="@string/app_name"
        />

    <ImageView
        android:id="@+id/animationIV2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/animationIV"
        android:src="@anim/load_animation_2"
        android:contentDescription="@string/app_name"
        android:layout_alignBottom="@id/animationIV"
        android:layout_marginLeft="30dip"
        />

    <ImageView
        android:id="@+id/animationIV3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/animationIV"
        android:contentDescription="@string/app_name"
        android:layout_marginTop="20dip"
        />
</RelativeLayout>

public class Test extends BaseActivity{

    private Button button1,button2,button3;
    private ImageView animationIV;
    private ImageView animationIV2;
    private ImageView animationIV3;
    private AnimationDrawable AniDraw, AniDraw2, AniDraw3;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        button1 = (Button)findViewById(android.R.id.button1);
        button1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (AniDraw.isRunning()) {
                    AniDraw.stop();
                }else {
                    AniDraw.start();
                }

            }
        });
        button2 = (Button)findViewById(android.R.id.button2);
        button2.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (AniDraw2.isRunning()) {
                    AniDraw2.stop();
                }else {
                    AniDraw2.start();
                }
            }
        });
        button3 = (Button)findViewById(android.R.id.button3);
        button3.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (AniDraw3.isRunning()) {
                    AniDraw3.stop();
                }else {
                    AniDraw3.start();
                }
            }
        });

        animationIV = (ImageView)findViewById(R.id.animationIV);
        /**
         * 这里设置的是setBackgroundResource，那么你获取的时候通过getBackground
         */
        animationIV.setBackgroundResource(R.anim.load_animation_1);
        AniDraw = (AnimationDrawable)animationIV.getBackground();
        /**
         * 在xml里面通过src来设置跟在代码里面使用setImageResource获取的时候通过getDrawable
         * 例如：animationIV2.setImageResource(R.anim.load_animation_2);是一样的
         */
        animationIV2 = (ImageView)findViewById(R.id.animationIV2);
        AniDraw2 = (AnimationDrawable)animationIV2.getDrawable();
        animationIV3 = (ImageView)findViewById(R.id.animationIV3);
        animationIV3.setImageResource(R.anim.wifi_animation_1);
        AniDraw3 = (AnimationDrawable)animationIV3.getDrawable();
    }