Android補間動畫(附帶Demo案例)

Demo源碼

請點擊：Github-Animation

補間動畫（Tween Animation）

• 分類：透明動畫、旋轉動畫、位移動畫、縮放動畫、組合動畫
• 寫法：代碼中動態設置屬性、使用xml文件定義屬性 兩種方式

補間動畫不會改變控件的位置

如果需要使用XML方式定義補間動畫
首先，在資源路徑 res 下創建目錄：anim（名字不能錯）
其次，在 res/anim 目錄下創建xml文件，根節點根據對應的補間動畫定義（文章中有具體的代碼示例）

透明動畫（AlphaAnimation）

1. 代碼示例（代碼中設置屬性）

//創建一個透明動畫
Animation animation = new AlphaAnimation(1, 0);
//添加屬性：設置重復播放一次（總共播放兩次）
animation.setRepeatCount(1);
//設置動畫重復播放的模式
animation.setRepeatMode(Animation.RESTART);
//添加屬性：動畫播放時長(兩次播放時長)
animation.setDuration(2000);
animation.setFillAfter(true);
//設置動畫
ivView.startAnimation(animation);
//設置播放監聽（監聽：開始播放時、播放結束時、重復播放時）
//animation.setAnimationListener(Animation.AnimationListener listener);

2. 代碼示例（XML中設置屬性）

• R.anim.anim_my_alpha

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

• 調用XML

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_my_alpha);
ivView.startAnimation(animation);

---

旋轉動畫（RotateAnimation）

1. 代碼示例（代碼中設置屬性）

RotateAnimation animation = new RotateAnimation(0, 360);
//RotateAnimation animation = new RotateAnimation(0, 360,
//        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(2000);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.RESTART);
animation.setFillAfter(true);
ivView.startAnimation(animation);

2. 代碼示例（XML中設置屬性）

• R.anim.anim_my_rotate

<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="2000"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:repeatCount="2"
        android:fillAfter="false"
        android:repeatMode="reverse"
        android:toDegrees="360">
    <!--以自身中心為點，旋轉360度-->
    <!--android:pivotX="50%"-->
    <!--android:pivotY="50%"-->
    <!--加'p'是以父窗體的中心點為參照物-->
    <!--android:pivotX="50%p"-->
    <!--android:pivotY="50%p"-->
</rotate>

• 調用XML

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_my_rotate);
ivView.startAnimation(animation);

---

位移動畫（TranslateAnimation）

1. 代碼示例（代碼中設置屬性）

//如果參照物是：Animation.RELATIVE_TO_PARENT，那么移動的距離：是父窗體寬高的多少倍
//TranslateAnimation animation = new TranslateAnimation(Animation.RELATIVE_TO_PARENT, 0,
//        Animation.RELATIVE_TO_PARENT, 0.3f, Animation.RELATIVE_TO_PARENT, 0, Animation.RELATIVE_TO_PARENT, 0.4f);
TranslateAnimation animation = new TranslateAnimation(300, -300, 0, 0);
animation.setDuration(2000);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.RESTART);
//設置動畫執行完畢后，是否停留到最后的位置上
//true:停留在最后的位置上; false:返回原來的位置上
//即便停留在最后的位置上，但控件的實際位置並沒有改變（可以通過給控件設置點擊事件判斷）
animation.setFillAfter(true);
ivView.startAnimation(animation);

2. 代碼示例（XML中設置屬性）

• R.anim.anim_my_translate

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="2000"
           android:fillAfter="false"
           android:fromXDelta="0"
           android:fromYDelta="0"
           android:repeatCount="1"
           android:repeatMode="reverse"
           android:toXDelta="0"
           android:toYDelta="30%p">
    <!--X軸不變，Y軸方向向下移動距離：父窗體高度的30%-->
    <!--帶%:相當於父窗體或自身的寬高。不帶%:直接就是移動多少像素-->
    <!--帶p:相對於父窗體的。不帶p:相對於自己-->
</translate>

• 調用XML

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_my_translate);
ivView.startAnimation(animation);

---

縮放動畫（ScaleAnimation）

1. 代碼示例（代碼中設置屬性）

ScaleAnimation animation = new ScaleAnimation(1, 2, 1, 2,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(2000);
animation.setRepeatCount(1);
animation.setRepeatMode(Animation.RESTART);
animation.setFillAfter(true);
ivView.startAnimation(animation);

2. 代碼示例（XML中設置屬性）

• R.anim.anim_my_scale

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
       android:duration="2000"
       android:fromXScale="1"
       android:fromYScale="1"
       android:pivotX="50%"
       android:pivotY="50%"
       android:repeatCount="1"
       android:fillAfter="false"
       android:repeatMode="reverse"
       android:toXScale="2"
       android:toYScale="2">
    <!--以自身為參照物，X、Y軸均擴大2倍-->
</scale>

• 調用XML

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_my_scale);
ivView.startAnimation(animation);

---

組合動畫（AnimationSet）

1. 代碼示例（代碼中設置屬性）

AnimationSet set = new AnimationSet(true);
//透明
AlphaAnimation alpha = new AlphaAnimation(1, 0);
alpha.setRepeatCount(1);
alpha.setRepeatMode(Animation.RESTART);
set.addAnimation(alpha);
//旋轉
RotateAnimation rotate = new RotateAnimation(0, 360,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotate.setRepeatCount(1);
rotate.setRepeatMode(Animation.RESTART);
set.addAnimation(rotate);
//位移
TranslateAnimation translate = new TranslateAnimation(0, 0, -200, 200);
translate.setRepeatCount(1);
translate.setRepeatMode(Animation.RESTART);
set.addAnimation(translate);
//縮放
ScaleAnimation scale = new ScaleAnimation(1, 2, 1, 2,
                Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scale.setRepeatCount(1);
scale.setRepeatMode(Animation.RESTART);
set.addAnimation(scale);

set.setDuration(3000);
ivView.startAnimation(set);

2. 代碼示例（XML中設置屬性）

• R.anim.anim_my_set

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
            android:duration="2000"
            android:fromAlpha="1.0"
            android:repeatCount="1"
            android:fillAfter="false"
            android:repeatMode="reverse"
            android:toAlpha="0.0"/>
    <rotate
            android:duration="2000"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatCount="1"
            android:fillAfter="false"
            android:repeatMode="reverse"
            android:toDegrees="360"/>
    <translate
            android:duration="2000"
            android:fromXDelta="0"
            android:fromYDelta="0"
            android:fillAfter="false"
            android:repeatCount="1"
            android:repeatMode="reverse"
            android:toXDelta="0"
            android:toYDelta="30%p"/>
    <scale
            android:duration="2000"
            android:fromXScale="1"
            android:fromYScale="1"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatCount="1"
            android:fillAfter="false"
            android:repeatMode="reverse"
            android:toXScale="2"
            android:toYScale="2"/>
</set>

• 調用XML

Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_my_set);
ivView.startAnimation(animation);

PS：
補間動畫：我踩過的坑

屬性動畫：請點擊此處

幀動畫：請點擊此處