android实现逐帧动画

coolffe 6年前

逐帧动画是指按照给定的顺序轮流显示一定数目的图像而产生的动画效果。一般应用于比较简单的场景,比如一个监测手机wifi信号强度的应用中,不断的显示wifi信号的强弱程度就比较适合用逐帧动画。

逐帧动画的使用例子:

使用Animation-list定义图像元素,注意顺序。

图片素材:

文件名称:

icon1.png

icon1.png

icon1.png

icon1.png

icon1.png

icon1.png

利用上面的图片素材,我们定义了两个Animation-list,文件存放在res/drawable目录下

顺序显示动画文件:animation1.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="true"    >      <item android:drawable="@drawable/icon1" android:duration="150"></item>      <item android:drawable="@drawable/icon2" android:duration="150"></item>      <item android:drawable="@drawable/icon3" android:duration="150"></item>      <item android:drawable="@drawable/icon4" android:duration="150"></item>      <item android:drawable="@drawable/icon5" android:duration="150"></item>      <item android:drawable="@drawable/icon6" android:duration="150"></item>  </animation-list>

倒序显示动画文件:animation2.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="true"    >      <item android:drawable="@drawable/icon6" android:duration="150"></item>      <item android:drawable="@drawable/icon5" android:duration="150"></item>      <item android:drawable="@drawable/icon4" android:duration="150"></item>      <item android:drawable="@drawable/icon3" android:duration="150"></item>      <item android:drawable="@drawable/icon2" android:duration="150"></item>      <item android:drawable="@drawable/icon1" android:duration="150"></item>  </animation-list>

布局文件, 文件名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:orientation="vertical">                                                                                                                                                                                                                                                                                                                                  <ImageView android:id="@+id/animationIV"              android:layout_width="wrap_content"              android:layout_height="wrap_content"              android:padding="5px"              android:src="@drawable/animation1"/>                                                                                                                                                                                                                                                                                                                                           <Button android:id="@+id/buttonA"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:padding="5px"          android:text="顺序显示" />                                                                                                                                                                                                                                                                                                                                   <Button android:id="@+id/buttonB"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:padding="5px"          android:text="停止" />                                                                                                                                                                                                                                                                                                                                   <Button android:id="@+id/buttonC"          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:padding="5px"          android:text="倒序显示" />  </LinearLayout>

Activity文件,文件名:MainActivity.java

package org.shuxiang.test;  import android.app.Activity;  import android.graphics.drawable.AnimationDrawable;  import android.os.Bundle;  import android.view.View;  import android.view.View.OnClickListener;  import android.view.Window;  import android.widget.Button;  import android.widget.ImageView;  public class Activity10 extends Activity  {      private ImageView animationIV;      private Button buttonA, buttonB, buttonC;      private AnimationDrawable animationDrawable;      @Override      public void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          requestWindowFeature(Window.FEATURE_NO_TITLE);          setContentView(R.layout.test10);                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   animationIV = (ImageView) findViewById(R.id.animationIV);          buttonA = (Button) findViewById(R.id.buttonA);          buttonB = (Button) findViewById(R.id.buttonB);          buttonC = (Button) findViewById(R.id.buttonC);                                                                                                                                                                                                                                                                                                                       buttonA.setOnClickListener(new OnClickListener()          {              @Override              public void onClick(View v) {                  // TODO Auto-generated method stub                  animationIV.setImageResource(R.drawable.animation1);                  animationDrawable = (AnimationDrawable) animationIV.getDrawable();                  animationDrawable.start();              }                                                                                                                                                                                                                                                                                                                           });                                                                                                                                                                                                                                                                                                                       buttonB.setOnClickListener(new OnClickListener()          {              @Override              public void onClick(View v) {                  // TODO Auto-generated method stub                  animationDrawable = (AnimationDrawable) animationIV.getDrawable();                  animationDrawable.stop();              }                                                                                                                                                                                                                                                                                                                           });                                                                                                                                                                                                                                                                                                                       buttonC.setOnClickListener(new OnClickListener()          {              @Override              public void onClick(View v) {                  // TODO Auto-generated method stub                  animationIV.setImageResource(R.drawable.animation2);                  animationDrawable = (AnimationDrawable) animationIV.getDrawable();                  animationDrawable.start();              }                    });             }  }

总结:Animation-list是被当作一个drawable对象的,当需要开始播放动画的时候,将drawable取出,然后调用drawable的start方法。

所以这个动画的作用对象是drawable。而drawable既可以作为ImageView的ImageResource,也可以作为任意一个View的background,如果是作为ImageResource,我们用户getDrawable()取出

如果是作为background,用 getBackground()取出。