当前位置: 代码迷 >> Android >> Android Animation 卡通片Demo(Frame逐帧动画)
  详细解决方案

Android Animation 卡通片Demo(Frame逐帧动画)

热度:185   发布时间:2016-04-28 05:39:08.0
Android Animation 动画Demo(Frame逐帧动画)

上一篇介绍了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形式实现逐帧动画的源代码:

点击下载源码

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

点击下载源码

  相关解决方案