影片|深入淺析

目錄

一、View影片

View影片包括：補間影片、逐幀影片，

1.1 補間影片

作用物件：View

影片效果：平移、縮放、旋轉、透明度

四種影片xml代碼

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:shareInterpolator="true"
        android:interpolator = "@android:anim/linear_interpolator">
    <rotate     
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />

    <translate
        android:fromXDelta="float"
        android:fromYDelta="float"
        android:toXDelta="float"
        android:toYDelta="float" />
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float"/>
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float"/>
</set>

以下是對上面代碼的說明，

1.set:表示影片集合，對應AnimationSet類

• interpolator:表示影片集合所采用的插值器，影響影片的速度，可以不指定，默認是accelerate_decelerate_interpolate(加速減速插值器)，下文屬性影片會詳細介紹插值器的相關知識，
• shareInterpolator:表示集合中的影片是否和集合共享一個插值器，如果集合不指定插值器, 那么子影片就需要單獨制定所需的插值器或者使用默認值，
• fillAfter：表示影片結束時是否保持影片結束時的狀態

2.rotate：表示旋轉影片，對應RotateAnimation類，

• fromDegrees：影片起始時物件的角度 (0度指X軸正方向所在方向)
• toDegrees：影片結束時物件旋轉的角度

以上兩個屬性共同確定旋轉方向，原則是：當角度(to-from)為負數時表示逆時針旋轉，反之，

• pivotY：影片旋轉的軸點的X坐標
• pivotX：影片旋轉的軸點的Y坐標

3.translate：表示平移影片，對應TranslateAnimation類

• android:fromXDelta：影片起始時X坐標上的位置，
• android:toXDelta：影片結束時X坐標上的位置，
• android:fromYDelta：影片起始時Y坐標上的位置，
• android:toYDelta：影片結束時Y坐標上的位置，

注意：以上四個屬性以及后面幾個類似屬性的取值可能是數值、百分數、百分數p，各自含義是：

• 50：以View左上角為原點沿坐標軸正方向偏移50px，
• 50%：以View左上角為原點沿坐標軸正方向偏移View寬/高度的50%，
• 50%p：以View左上角為原點沿坐標軸正方向偏移父（parent）控制元件寬/高度的50%，區別如圖：

4.alpha：表示透明度影片，對應AlphaAnimation類

• fromAlpha：影片起始時透明度
• toAlpha：影片結束時透明度

以上兩個屬性值：從0-1中取值，注意：

• 值=0.0 ：表示完全透明
• 值=1.0 ：表示完全不透明

5.scale：表示縮放影片，對應ScaleAnimation類

• fromXScale：影片起始時X坐標上的伸縮尺寸
• toXScale：影片結束時X坐標上的伸縮尺寸
• fromYScale：影片起始時Y坐標上的伸縮尺寸
• toYScale：屬性為影片結束時Y坐標上的伸縮尺寸

以上四個屬性值的值含義：

• 值=0.0 ：表示收縮到沒有
• 值＜1.0 ：表示收縮
• 值=1.0 ：表示無伸縮
• 值＞1.0 ：表示放大

• pivotX：影片相對于物件的X坐標的開始位置
• pivotY：影片相對于物件的Y坐標的開始位置

以上兩個屬性值表示縮放的軸點：從0%-100%中取值，

1.1.1 單個影片使用

在XML/Java代碼中設定，在XML中設定，影片描述的可讀性更好，在Java代碼中設定，影片效果可動態創建，

以平移影片為例；

XML設定法

• 步驟1：xml設定

<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000" //影片持續時間
    android:startOffset ="1000"// 影片延遲開始時間（ms）
    android:fillBefore = "true"// 影片播放完后，視圖是否會停留在影片開始的狀態，默認為true
    android:fillAfter = "false"// 影片播放完后，視圖是否會停留在影片結束的狀態，優先于fillBefore值，默認為false
    android:fillEnabled= "true"// 是否應用fillBefore值，對fillAfter值無影響，默認為true
    android:repeatMode="restart"// 選擇重復播放影片模式，restart代表正序重放，reverse代表倒序回放，默認為restart
    android:repeatCount = "0"重放次數（所以影片的播放次數=重放次數+1），為infinite時無限重復

    android:fromXDelta="0"// 視圖在水平方向x 移動的起始值
    android:toXDelta="500"// 視圖在水平方向x 移動的結束值

    android:fromYDelta="0"// 視圖在豎直方向y 移動的起始值
    android:toYDelta="0" // 視圖在豎直方向y 移動的結束值
    />

• 步驟2：java代碼

public class MainActivity extends AppCompatActivity {
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = findViewById(R.id.button);
        final Animation animation = AnimationUtils.loadAnimation(this,R.anim.animation); //創建影片物件，傳入xml檔案
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                button.startAnimation(animation); //啟動影片
            }
        });
    }
}

• 效果圖

Java代碼設定法

        Button mButton = (Button) findViewById(R.id.Button);
        // 步驟1:創建 需要設定影片的 視圖View

        Animation translateAnimation = new TranslateAnimation(0，500，0，0);
        // 步驟2：創建平移影片的物件：平移影片對應的Animation子類為TranslateAnimation
        // 引數分別是：
        // 1. fromXDelta ：視圖在水平方向x 移動的起始值
        // 2. toXDelta ：視圖在水平方向x 移動的結束值
        // 3. fromYDelta ：視圖在豎直方向y 移動的起始值
        // 4. toYDelta：視圖在豎直方向y 移動的結束值

        translateAnimation.setDuration(3000);
        // 固定屬性的設定都是在其屬性前加“set”，如setDuration（）
        mButton.startAnimation(translateAnimation);
        // 步驟3:播放影片

效果圖跟上圖一樣，

1.1.2 組合影片使用

• 步驟1：XML設定

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"

android:duration="3000"
android:startOffset ="0"
android:fillBefore = "true"
android:fillAfter = "false"
android:fillEnabled= "true"
android:repeatMode="restart"
android:repeatCount = "0"
android:interpolator = "@android:anim/linear_interpolator">

<rotate  //旋轉影片
    android:duration="1000"
    android:fromDegrees="0"// 影片開始時 視圖的旋轉角度(正數 = 順時針，負數 = 逆時針)
    android:toDegrees="360"// 影片結束時 視圖的旋轉角度(正數 = 順時針，負數 = 逆時針)
    android:pivotX="50%"// 旋轉軸點的x坐標
    android:pivotY="50%"// 旋轉軸點的y坐標
    android:repeatMode="restart"
    android:repeatCount="infinite"
    />

<translate //平移影片
    android:duration="10000"
    android:startOffset ="1000"
    android:fromXDelta="-50%p"
    android:fromYDelta="0"
    android:toXDelta="50%p"
    android:toYDelta="0" />
</set>

• 步驟2：Java代碼設定

public class MainActivity extends AppCompatActivity {
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = findViewById(R.id.button);
        final Animation animation = AnimationUtils.loadAnimation(this,R.anim.group_animation); //創建影片物件，傳入xml檔案
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                button.startAnimation(animation); //啟動影片
            }
        });
    }
}

• 效果圖

1.2 逐幀影片

使用物件：View

原理：將影片拆分為幀的形式，且定義每一幀 = 每一張圖片

本質：順序播放一組預先定義好的圖片

使用

• 步驟1： 在res/anim檔案夾中創建xml檔案

  <?xml version="1.0" encoding="utf-8"?>
  <animation-list
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:oneshot="true" // 設定是否只播放一次，默認為false
   >
  
  // item = 影片圖片資源；duration = 設定一幀持續時間(ms)
      <item android:drawable="@drawable/a0" android:duration="100"/>
      <item android:drawable="@drawable/a1" android:duration="100"/>
      <item android:drawable="@drawable/a2" android:duration="100"/>
      <item android:drawable="@drawable/a3" android:duration="100"/>
  </animation-list>
  

• 步驟二：在Java代碼中設定

 Button button = findViewById(R.id.button);
                 button.setBackgroundResource(R.drawable.frame_animation);
                 
AnimationDrawable animationDrawable = (AnimationDrawable) button.getBackground();
  animationDrawable.start(); //啟動影片

優點：使用簡單、方便

缺點：容易引起OOM,當使用大量 和尺寸較大的圖片資源時，

二、屬性影片

說明：屬性影片（Property Animation）是在 Android 3.0（API 11）河駁供的一種全新影片模式，

Q：為什么要提供屬性影片？

• View影片作用物件局限于View，而屬性影片能作用于任意Java物件，
• View影片只是改變了View的視覺效果，沒有改變View的屬性，屬性影片可以改變物件的屬性，
• View影片效果單一，屬性影片效果更加豐富，

屬性改變說明：比如將螢屏左上角的按鈕通過補間影片移動到螢屏右下角，點擊當前按鈕位置（右下角）是沒有效果的，實際上按鈕還是停留在左上角，補間影片只是將按鈕繪制到螢屏右下角，改變了視覺效果而已，

2.1 使用

同樣的，屬性影片可以在xml設定實，也可以在代碼中設定實作，建議用代碼實作：

• 代碼實作比較簡單，
• 屬性的起始值有時候無法確定，需要動態地創建屬性影片，

下面是組合影片旋轉+平移實體，

Java 設定

 button = findViewById(R.id.button);
        // 步驟1：設定需要組合的影片效果
        // 平移影片

        ObjectAnimator translation = ObjectAnimator.ofFloat(button, "translationX", 0, 300);
        translation.setRepeatCount(0);

        // 旋轉影片
        ObjectAnimator rotate = ObjectAnimator.ofFloat(button, "rotation", 0f, 360f);


        // 步驟2：創建組合影片的物件
        final AnimatorSet animSet = new AnimatorSet();

        // 步驟3：根據需求組合影片
        animSet.play(translation).with(rotate);
        // 步驟4：啟動影片
		animSet.start(); 

XML設定

• 步驟1：XML設定

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:ordering="sequentially" >
    // 表示Set集合內的影片按順序進行
    // ordering的屬性值:sequentially & together
    // sequentially:表示set中的影片，按照先后順序逐步進行（a 完成之后進行 b ）
    // together:表示set中的影片，在同一時間同時進行,為默認值

    <set android:ordering="together" >
        // 下面的影片同時進行
        <objectAnimator
            android:duration="2000"
            android:propertyName="translationX"
            android:valueFrom="0"
            android:valueTo="300"
            android:valueType="floatType" >
        </objectAnimator>
        
        <objectAnimator
            android:duration="3000"
            android:propertyName="rotation"
            android:valueFrom="0"
            android:valueTo="360"
            android:valueType="floatType" >
        </objectAnimator>
    </set>

       
</set>

• Java代碼設定

AnimatorSet set = (AnimatorSet)AnimatorInflater.loadAnimator(this,R.anim.property_animator);
set.setTarget(button); //設定影片作用物件
set.start();//啟動影片

• 效果圖

2.2 插值器與估值器

插值器

 //xml設定
 android:interpolator="@android:anim/overshoot_interpolator"
 //Java代碼設定
 Interpolator overshootInterpolator = new OvershootInterpolator();
 animation.setInterpolator(overshootInterpolator);

估值器

• 作用：根據當前屬性改變的百分比計算出改變后的屬性值，
• 常用的系統內置的估值器：

• 整型估值器(IntEvaluator)
• 浮點型估值器(FloatEvaluator)
• Color屬性估值器(ArgbEvaluator)

• 僅針對于屬性影片,View影片不需要型別估值器，是屬性影片實作非勻速影片的重要手段，

• 自定義插值器方法：實作 Interpolator / TimeInterpolator介面 ，然后復寫getInterpolation()
• 自定義估值器方法：實作TypeEvaluator介面，然后復寫evaluate()，

推薦一篇插值器估值器的詳細用法Android 影片：你真的會使用插值器與估值器嗎？（含詳細實體教學）

2.3 監聽器

      Animation.addListener(new AnimatorListener() {
          @Override
          public void onAnimationStart(Animation animation) {
              //影片開始時執行
          }
      
           @Override
          public void onAnimationRepeat(Animation animation) {
              //影片重復時執行
          }

         @Override
          public void onAnimationCancel()(Animation animation) {
              //影片取消時執行
          }
    
          @Override
          public void onAnimationEnd(Animation animation) {
              //影片結束時執行
          }
      });

// 特別注意：每次監聽必須4個方法都重寫，

Q:有些時候我們并不需要監聽影片的所有時刻,不想寫太多代碼怎么辦？

采用影片配接器（AnimatorListenerAdapter），

anim.addListener(new AnimatorListenerAdapter() {  
// 向addListener()方法中傳入配接器物件AnimatorListenerAdapter()
// 由于AnimatorListenerAdapter中已經實作好每個介面
// 所以這里不實作全部方法也不會報錯
    @Override  
    public void onAnimationStart(Animator animation) {  
    // 如想只想監聽影片開始時刻，就只需要單獨重寫該方法就可以
    }  
});  

三、總結

ObjectAnimator與 ValueAnimator類的區別：

• ValueAnimator 類是先改變值，然后 手動賦值 給物件的屬性從而實作影片；是 間接 對物件屬性進行操作；
• ObjectAnimator 類是先改變值，然后 自動賦值 給物件的屬性從而實作影片；是 直接 對物件屬性進行操作；

ValueAnimator類自動賦值的邏輯：

1. 初始化時，如果屬性的初始值沒有提供，則呼叫屬性的 get（）進行取值；
2. 當 值 變化時，用物件該屬性的 set（）方法，從而從而將新的屬性值設定給物件屬性，

• ObjectAnimator 類針對的是任意物件 & 任意屬性值，并不是單單針對于View物件
• 如果需要采用ObjectAnimator 類實作影片效果，那么需要操作的物件就必須有該屬性的set（） & get（）
• 同理，針對上述另外的三種基本影片效果，View 也存在著setRotation()、getRotation()、setTranslationX()、getTranslationX()、setScaleY()、getScaleY()等set（） & get（） ，

本文參考自：

• 《Android開發藝術探索》
• 《Android進階之光》
• Android影片：這是一份全面 & 詳細的影片使用攻略
• 進階之路 | 奇妙的Animation之旅