Android逐帧动画的实现

浏览数：19 / 时间：2015年06月11日

转自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

[html] view plaincopy
<?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

[html] view plaincopy
<?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

[html] view plaincopy
<?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>  

布局文件：

[html] view plaincopy
<?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>  

[java] view plaincopy
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();  
    }