Android動畫效果之Tween Animation（補間動畫）

前言：

    最近公司專案下個版本迭代裡面設計了很多動畫效果，在以往的專案中開發中也會經常用到動畫，所以在公司下個版本迭代開始之前，抽空總結一下Android動畫。今天主要總結Tween Animation（補間動畫）。

     其他幾種動畫效果：

• Android動畫效果之Tween Animation（補間動畫）
• Android動畫效果之Frame Animation（逐幀動畫）
• Android動畫效果之初識Property Animation（屬性動畫）
• Android動畫效果之Property Animation進階（屬性動畫）
• Android動畫效果之自定義ViewGroup新增布局動畫

Tween Animation（補間動畫）：

    Tween動畫，通過對View的內容進行一系列的圖形變換 (包括平移、縮放、旋轉、改變透明度)來實現動畫效果。動畫效果的定義可以採用XML來做也可以採用編碼來做。

 

動畫型別	XML配置方式	Java程式碼實現方式
漸變透明度動畫效果	<alpha/>	AlphaAnimation
漸變尺寸縮放動畫效果	<scale/>	ScaleAnimation
畫面旋轉動畫效果	<rotate/>	RotateAnimation
畫面位置移動動畫效果	<translate/>	TranslateAnimation
組合動畫效果	<set/>	AnimationSet

xml檔案存放目錄如下圖所示：

具體如何實現：

1.）alpha漸變透明度動畫效果

 xml方式：

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fillAfter="false"
    android:fromAlpha="1.0"
    android:toAlpha="0.0" />

fromAlpha:開始時透明度
toAlpha： 結束時透明度
duration：動畫持續時間
fillAfter：設定動畫結束後保持當前的位置

XML方式載入方式通過AnimationUtils.loadAnimation(this, R.anim.anim_alpha)獲取Animation

  Animation alphaAnimation = AnimationUtils.loadAnimation(this, R.anim.anim_alpha);
  imageView.startAnimation(alphaAnimation);

Java程式碼方式：

  Animation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
  alphaAnimation.setDuration(500);//設定動畫持續時間為500毫秒
  alphaAnimation.setFillAfter(false);//設定動畫結束後保持當前的位置（即不返回到動畫開始前的位置）
  imageView.startAnimation(alphaAnimation);

2.）scale漸變尺寸縮放動畫效果

 xml方式：

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="1"
    android:repeatMode="reverse"
    android:startOffset="0"
    android:toXScale="1.5"
    android:toYScale="1.5" />

fromXDelta,fromYDelta 起始時X，Y座標,螢幕右下角的座標是X:320,Y:480
toXDelta， toYDelta 動畫結束時X,Y的座標
interpolator 指定動畫插入器
fromXScale,fromYScale， 動畫開始前X,Y的縮放，0.0為不顯示， 1.0為正常大小
toXScale，toYScale， 動畫最終縮放的倍數， 1.0為正常大小，大於1.0放大
pivotX， pivotY 動畫起始位置，相對於螢幕的百分比,兩個都為50%表示動畫從自身中間開始
startOffset， 動畫多次執行的間隔時間，如果只執行一次，執行前會暫停這段時間，單位毫秒
duration，一次動畫效果消耗的時間，單位毫秒，值越小動畫速度越快
repeatCount，動畫重複的計數，動畫將會執行該值+1次
repeatMode，動畫重複的模式，reverse為反向，當第偶次執行時，動畫方向會相反。restart為重新執行，方向不變

Java方式：

 Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    scaleAnimation.setDuration(500);//設定動畫持續時間為500毫秒
    scaleAnimation.setFillAfter(true);//如果fillAfter的值為true,則動畫執行後，控制元件將停留在執行結束的狀態
    scaleAnimation.setFillBefore(false);//如果fillBefore的值為true，則動畫執行後，控制元件將回到動畫執行之前的狀態
    scaleAnimation.setRepeatCount(3);//設定動畫迴圈次數
    scaleAnimation.setRepeatMode(Animation.REVERSE);
    scaleAnimation.setStartOffset(0);
    scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//設定動畫插入器
    imageView.startAnimation(scaleAnimation);

3.）rotate畫面旋轉動畫效果

xml方式：

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

fromDegrees 動畫開始時的角度
toDegrees 動畫結束時物件的旋轉角度,正代表順時針
pivotX 屬性為動畫相對於物件的X座標的開始位置
pivotY 屬性為動畫相對於物件的Y座標的開始位置

Java方式：

Animation rotateAnimation = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(500);
rotateAnimation.setFillAfter(true);
rotateAnimation.setInterpolator(this, android.R.anim.accelerate_decelerate_interpolator);//設定動畫插入器
imageView.startAnimation(rotateAnimation);

4.）translate畫面位置移動動畫效果

xml方式：

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="100"
    android:fromYDelta="0"
    android:interpolator="@android:anim/cycle_interpolator"
    android:toXDelta="0"
    android:toYDelta="0" />

fromXDelta,fromYDelta 起始時X，Y座標,螢幕右下角的座標是X:320,Y:480
toXDelta， toYDelta 動畫結束時X,Y的座標

Java方式：

Animation translateAnimation = new TranslateAnimation(0, 100, 0, 0);
translateAnimation.setDuration(500);
translateAnimation.setInterpolator(this, android.R.anim.cycle_interpolator);//設定動畫插入器
translateAnimation.setFillAfter(true);//設定動畫結束後保持當前的位置（即不返回到動畫開始前的位置）
imageView.startAnimation(translateAnimation);

5.）set組合動畫效果

xml方式：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:duration="500"
        android:fromAlpha="1.0"
        android:toAlpha="0.0" />

    <scale
        android:duration="500"
        android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:interpolator="@android:anim/decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="1"
        android:repeatMode="reverse"
        android:startOffset="0"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

如何使用

   AnimationSet animationSet = (AnimationSet) AnimationUtils.loadAnimation(this, R.anim.anim_set);
   imageView.startAnimation(animationSet);

Java方式

AnimationSet animationSet = new AnimationSet(true);

Animation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
alphaAnimation.setDuration(500);//設定動畫持續時間為500毫秒

Animation scaleAnimation = new ScaleAnimation(0.0f, 1.5f, 0.0f, 1.5f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(500);//設定動畫持續時間為500毫秒
scaleAnimation.setRepeatMode(Animation.REVERSE);
scaleAnimation.setStartOffset(0);
scaleAnimation.setInterpolator(this, android.R.anim.decelerate_interpolator);//設定動畫插入器

animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);

imageView.startAnimation(animationSet);

動畫監聽器Animation.AnimationListener：

 有時可能我們要在動畫的每個週期裡面做不同的操作，這時候就要藉助動畫監聽器了

  alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
    @Override
    public void onAnimationStart(Animation animation) {
        //動畫開始時呼叫
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        //動畫結束時呼叫
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
        //動畫重複時呼叫
    }
    });

 

幾種自帶的動畫插入器

AccelerateInterpolator 加速，開始時慢中間加速

DecelerateInterpolator 減速，開始時快然後減速

AccelerateDecelerateInterolator 先加速後減速，開始結束時慢，中間加速

AnticipateInterpolator 反向，先向相反方向改變一段再加速播放

AnticipateOvershootInterpolator 反向加超越，先向相反方向改變，再加速播放，會超出目的值然後緩慢移動至目的值

BounceInterpolator 跳躍，快到目的值時值會跳躍，如目的值100，後面的值可能依次為85，77，70，80，90，100

CycleIinterpolator 迴圈，動畫迴圈一定次數，值的改變為一正弦函式：Math.sin(2* mCycles* Math.PI* input)

LinearInterpolator 線性，線性均勻改變

OvershootInterpolator超越，最後超出目的值然後緩慢改變到目的值

以上幾種示例具體效果展示：