[android] 05_补间动画(Tween Animation)

Android 4.0

补间动画(Tween Animation)

动画(Animation)
Android提供了2种动画:
1> Tween动画,通过对 View 的内容进行一系列的图形变换 (包括平移、缩放、旋转、改变透明度)来实现动画效果。动画效果的定义可以采用XML来做也可以采用编码来做。Tween动画有4种类型:
动画的类型
Xml定义动画使用的配置节点
编码定义动画使用的类
渐变透明度动画效果
<alpha/>
AlphaAnimation
渐变尺寸缩放动画效果
<scale/>
ScaleAnimation
画面位置移动动画效果
<translate/>
TranslateAnimation
画面旋转动画效果
<rotate/>
RotateAnimation

2> Frame动画,即顺序播放事先做好的图像,跟放胶片电影类似。开发步骤:
(1)把准备好的图片放进项目res/ drawable下。
(2)在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称可以自定义。当然也可以采用编码方式定义动画效果(使用AnimationDrawable类)。
(3)为View控件绑定动画效果。调用代表动画的AnimationDrawable的start()方法开始动画。
设置了 rotate.setFillAfter(true);  最后是保存了drawingcache,没有更新ui,如果为该image社会自点击事件还在原来的位置
1、布局 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <LinearLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
        <Button
            android:layout_width="0dip"
            android:layout_weight="1" 
            android:layout_height="wrap_content"
            android:onClick="alpha"
            android:text="alpha透明" />
       
        <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:onClick="scale"
            android:text="scale缩放" /> 
            
        <Button
            android:layout_width="0dip"
            android:layout_weight="1.3"
            android:layout_height="wrap_content"
            android:onClick="translate"
            android:text="translate平移" />
        
         <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:onClick="rotate"
            android:text="rotate旋转" />
         
         <Button
            android:layout_width="0dip"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:onClick="set"
            android:text="动画组合" />
         
    </LinearLayout>
    
    
    <ImageView
        android:layout_marginTop="100dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal"
        android:id="@+id/iv"
        android:src="@drawable/ic_launcher"
        />
</LinearLayout>
2、核心代码:
package cn.zengfansheng.tween;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.Interpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
public class MainActivity extends Activity {
    private ImageView iv;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        iv = (ImageView) this.findViewById(R.id.iv);
    }
    /**
     * TODO 1、渐变透明度动画效果
     * @param view
     */
    @SuppressLint("NewApi")
    public void alpha(View view) {
        // 1、创建alpha动画
        AlphaAnimation alpha = new AlphaAnimation(0.2f, 1.0f);// 透明度,1.0f不透明,负数也没有关系
        // 2、设置
        alpha.setDuration(3000);// 持续时间
        alpha.setRepeatCount(3);// 重复次数,不包括本次,也就是4次
        alpha.setBackgroundColor(Color.BLUE);// 背景颜色
        alpha.setRepeatMode(Animation.REVERSE);// REVERSE:反转,RESTART:默认,重新开始
        alpha.setFillAfter(true);// true,表示停在后面的状态不变化
        // 3、开启动画
        iv.startAnimation(alpha);
    }
    /**
     * TODO 2、渐变尺寸缩放动画效果
     * @param view
     */
    public void scale(View view) {
        ScaleAnimation scale = new ScaleAnimation(0.1f, 2.0f, 0.5f, 3.0f);
        scale.setDuration(3000);
        scale.setRepeatMode(Animation.REVERSE);
        scale.setRepeatCount(1);
        scale.setFillAfter(true);
        // scale.setFillEnabled(true);
        // scale.setFillBefore(true);
        iv.startAnimation(scale);
    }
    /**
     * TODO 3、画面位置移动动画效果
     * @param view
     */
    public void translate(View view){
        TranslateAnimation translate = new TranslateAnimation(-30,100,-50,120);
        // -30,起始位置x轴,-50,起始位置y轴,负数表示x轴的左边,y轴的上方
        // 100,120分别表示移动到该位置的x、y轴(相对于原始位置)
        translate.setInterpolator(new Interpolator() {
            @Override
            public float getInterpolation(float x) {
                return x * 2 + 2;
            }
        });
        translate.setRepeatCount(1);
        translate.setDuration(2000);
        translate.setRepeatMode(Animation.REVERSE);
        iv.startAnimation(translate);
    }
    /**
     * TODO 4、画面旋转动画效果
     * @param view
     */
    public void rotate(View view) {
        // RotateAnimation rotate = new RotateAnimation(0, 90);// 0-90°,默认以自身左上角为圆心
        // RotateAnimation rotate = new RotateAnimation(90, 360, 100, 100);// 旋转从90°~360°,从相对自身的100,100开始为圆心旋转
        RotateAnimation rotate = new RotateAnimation(0, 360,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        // 以自身的中心为圆心,旋转从0°~360°
        
        rotate.setDuration(2000);
        rotate.setRepeatCount(5);
        rotate.setRepeatMode(Animation.REVERSE);
        rotate.setFillAfter(true);
        iv.startAnimation(rotate);
    }
    
    /**
     * TODO 5、动画组合-悟空翻跟斗
     * @param view
     */
    public void set(View view){
        
        AnimationSet set = new AnimationSet(false);
        ScaleAnimation sa = new ScaleAnimation(0.2f, 2.0f, 0.2f, 2.0f);
        sa.setDuration(2000);
        //sa.setRepeatCount(1);
        sa.setRepeatMode(Animation.REVERSE);
        RotateAnimation ra = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 1.0f,
               Animation.RELATIVE_TO_SELF, 1.0f);
        ra.setDuration(2000);
        TranslateAnimation ta = new TranslateAnimation(0, 0, 0, 100);
        ta.setDuration(2000);
        set.addAnimation(sa);
        set.addAnimation(ra);
        set.addAnimation(ta);
        set.setDuration(2000);
        set.setFillAfter(true);
        iv.startAnimation(set);
    }
}

Tween Animation动画:
本例要实现对ImageView对象进行渐变尺寸缩放动画效果
1> 在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称可以自定义,如:scale.xml,内容如下:
<?xml version="1.0" encoding="utf-8"?>
 <set xmlns:android="http://schemas.android.com/apk/res/android"> 
    <scale android:interpolator="@android:anim/accelerate_decelerate_interpolator" 
        android:fromXScale="0.0" 
        android:fromYScale="0.0"  
        android:toXScale="5" 
        android:toYScale="5" 
        android:pivotX="50%" 
        android:pivotY="50%" 
        android:fillAfter="false" 
        android:duration="5000"
        /> 
</set>
动画的进度使用interpolator控制,android提供了几个Interpolator 子类,实现了不同的速度曲线,如LinearInterpolator实现了匀速效果、Accelerateinterpolator实现了加速效果、DecelerateInterpolator实现了减速效果等。还可以定义自己的Interpolator子类,实现抛物线、自由落体等物理效果。
fromXScale(浮点型) 属性为动画起始时X坐标上的缩放尺寸 
fromYScale(浮点型) 属性为动画起始时Y坐标上的缩放尺寸
toXScale(浮点型)   属性为动画结束时X坐标上的缩放尺寸
toYScale(浮点型)   属性为动画结束时Y坐标上的缩放尺寸
说明: 以上四种属性值 
0.0表示收缩到没有 
1.0表示正常无缩放
值小于1.0表示收缩 
值大于1.0表示放大
pivotX(浮点型)     属性为动画相对于物件的X坐标的开始位置 
pivotY(浮点型)     属性为动画相对于物件的Y坐标的开始位置 
说明: 
以上两个属性值 从0%-100%中取值
50%为物件的X或Y方向坐标上的中点位置
duration(长整型)属性为动画持续时间 。说明:   时间以毫秒为单位
fillAfter(布尔型)属性当设置为true,该动画转化在动画结束后被应用
2> 在layout文件添加<ImageView>节点:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ImageView
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:src="@drawable/icon"
   android:id="@+id/imageView"
   />
</LinearLayout>
说明:除了可以对<ImageView>实现动画效果,其实也可以对其他View实现动画效果,如:<TextView>
3>在Activity里对ImageView使用前面定义好的动画效果:
public class AnimationActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
        //加载动画XML文件,生成动画指令
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale);
        //开始执行动画
        imageView.startAnimation(animation);
    }
}
备注:上面采用的是xml文件定义动画效果,作为代替,也可以采用编码方式实现。下面采用编码方式实现上述例子同样的效果:
public class AnimationActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
        ScaleAnimation animation = new ScaleAnimation(0.0f, 5f, 0.0f, 5f, 
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
        animation.setDuration(5000); //设置持续时间5秒
        imageView.startAnimation(animation);
    }
}
其他动画效果定义例子:
=================渐变透明度动画效果======================
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.1"    
        android:toAlpha="1.0"
        android:duration="3000"
    />
</set>
编码实现透明度动画效果:
public class AnimationActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
        AlphaAnimation animation = new AlphaAnimation(0.1, 1.0); 
        animation.setDuration(5000); //设置持续时间5秒
        imageView.startAnimation(animation);
    }
}
=================画面位置移动动画效果======================
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:repeatCount="2"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="120"
android:toYDelta="120"
android:duration="3000"
/>
<!-- fromXDelta fromYDelta 为动画起始时 X和Y坐标上的位置
toXDelta toYDelta为动画结束起始时  X和Y坐标上的位置
 -->
</set>
编码实现位置移动动画效果:
public class AnimationActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
        TranslateAnimation animation = new TranslateAnimation(0, 120, 0, 120); 
        animation.setDuration(5000); //设置持续时间5秒
        imageView.startAnimation(animation);
    }
}
=================画面旋转动画效果======================
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:interpolator="@android:anim/accelerate_interpolator"
android:repeatCount="2"
android:fromDegrees="0"
android:toDegrees="+360"
android:pivotX="50%"
android:pivotY="50%"
android:duration="3000"
/>
<!-- 
repeatCount 重复次数
fromDegrees为动画起始时物件的角度:
当角度为负数——表示逆时针旋转
当角度为正数——表示顺时针旋转
(负数fromDegrees——toDegrees正数:顺时针旋转)
(负数fromDegrees——toDegrees负数:逆时针旋转)
(正数fromDegrees——toDegrees正数:顺时针旋转)
(正数fromDegrees——toDegrees负数:逆时针旋转)
toDegrees属性为动画结束时物件旋转的角度 可以大于360度
pivotX,pivotY  为动画相对于物件的X、Y坐标的开始位.说明:以上两个属性值 从0%-100%中取值,50%为物件的X或Y方向坐标上的中点位置
 -->
</set>
编码实现:
RotateAnimation animation = new RotateAnimation(0, -90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(500);
imageView.startAnimation(animation);
=====================  Frame动画例子  ===============================
(1)把准备好的图片放进项目res/ drawable下。
   图片有:girl_1.gif, girl_2.gif, girl_3.gif
(2)在项目的res目录下创建文件夹anim,然后在anim文件夹下面定义动画XML文件,文件名称可以自定义,如:frame.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/girl_1" android:duration="200" />
    <item android:drawable="@drawable/girl_2" android:duration="200" />
    <item android:drawable="@drawable/girl_3" android:duration="200" />
</animation-list>
上面的XML就定义了一个Frame动画,其包含3帧动画,3帧动画中分别应用了drawable中的3张图片:girl_1.gif, girl_2.gif, girl_3.gif,每帧动画持续200毫秒。android:oneshot属性如果为true,表示动画只播放一次停止在最后一帧上,如果设置为false表示动画循环播放。
(3)为View控件绑定动画效果,调用代表动画的AnimationDrawable的start()方法开始动画。
public class FrameActivity extends Activity {
    private AnimationDrawable animationDrawable;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ImageView imageView = (ImageView)this.findViewById(R.id.imageView);
        imageView.setBackgroundResource(R.anim.frame);
        animationDrawable = (AnimationDrawable) imageView.getBackground();
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
          if (event.getAction() == MotionEvent.ACTION_DOWN) {//按下
              animationDrawable.start();
              return true;
          }
          return super.onTouchEvent(event);
    }
}
有一点需要强调的是:启动Frame动画的代码animationDrawable.start();不能应用在OnCreate()方法中,因为在OnCreate() AnimationDrawable还没有完全的与ImageView绑定。在OnCreate()中启动动画,只能看到第一张图片。这里在触摸事件中实现的。