Android 用Animation-list实现逐帧动画

2022-01-22 10:44:39

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

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

Android 用Animation-list实现逐帧动画

码农公寓

相关文章