Android 基礎動畫之 scale 漸變縮放

      小菜最近在學習 ViewPager 的小動畫，說來慚愧，工作這麼久了一直沒有認真了解過動畫這部分，今天特意學習一下 Android 的基本動畫。

      Android 的基本的動畫包括 alpha（透明度）/ scale（縮放）/ translate（位移） / rotate（旋轉）四種，小菜今天學習一下 scale 漸變縮放動畫效果。

Activity 綁定動畫事件:

mBtn1.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        mV1.startAnimation(AnimationUtils.loadAnimation(AnimActivity.this, R.anim.anim_scale));
    }
});           

layout.xml 顯示動畫效果

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="開始動畫" />

  <View
      android:id="@+id/anim_v1"
      android:layout_width="300dp"
      android:layout_height="150dp"
      android:layout_gravity="center"
      android:background="@color/colorAccent" />
</LinearLayout>           

anim.xml 設定動畫屬性

<?xml version="1.0" encoding="utf-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3500"
    android:fromXScale="0.0"
    android:fromYScale="0.0"
    android:pivotX="100%p"
    android:pivotY="100%p"
    android:toXScale="1.0"
    android:toYScale="1.0" />           

代碼很簡單，小菜接下來逐條學習一下 anim_scale 中各條屬性：

1. android:duration="3500"

   duration 代表動畫過程中持續時常；

2. android:fromXScale="0.0"

   fromXScale 代表初始時橫向 View 比例，0.0為從沒有開始動畫，1.0即 View 原尺寸，2.0即 View 原尺寸兩倍；建議與 toXScale 共同使用；

3. android:fromYScale="0.0"

   fromYScale 為初始時縱向 View 比例，與 fromXScale 使用相同；

4. android:toXScale="1.0"

   toXScale 代表動畫過程中橫向變化尺寸比例，一般與 fromXScale 共同使用；

5. android:toYScale="1.0"

   toYScale 代表動畫過程中縱向變化尺寸比例，一般與 fromYScale 共同使用；

6. android:pivotX="100%p" android:pivotY="100%p"

   pivotX 和 pivotY 是小菜重點學習的地方，小菜了解為動畫起點坐标，可以為整數值、百分數（或者小數）、百分數p 三種樣式。

1. 整數值：android:pivotX="100"

   整數值類型是相對于自身 View 來定義，以自身 View 左上角的點為原點，水準向右為正，豎直向下為正的坐标系中計算，設定的整數值為 px，為固定值。

1. 百分數/小數：android:pivotX="100%"

   百分數/小數類型是相對于自身 View 來定義，與整數值類似，隻是坐标點是以自身 View 尺寸比例來計算而非固定值。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="開始動畫" />
  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content" >
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
      <View
          android:id="@+id/anim_v1"
          android:layout_width="300dp"
          android:layout_height="150dp"
          android:layout_gravity="center"
          android:background="@color/colorAccent" />
    </FrameLayout>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:layout_marginRight="150dp"
        android:background="@android:color/background_dark" />
  </FrameLayout>
</LinearLayout>           

1. 百分數 + p：

   這種方式是最特殊的，小菜了解為自身 View 與相對于某個父容器的大小，并非單純的根據父容器大小尺寸位置。小菜為了測試友善，設定了一個固定的 400dp*400dp 的 LinearLayout，測試百分數 + p 的方式都正常，但是如果設定 View 居中或其他情況時跟小菜想的很有差距，小菜測試了很久，終于有一些了解。

   百分比 + p 這種方式是相對的，既與父容器相關也與自身 View 相關，當設定 View 位置為居中或其他位置時，整個移動的坐标系也會變化，原點并非直接父容器左上角而是自身 View 左上角，整個移動布局根據 View 平移；而父容器是一個架構，動畫的範圍大小為父容器大小且隻在父容器中進行展示。如圖：

   小菜這才了解到剛開始測試時并未設定 LinearLayout 的 gravity 或自身 View 的 layout_gravity 屬性，預設是居左上角，此時與父容器左上角重合。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
  <Button
      android:id="@+id/anim_btn1"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_marginBottom="40dp"
      android:text="開始動畫" />
  <FrameLayout
      android:layout_width="wrap_content"
      android:layout_height="wrap_content" >
    <LinearLayout
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#8099cc00"
        android:layout_marginLeft="50dp"
        android:layout_marginTop="125dp"
        android:gravity="center"
        android:orientation="horizontal" />
    <LinearLayout
        android:layout_width="400dp"
        android:layout_height="400dp"
        android:background="#80008577"
        android:gravity="center"
        android:orientation="horizontal" >
      <View
          android:id="@+id/anim_v1"
          android:layout_width="300dp"
          android:layout_height="150dp"
          android:background="@color/colorAccent"
          android:gravity="center"
          android:text="Hello World!" />
    </LinearLayout>
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="248dp"
        android:layout_marginTop="123dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="48dp"
        android:layout_marginTop="323dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="248dp"
        android:layout_marginTop="323dp"
        android:background="@android:color/background_dark" />
    <View
        android:layout_width="4dp"
        android:layout_height="4dp"
        android:layout_marginLeft="448dp"
        android:layout_marginTop="523dp"
        android:background="@android:color/background_dark" />
  </FrameLayout>
</LinearLayout>           

7. android:interpolator="@android:anim/accelerate_decelerate_interpolator"

   interpolator 代表縮放動畫曲線，即動畫由大變小，變換速率等，小菜目前還未學習到，後期補充。

      小菜的動畫部分是短闆，正在從零學習，不對的請多多指正！