Android 用Animation-list实现逐帧动画

在处理耗时工作的时候,大多数会弹出一个加载的框,里面有一个连续旋转的图片,很多时候都是用一张图片,使用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();
	}

效果由于我不会做动画效果图片,所以效果图也就不贴了


评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值