Android Animation 动画Demo（Frame逐帧动画）

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

上一篇介绍了Animation动画其一：Tween补间动画。

这篇文章接下来介绍Animation另一种动画形式：Frame逐帧动画。

Frame动画是一系列图片按照一定的顺序展示的过程，和放电影的机制很相似，我们称为逐帧动画。Frame动画可以被定义在XML文件中，也可以完全编码实现(后面会给出这两种实现方式的源代码Demo)。

下面分别介绍：

一、定义在xml中实现：

实现效果图：

源代码：

布局文件：main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="以xml文件的形式实现Frame动画"
        android:textColor="#000000"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" />

    <Button
        android:id="@+id/startButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="播放逐帧动画"
        android:textColor="#000000" />

    <Button
        android:id="@+id/stopButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="停止逐帧动画"
        android:textColor="#000000" />

</LinearLayout>

frame.xml:

<?xml version="1.0" encoding="UTF-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >
 <!-- android:oneshot如果定义为true的话，此动画只会执行一次，如果为false则一直循环。 -->
    android:oneshot="false" >


    <!-- 指定每一帧是使用的图片,及播放时间 -->
    <item
        android:drawable="@drawable/f1"
        android:duration="500">
    </item>
    <item
        android:drawable="@drawable/f2"
        android:duration="500">
    </item>
    <item
        android:drawable="@drawable/f3"
        android:duration="500">
    </item>

</animation-list>

FrameDemoActivity:

package com.zhy.com;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

/**
 * 
 	逐帧动画Frame动画实例
 * 
 */
public class FrameDemoActivity extends Activity {
	private Button startBtn;// 开始动画按钮
	private Button stopBtn;// 停止动画按钮
	private ImageView imageView;// 显示图片
	private AnimationDrawable anim;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		// 实例化控件
		startBtn = (Button) findViewById(R.id.startButton);
		stopBtn = (Button) findViewById(R.id.stopButton);
		imageView = (ImageView) findViewById(R.id.image);
		// 指定动画的帧的列表
		imageView.setBackgroundResource(R.anim.frame);
		// AnimationDrawable--与逐帧动画相关的Drawable
		anim = (AnimationDrawable) imageView.getBackground();
		// 按钮事件
		startBtn.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				// 开始动画
				anim.start();
			}
		});
		stopBtn.setOnClickListener(new OnClickListener() {
			public void onClick(View v) {
				anim.stop();// 停止播放
			}
		});

	}
}

二、直接代码编码的形式实现：

实现效果图：

源代码：

布局文件：

activity_main:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:gravity="center_horizontal"
        android:text="在代码中直接编码的形式实现Frame动画"
        android:textColor="#000000"
        android:textSize="20sp" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_marginBottom="5dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="5dp" />

    <Button
        android:id="@+id/startButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="播放逐帧动画"
        android:textColor="#000000" />

    <Button
        android:id="@+id/stopButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="停止逐帧动画"
        android:textColor="#000000" />

</LinearLayout>

MainActivity:

package com.framedemo2;

import android.app.Activity;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends Activity implements OnClickListener {
	private Button startBtn;// 开始动画按钮
	private Button stopBtn;// 停止动画按钮
	private ImageView imageView;// 显示图片
	private AnimationDrawable anim;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		// 实例化控件
		startBtn = (Button) findViewById(R.id.startButton);
		stopBtn = (Button) findViewById(R.id.stopButton);
		imageView = (ImageView) findViewById(R.id.image);
		anim = new AnimationDrawable();

		startBtn.setOnClickListener(this);
		stopBtn.setOnClickListener(this);

		for (int i = 1; i <= 3; i++) {
			// 根据资源名称和目录获取R.java中对应的资源ID
			int id = getResources().getIdentifier("f" + i, "drawable",
					getPackageName());
			// 根据资源ID获取到Drawable对象
			Drawable drawable = getResources().getDrawable(id);
			// 将此帧添加到AnimationDrawable中
			anim.addFrame(drawable, 300);
		}
		anim.setOneShot(false); // 如果设置为false，则只会播放一次，不会循环播放。 
		imageView.setBackgroundDrawable(anim); // 将动画设置为ImageView背景
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.startButton:

			anim.start();
			break;
		case R.id.stopButton:
			anim.stop();
			break;

		default:
			break;
		}
	}

}

下面提供以上两种实现方式的源代码，供读者参考使用：

以xml形式实现逐帧动画的源代码：

点击下载源码

直接以编码的方式实现逐帧动画的源代码：

点击下载源码

Android Animation 动画Demo（Frame逐帧动画）,,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢