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

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--   
  3.     根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画  
  4.     根标签下，通过item标签对动画中的每一个图片进行声明  
  5.     android:duration 表示展示所用的该图片的时间长度  
  6.  -->  
  7.  <animation-list  
  8.      xmlns:android="http://schemas.android.com/apk/res/android"  
  9.      android:oneshot="false"  
  10.      >  
  11.     <item android:drawable="@drawable/qb_tenpay_loading_1" android:duration="150"></item>  
  12.     <item android:drawable="@drawable/qb_tenpay_loading_2" android:duration="150"></item>  
  13.     <item android:drawable="@drawable/qb_tenpay_loading_3" android:duration="150"></item>  
  14.     <item android:drawable="@drawable/qb_tenpay_loading_4" android:duration="150"></item>  
  15.     <item android:drawable="@drawable/qb_tenpay_loading_5" android:duration="150"></item>  
  16.     <item android:drawable="@drawable/qb_tenpay_loading_6" android:duration="150"></item>  
  17.     <item android:drawable="@drawable/qb_tenpay_loading_7" android:duration="150"></item>  
  18.     <item android:drawable="@drawable/qb_tenpay_loading_8" android:duration="150"></item>  
  19.     <item android:drawable="@drawable/qb_tenpay_loading_9" android:duration="150"></item>  
  20.     <item android:drawable="@drawable/qb_tenpay_loading_10" android:duration="150"></item>  
  21.     <item android:drawable="@drawable/qb_tenpay_loading_11" android:duration="150"></item>  
  22.     <item android:drawable="@drawable/qb_tenpay_loading_12" android:duration="150"></item>  
  23.  </animation-list>  
  24.    
load_animation_2.xml

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <!--   
  3.     根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画  
  4.     根标签下，通过item标签对动画中的每一个图片进行声明  
  5.     android:duration 表示展示所用的该图片的时间长度  
  6.  -->  
  7.  <animation-list  
  8.      xmlns:android="http://schemas.android.com/apk/res/android"  
  9.      android:oneshot="false"  
  10.      >  
  11.     <item android:drawable="@drawable/common_loading_0" android:duration="150"></item>  
  12.     <item android:drawable="@drawable/common_loading_1" android:duration="150"></item>  
  13.     <item android:drawable="@drawable/common_loading_2" android:duration="150"></item>  
  14.     <item android:drawable="@drawable/common_loading_3" android:duration="150"></item>  
  15.     <item android:drawable="@drawable/common_loading_4" android:duration="150"></item>  
  16.     <item android:drawable="@drawable/common_loading_5" android:duration="150"></item>  
  17.     <item android:drawable="@drawable/common_loading_6" android:duration="150"></item>  
  18.     <item android:drawable="@drawable/common_loading_7" android:duration="150"></item>  
  19.     <item android:drawable="@drawable/common_loading_8" android:duration="150"></item>  
  20.     <item android:drawable="@drawable/common_loading_9" android:duration="150"></item>  
  21.     <item android:drawable="@drawable/common_loading_10" android:duration="150"></item>  
  22.     <item android:drawable="@drawable/common_loading_11" android:duration="150"></item>  
  23.  </animation-list>  
wifi_animation_1.xml

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <animation-list  
  3.      xmlns:android="http://schemas.android.com/apk/res/android"  
  4.      android:oneshot="false"  
  5.      >  
  6.     <item android:drawable="@drawable/wifi_1" android:duration="150"></item>  
  7.     <item android:drawable="@drawable/wifi_2" android:duration="150"></item>  
  8.     <item android:drawable="@drawable/wifi_3" android:duration="150"></item>  
  9.     <item android:drawable="@drawable/wifi_4" android:duration="150"></item>  
  10.     <item android:drawable="@drawable/wifi_5" android:duration="150"></item>  
  11.     <item android:drawable="@drawable/wifi_6" android:duration="150"></item>  
  12.  </animation-list>  
布局文件：

 

 

[html] view plaincopy在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <Button  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="wrap_content"  
  10.         android:text="动画加载1"  
  11.         android:id="@android:id/button1"  
  12.         ></Button>  
  13.     <Button   
  14.         android:id="@android:id/button2"  
  15.         android:layout_width="wrap_content"  
  16.         android:layout_height="wrap_content"  
  17.         android:layout_toRightOf="@android:id/button1"  
  18.         android:layout_marginLeft="20dip"  
  19.         android:text="动画加载2"  
  20.         />  
  21.     <Button   
  22.         android:id="@android:id/button3"  
  23.         android:layout_width="wrap_content"  
  24.         android:layout_height="wrap_content"  
  25.         android:layout_toRightOf="@android:id/button2"  
  26.         android:layout_marginLeft="20dip"  
  27.         android:text="动画wifi1"  
  28.         />  
  29.     <ImageView   
  30.         android:id="@+id/animationIV"  
  31.         android:layout_width="wrap_content"  
  32.         android:layout_height="wrap_content"  
  33.         android:layout_centerInParent="true"  
  34.         android:contentDescription="@string/app_name"  
  35.         />  
  36.       
  37.     <ImageView  
  38.         android:id="@+id/animationIV2"  
  39.         android:layout_width="wrap_content"  
  40.         android:layout_height="wrap_content"  
  41.         android:layout_toRightOf="@id/animationIV"  
  42.         android:src="@anim/load_animation_2"  
  43.         android:contentDescription="@string/app_name"  
  44.         android:layout_alignBottom="@id/animationIV"  
  45.         android:layout_marginLeft="30dip"  
  46.         />  
  47.       
  48.     <ImageView  
  49.         android:id="@+id/animationIV3"  
  50.         android:layout_width="wrap_content"  
  51.         android:layout_height="wrap_content"  
  52.         android:layout_above="@id/animationIV"  
  53.         android:contentDescription="@string/app_name"  
  54.         android:layout_marginTop="20dip"  
  55.         />  
  56. </RelativeLayout>  
[java] view plaincopy在CODE上查看代码片派生到我的代码片
  1. public class Test extends BaseActivity{  
  2.   
  3.     private Button button1,button2,button3;  
  4.     private ImageView animationIV;  
  5.     private ImageView animationIV2;  
  6.     private ImageView animationIV3;  
  7.     private AnimationDrawable AniDraw, AniDraw2, AniDraw3;  
  8.     @Override  
  9.     protected void onCreate(Bundle savedInstanceState) {  
  10.         super.onCreate(savedInstanceState);  
  11.         setContentView(R.layout.test);  
  12.         button1 = (Button)findViewById(android.R.id.button1);  
  13.         button1.setOnClickListener(new OnClickListener() {  
  14.             @Override  
  15.             public void onClick(View v) {  
  16.                 if (AniDraw.isRunning()) {  
  17.                     AniDraw.stop();  
  18.                 }else {  
  19.                     AniDraw.start();  
  20.                 }  
  21.                   
  22.             }  
  23.         });  
  24.         button2 = (Button)findViewById(android.R.id.button2);  
  25.         button2.setOnClickListener(new OnClickListener() {  
  26.             @Override  
  27.             public void onClick(View v) {  
  28.                 if (AniDraw2.isRunning()) {  
  29.                     AniDraw2.stop();  
  30.                 }else {  
  31.                     AniDraw2.start();  
  32.                 }  
  33.             }  
  34.         });  
  35.         button3 = (Button)findViewById(android.R.id.button3);  
  36.         button3.setOnClickListener(new OnClickListener() {  
  37.             @Override  
  38.             public void onClick(View v) {  
  39.                 if (AniDraw3.isRunning()) {  
  40.                     AniDraw3.stop();  
  41.                 }else {  
  42.                     AniDraw3.start();  
  43.                 }  
  44.             }  
  45.         });  
  46.           
  47.         animationIV = (ImageView)findViewById(R.id.animationIV);  
  48.         /** 
  49.          * 这里设置的是setBackgroundResource，那么你获取的时候通过getBackground 
  50.          */  
  51.         animationIV.setBackgroundResource(R.anim.load_animation_1);  
  52.         AniDraw = (AnimationDrawable)animationIV.getBackground();  
  53.         /** 
  54.          * 在xml里面通过src来设置跟在代码里面使用setImageResource获取的时候通过getDrawable 
  55.          * 例如：animationIV2.setImageResource(R.anim.load_animation_2);是一样的 
  56.          */  
  57.         animationIV2 = (ImageView)findViewById(R.id.animationIV2);  
  58.         AniDraw2 = (AnimationDrawable)animationIV2.getDrawable();  
  59.         animationIV3 = (ImageView)findViewById(R.id.animationIV3);  
  60.         animationIV3.setImageResource(R.anim.wifi_animation_1);  
  61.         AniDraw3 = (AnimationDrawable)animationIV3.getDrawable();  
  62.     }
posted @ 2015-03-07 14:17  -琥珀川-  阅读(680)  评论(0)  编辑  收藏  举报