Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> Android動畫之漸變動畫(Tween Animation)詳解 (漸變、縮放、位移、旋轉)

Android動畫之漸變動畫(Tween Animation)詳解 (漸變、縮放、位移、旋轉)

編輯:關於Android編程

本文實例講述了Android動畫之漸變動畫(Tween Animation)。分享給大家供大家參考,具體如下:

Android 平台提供了兩類動畫。 一類是Tween動畫,就是對場景裡的對象不斷的進行圖像變化來產生動畫效果(旋轉、平移、放縮和漸變)。

第二類就是 Frame動畫,即順序的播放事先做好的圖像,與gif圖片原理類似。

下面就講一下Tweene Animations。

主要類:

Animation                  動畫
AlphaAnimation             漸變透明度
RotateAnimation            畫面旋轉
ScaleAnimation             漸變尺寸縮放
TranslateAnimation         位置移動
AnimationSet               動畫集

有了這些類,那麼我們如何來實現動畫效果呢?

以自定義View為例,該View很簡單,畫面上只有一個圖片。 現在我們要對整個View分別實現各種Tween動畫效果。

AlphaAnimation

通過代碼實現 AlphaAnimation,如下:

//初始化
Animation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//設置動畫時間 alphaAnimation.setDuration(3000);
this.startAnimation(alphaAnimation);

其中AlphaAnimation類第一個參數fromAlpha表示動畫起始時的透明度, 第二個參數toAlpha表示動畫結束時的透明度。

setDuration用來設置動畫持續時間。

RotateAnimation

代碼:

Animation rotateAnimation = new RotateAnimation(0f, 360f);
rotateAnimation.setDuration(1000);
this.startAnimation(rotateAnimation);

其中RotateAnimation類第一個參數fromDegrees表示動畫起始時的角度, 第二個參數toDegrees表示動畫結束時的角度。

另外還可以設置伸縮模式pivotXType、pivotYType, 伸縮動畫相對於x,y 坐標的開始位置pivotXValue、pivotYValue等。

ScaleAnimation

代碼:

//初始化
Animation scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
//設置動畫時間
scaleAnimation.setDuration(500);
this.startAnimation(scaleAnimation);

ScaleAnimation類中

第一個參數fromX ,第二個參數toX:分別是動畫起始、結束時X坐標上的伸縮尺寸。
第三個參數fromY ,第四個參數toY:分別是動畫起始、結束時Y坐標上的伸縮尺寸。

另外還可以設置伸縮模式pivotXType、pivotYType, 伸縮動畫相對於x,y 坐標的開始位置pivotXValue、pivotYValue等。

TranslateAnimation

代碼:

//初始化
Animation translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//設置動畫時間 translateAnimation.setDuration(1000);
this.startAnimation(translateAnimation);

TranslateAnimation類

第一個參數fromXDelta ,第二個參數toXDelta:分別是動畫起始、結束時X坐標。
第三個參數fromYDelta ,第四個參數toYDelta:分別是動畫起始、結束時Y坐標。

參數詳細說明:

表二

XML節點 功能說明 alpha 漸變透明度動畫效果 <alpha
android:fromAlpha=”0.1″
android:toAlpha=”1.0″
android:duration=”3000″ /> fromAlpha

屬性為動畫起始時透明度

0.0表示完全透明
1.0表示完全不透明
以上值取0.0-1.0之間的float數據類型的數字 toAlpha 屬性為動畫結束時透明度

表三

scale 漸變尺寸伸縮動畫效果 <scale
android:interpolator= “@android:anim/accelerate_decelerate_interpolator”
android:fromXScale=”0.0″
android:toXScale=”1.4″
android:fromYScale=”0.0″
android:toYScale=”1.4″
android:pivotX=”50%”
android:pivotY=”50%”
android:fillAfter=”false”
android:startOffset=“700”
android:duration=”700″
android:repeatCount=”10″ /> fromXScale[float] fromYScale[float] 為動畫起始時,X、Y坐標上的伸縮尺寸 0.0表示收縮到沒有
1.0表示正常無伸縮
值小於1.0表示收縮
值大於1.0表示放大 toXScale [float]
toYScale[float] 為動畫結束時,X、Y坐標上的伸縮尺寸 pivotX[float]
pivotY[float] 為動畫相對於物件的X、Y坐標的開始位置 屬性值說明:從0%-100%中取值,50%為物件的X或Y方向坐標上的中點位置        

表四

translate 畫面轉換位置移動動畫效果 <translate
android:fromXDelta=”30″
android:toXDelta=”-80″
android:fromYDelta=”30″
android:toYDelta=”300″
android:duration=”2000″ /> fromXDelta
toXDelta 為動畫、結束起始時 X坐標上的位置   fromYDelta
toYDelta 為動畫、結束起始時 Y坐標上的位置          

表五

rotate 畫面轉移旋轉動畫效果 <rotate
android:interpolator=”@android:anim/accelerate_decelerate_interpolator”
android:fromDegrees=”0″
android:toDegrees=”+350″
android:pivotX=”50%”
android:pivotY=”50%”
android:duration=”3000″ /> fromDegrees 為動畫起始時物件的角度 說明
當角度為負數——表示逆時針旋轉
當角度為正數——表示順時針旋轉
(負數from——to正數:順時針旋轉)
(負數from——to負數:逆時針旋轉)
(正數from——to正數:順時針旋轉)
(正數from——to負數:逆時針旋轉) toDegrees 屬性為動畫結束時物件旋轉的角度 可以大於360度 pivotX
pivotY 為動畫相對於物件的X、Y坐標的開始位 說明:以上兩個屬性值 從0%-100%中取值
50%為物件的X或Y方向坐標上的中點位置         以上都是單獨的使用某個動畫,那麼如何讓多個動畫同時生效呢?

答案是 AnimationSet。

初看整個類名,還以為只是用來存放 Animation的一個Set, 細看才發現,該類也是繼承自 Animation的。

下面我們實現一個動畫,該動畫會讓圖片移動的同時,圖片透明度漸變,直接看代碼吧。

//初始化 Translate動畫
translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
//初始化 Alpha動畫
alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
//動畫集
AnimationSet set = new AnimationSet(true);
set.addAnimation(translateAnimation);
set.addAnimation(alphaAnimation);
//設置動畫時間 (作用到每個動畫)
set.setDuration(1000);
this.startAnimation(set);

是不是覺得很簡單呢?

附上整個View類的代碼吧。

package com.yfz.view;
import com.yfz.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
public class TweenAnim extends View {
  //Alpha動畫 - 漸變透明度
  private Animation alphaAnimation = null;
  //Sacle動畫 - 漸變尺寸縮放
  private Animation scaleAnimation = null;
  //Translate動畫 - 位置移動
  private Animation translateAnimation = null;
  //Rotate動畫 - 畫面旋轉
  private Animation rotateAnimation = null;
  public TweenAnim(Context context) {
    super(context);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.e("Tween", "onDraw");
    //加載一個圖片
    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);
  }
  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    Log.e("Tween", "onKeyDown");
    return true;
  }
  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
    Log.e("Tween", "onKeyDown");
    switch (keyCode) {
      case KeyEvent.KEYCODE_DPAD_UP:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
        alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
        //設置動畫時間
        alphaAnimation.setDuration(3000);
        this.startAnimation(alphaAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_DOWN:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
        rotateAnimation = new RotateAnimation(0f, 360f);
        rotateAnimation.setDuration(1000);
        this.startAnimation(rotateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_LEFT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
        //初始化
        scaleAnimation = new ScaleAnimation(0.1f, 1.0f,0.1f,1.0f);
        //設置動畫時間
        scaleAnimation.setDuration(500);
        this.startAnimation(scaleAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_RIGHT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
        //初始化
        translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
        //設置動畫時間
        translateAnimation.setDuration(1000);
        this.startAnimation(translateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_CENTER:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
        //初始化 Translate動畫
        translateAnimation = new TranslateAnimation(0.1f, 100.0f,0.1f,100.0f);
        //初始化 Alpha動畫
        alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
        //動畫集
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(alphaAnimation);
        //設置動畫時間 (作用到每個動畫)
        set.setDuration(1000);
        this.startAnimation(set);
        break;
      default:
        break;
    }
    return true;
  }
}

在Activity中調用該類時,需要注意一定setFocusable(true), 否則焦點在Activity上的話,onKeyUp方法是不會生效的。

調用該View的代碼:

TweenAnim anim = new TweenAnim(Lesson_11.this);
anim.setFocusable(true);
setContentView(anim);

上面通過Java代碼,實現了4中不同的Tween動畫,其實在Android中完全可以通過 XML文件來實現動畫。這種方式可能更加簡潔、清晰,也更利於重用。
下面我們分別對這幾種動畫改用xml來實現。

首先是AlphaAnimation。

alpha_anim.xml:

<?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="2000"
  />
</set>

不用解釋了吧。

RotateAnimation

rotate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <rotate
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="500"
  />
</set>

ScaleAnimation

scale_anim.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:toXScale="1.0"
    android:fromYScale="0.0"
    android:toYScale="1.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="false"
    android:duration="500"
  />
</set>

TranslateAnimation

translate_anim.xml:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
  <translate
    android:fromXDelta="10"
    android:toXDelta="100"
    android:fromYDelta="10"
    android:toYDelta="100"
  />
</set>

布局文件都已經寫完,那麼如何來使用這些文件呢?
其實也很簡單,此時需要用到AnimationUtils類。 通過該類中 loadAnimation 方法來加載這些布局文件。
如:

復制代碼 代碼如下:rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);

這次View類的代碼如下:

package com.yfz.view;
import com.yfz.R;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.drawable.BitmapDrawable;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.AnimationSet;
import android.view.animation.AnimationUtils;
import android.view.animation.RotateAnimation;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
public class TweenAnim2 extends View {
  //Alpha動畫 - 漸變透明度
  private Animation alphaAnimation = null;
  //Sacle動畫 - 漸變尺寸縮放
  private Animation scaleAnimation = null;
  //Translate動畫 - 位置移動
  private Animation translateAnimation = null;
  //Rotate動畫 - 畫面旋轉
  private Animation rotateAnimation = null;
  public TweenAnim2(Context context) {
    super(context);
  }
  @Override
  protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Log.e("Tween", "onDraw");
    //加載一個圖片
    canvas.drawBitmap(((BitmapDrawable)getResources().getDrawable(R.drawable.gallery_photo_5)).getBitmap(), 0, 0, null);
  }
  @Override
  public boolean onKeyDown(int keyCode, KeyEvent event) {
    Log.e("Tween", "onKeyDown");
    return true;
  }
  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
    Log.e("Tween", "onKeyDown");
    switch (keyCode) {
      case KeyEvent.KEYCODE_DPAD_UP:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_UP");
        alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
        this.startAnimation(alphaAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_DOWN:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_DOWN");
        rotateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.rotate_anim);
        this.startAnimation(rotateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_LEFT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_LEFT");
        scaleAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.scale_anim);
        this.startAnimation(scaleAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_RIGHT:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_RIGHT");
        translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
        this.startAnimation(translateAnimation);
        break;
      case KeyEvent.KEYCODE_DPAD_CENTER:
        Log.e("Tween", "onKeyDown - KEYCODE_DPAD_CENTER");
        //初始化 Translate動畫
        translateAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.translate_anim);
        //初始化 Alpha動畫
        alphaAnimation = AnimationUtils.loadAnimation(this.getContext(), R.anim.alpha_anim);
        //動畫集
        AnimationSet set = new AnimationSet(true);
        set.addAnimation(translateAnimation);
        set.addAnimation(alphaAnimation);
        //設置動畫時間 (作用到每個動畫)
        set.setDuration(1000);
        this.startAnimation(set);
        break;
      default:
        break;
    }
    return true;
  }
}

希望本文所述對大家Android程序設計有所幫助。

  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved