第二十四讲：Android动画入门（一） ? { Android学习指南 }

本讲内容：Android 动画入门指南
1、补间动画
2、逐帧动画

Android中动画的实现分两种方式，一种方式是补间动画 Teen Animation，就是说你定义一个开始和结束，中间的部分由程序运算得到。另一种叫逐帧动画 Frame Animation，就是说一帧一帧的连起来播放就变成了动画。有点Flash基础的同学理解起来会很容易。接下来我们一个一个学习。

一、补间动画 Teen Animation

Android中实现补间动画的思路是这样的，
1、首先用XML定义一个动画效果
2、依据这个XML使用AnimationUtils工具类创建一个Animationd对象
3、调用View组件的startAnimation方法实现动画。

接下来我们用一个例子来看一下。

1、创建一个项目 Lesson24_Animation，主Activity名字叫MainActivity.java

2、在res目录下创建一个anim目录，在目录下创建下面五个动画定义文件，需要注意的是这5个文件在是2.2下调试通过的，网上很多文档的xml是无法通过IDE的检查的，可能是新版本检查更严格了。

alpha_animation.xml

<?xml version="1.0" encoding="utf-8"?>  
<SET>  
<ALPHA xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:repeatcount="1" android:repeatmode="restart" android:fromalpha="0.5" android:toalpha="1.0" android:duration="300" />  
<ALPHA xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:repeatcount="0" android:repeatmode="restart" android:fromalpha="0.5" android:toalpha="1.0" android:duration="3000" />  
</SET> 

composite_animation.xml

<SET xmlns:android="http://schemas.android.com/apk/res/android" android:shareinterpolator="false">  
   <SCALE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:duration="700" android:fromxscale="1.0" android:toxscale="1.4" android:fromyscale="1.0" android:toyscale="0.6" android:pivotx="50%" android:pivoty="50%" android:fillafter="false" />  
   </SET><SET android:interpolator="@android:anim/decelerate_interpolator">  
      <SCALE xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:fromxscale="1.4" android:toxscale="0.0" android:fromyscale="0.6" android:toyscale="0.0" android:pivotx="50%" android:pivoty="50%" android:startoffset="700" android:fillbefore="false" />  
      <ROTATE xmlns:android="http://schemas.android.com/apk/res/android" android:duration="400" android:toyscale="0.0" android:pivotx="50%" android:pivoty="50%" android:startoffset="700" android:fromdegrees="0" android:todegrees="-45" />  
   </SET> 

rotate_animation.xml

<?xml version="1.0" encoding="utf-8"?>  
<SET>  
 <ROTATE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:duration="4000" android:pivotx="50%" android:pivoty="50%" android:fromdegrees="0" android:todegrees="-1440">  
 </ROTATE>  
</SET> 

scale_animation.xml

<?xml version="1.0" encoding="utf-8"?>  
<SET>  
    <SCALE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:duration="1000" android:fromxscale="0.0" android:toxscale="1.0" android:fromyscale="0.0" android:toyscale="1.0" android:pivotx="0%" android:pivoty="100%" android:fillafter="false">  
    </SCALE>  
    <SCALE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:duration="1000" android:fromxscale="0.0" android:toxscale="1.0" android:fromyscale="0.0" android:toyscale="1.0" android:pivotx="50%" android:pivoty="50%" android:fillafter="false">  
    </SCALE>  
</SET> 

translate_animation.xml

<?xml version="1.0" encoding="utf-8"?>  
<SET>  
<TRANSLATE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:duration="2000" android:fromxdelta="0" android:toxdelta="300" android:fromydelta="0" android:toydelta="0">  
 </TRANSLATE>  
<TRANSLATE xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/decelerate_interpolator" android:duration="2000" android:startoffset="2000" android:fromxdelta="0" android:toxdelta="-300" android:fromydelta="0" android:toydelta="0">  
 </TRANSLATE>  
</SET> 

3、MainActivity.java的内容如下：

package android.basic.lesson24;  
   
import android.app.Activity;  
import android.os.Bundle;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.animation.Animation;  
import android.view.animation.AnimationUtils;  
import android.widget.ImageButton;  
   
public class MainAnimation extends Activity {  
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
   
        //定义UI组件  
        final ImageButton ib1 = (ImageButton) findViewById(R.id.ImageButton01);  
        final ImageButton ib2 = (ImageButton) findViewById(R.id.ImageButton02);  
        final ImageButton ib3 = (ImageButton) findViewById(R.id.ImageButton03);  
        final ImageButton ib4 = (ImageButton) findViewById(R.id.ImageButton04);  
        final ImageButton ib5 = (ImageButton) findViewById(R.id.ImageButton05);  
   
        //定义监听器  
        OnClickListener ocl = new OnClickListener() {  
   
            @Override 
            public void onClick(View v) {  
                switch (v.getId()) {  
                case R.id.ImageButton01:  
                    //创建Animation对象  
                    Animation ani1 = AnimationUtils.loadAnimation(  
                            getApplicationContext(), R.anim.alpha_animation);  
                    //组件播放动画  
                    ib1.startAnimation(ani1);  
                    break;  
                case R.id.ImageButton02:  
                    Animation ani2 = AnimationUtils.loadAnimation(  
                            getApplicationContext(), R.anim.scale_animation);  
                    ib2.startAnimation(ani2);  
                    break;  
                case R.id.ImageButton03:  
                    Animation ani3 = AnimationUtils.loadAnimation(  
                            getApplicationContext(), R.anim.translate_animation);  
                    ib3.startAnimation(ani3);  
                    break;  
                case R.id.ImageButton04:  
                    Animation ani4 = AnimationUtils.loadAnimation(  
                            getApplicationContext(), R.anim.rotate_animation);  
                    ib4.startAnimation(ani4);  
                    break;  
                case R.id.ImageButton05:  
                    Animation ani5 = AnimationUtils.loadAnimation(  
                            getApplicationContext(), R.anim.composite_animation);  
                    ib5.startAnimation(ani5);  
                    break;  
                }  
   
            }  
   
        };  
   
        //绑定监听器  
        ib1.setOnClickListener(ocl);  
        ib2.setOnClickListener(ocl);  
        ib3.setOnClickListener(ocl);  
        ib4.setOnClickListener(ocl);  
        ib5.setOnClickListener(ocl);  
    }  
} 

4、运行程序，查看结果

原始图

点击第一个按钮的透明度变化效果

点击第二个按钮的缩放效果，这里看到的是两个缩放效果同时作用叠加的效果。也就是说默认情况下效果是同时发生的，而不是先后执行的，除非你使用 startoffset属性指定。同学们看这一讲最重要的还是自己练习来体会。

点击第三个按钮的位移效果，这个例子里我们可以清楚看到android:startOffset="2000"的作用，数独按钮前2秒向右移了300像素，后2秒又回到原处，注意第二个translate中的负值参数，它清晰的告诉我们位移数据是相对自身当时位置的。

点击第四个按钮的旋转效果，负的度数表示逆时针旋转。

点击第五个按钮的复合动画效果，这个效果的代码我是直接粘贴的官方帮助文档里的代码，看着效果还不赖^_^

二、逐帧动画

我们知道，Android是不支持Gif动画的，也不建议使用Gif动画，比较不幸的是到Android 2.2版本为止也不支持APNG这种png动画格式，所以我们制作只能用多张png图片逐帧播放的方式来实现动画效果。下面我们用一个例子来学习一下逐帧动画。

1、新建一个项目 Lesson24_FrameAnimation , 主Acitivy名字叫 MainFrameAnimation.java

2、拷贝下列图片到 res/drawable目录下

2、在res/anim目录下，新建一个文件 firefox_animation.xml 内容如下：

<?xml version="1.0" encoding="utf-8"?>  
 <ANIMATION xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" -list>  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_0" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_1" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_2" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_3" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_4" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_5" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_6" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_7" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_8" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_9" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_10" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_11" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_12" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_13" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_14" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_15" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_16" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_17" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_18" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_19" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_20" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_21" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_22" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_23" />  
    <ITEM android:duration="50" android:drawable="@drawable/firefox_animation_24" />  
</ANIMATION> 

3、在res/layout/main.xml中写入如下内容：

<?xml version="1.0" encoding="utf-8"?>  
<LINEARLAYOUT xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical">  
   
    <TEXTVIEW android:layout_height="wrap_content" android:layout_width="fill_parent" android:text="Android逐帧动画示例" android:textsize="20sp" />  
   
    <IMAGEVIEW android:layout_height="wrap_content" android:layout_width="wrap_content" android:background="@anim/firefox_animation" android:id="@+id/ImageView01" android:layout_margin="10dp">  
    </IMAGEVIEW>  
   
    <BUTTON type=submit android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="开始动画" android:textsize="20sp" android:id="@+id/Button01">  
    </BUTTON>  
    <BUTTON type=submit android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="停止动画" android:textsize="20sp" android:id="@+id/Button02">  
    </BUTTON>  
</LINEARLAYOUT> 

3、在MainFrameAnimation.javaz中的内容如下：

package android.basic.lesson24;  
   
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;  
   
public class MainFrameAnimaton extends Activity {  
    /** Called when the activity is first created. */ 
    @Override 
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.main);  
   
        // 定义UI组件  
        Button b1 = (Button) findViewById(R.id.Button01);  
        Button b2 = (Button) findViewById(R.id.Button02);  
        final ImageView iv = (ImageView) findViewById(R.id.ImageView01);  
   
        // 定义点击监听器  
        OnClickListener ocl = new OnClickListener() {  
   
            @Override 
            public void onClick(View v) {  
   
                // 定义"动画可画"对象，我起的名字，你看着不顺眼就当不存在^_^  
                AnimationDrawable ad = (AnimationDrawable) iv.getBackground();  
   
                switch (v.getId()) {  
                case R.id.Button01:  
                    //调用动画可画对象的开始播放方法  
                    ad.start();  
                    break;  
                case R.id.Button02:  
                    //调用动画可画对象的停止播放方法  
                    ad.stop();  
                    break;  
                }  
            }  
        };  
   
        //绑定监听器  
        b1.setOnClickListener(ocl);  
        b2.setOnClickListener(ocl);  
    }  
} 

4、运行程序，查看效果：

换个背景再来一张，可以看到png动画的透明就是不一般^_^

顺便提一下，我的这些可爱的小狐狸图标，是在APNG这个项目中找到的，感兴趣的朋友去搜搜APNG吧。

本讲就到这里吧。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。