Android(Lollipop/5.0) Material Design(六) 自定義動畫

官網地址：https://developer.android.com/intl/zh-tw/training/material/animations.html

動畫在Material設計中，爲用戶與app交互反饋他們的動做行爲和提供了視覺上的連貫性。Material主題爲Buttons和Activity的過渡提供了一些默認的動畫。在android5.0(api21)及以上，贊成本身定義這些動畫：

· Touch feedback  觸摸反饋

· Circular Reveal  循環顯示

· Activity transitions  活動過渡

· Curved motion       曲線運動

· View state changes  視圖狀態變化

Customize Touch Feedback  本身定義觸摸反饋動畫

在Material設計中。觸摸反饋提供了一種在用戶與UI進行交互時 即時可視化的確認接觸點。關於buttons默認的觸摸反饋動畫。使用了RippleDrawable類。用一個波紋(漣漪)效果在兩種不一樣的狀態間過渡。

在多數狀況下，你需要在view的xml定義中，定義它的背景：

?

android:attr/selectableItemBackground                              有界限的波紋    

?android:attr/selectableItemBackgroundBorderless             延伸到view以外的波紋     note：該屬性爲api21加入

或者，你可以用xml定義一個RippleDrawable類型的資源，並使用波紋屬性。

你可以指定一個顏色給RippleDrawable對象，以改變它的默認觸摸反饋顏色，使用主題的android:colorControlHighlight屬性。

Use the Reveal Effect  使用展示效果

ViewAnimationUtils.createCircularReveal()方法使您能夠激活一個循環顯示或隱藏一個視圖。

顯示：

// previously invisible view
View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the final radius for the clipping circle
int finalRadius = myView.getWidth();

// create and start the animator for this view
// (the start radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
anim.start();

隱藏

// previously visible view
final View myView = findViewById(R.id.my_view);

// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;

// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();

// create the animation (the final radius is zero)
Animator anim =
    ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);

// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);
        myView.setVisibility(View.INVISIBLE);
    }
});

// start the animation
anim.start();

Customize Activity Transitions  定義Activity的過渡動畫

·一個enter transition表示。Activity的進入場景。比方一個explode enter transition，表示Views的進入場景：飛快的從外部向屏幕中心移動。

·一個exit transition表示，Activity的離開場景。比方一個explode exit transition，表示Views的離開場景：從屏幕中心散開。

·一個share transition表示，在兩個Activity間共享它們的activity transtion。

比方，兩個Activity有一個一樣的圖片，而位置和尺寸不一樣，使用changeImageTransform這個共享元素，能在Activity間平穩的轉換和縮放圖片。

android5.0(api21)及以上，支持這些效果的transition(過渡)：

爆炸——移動視圖或從場景中心。class Explode

滑行——移動視圖或從一個場景的邊緣。class Slide

淡入淡出——加入或從場景中刪除視圖經過改變其透明度。

class Fade

也支持這些共享元素(都有相應的class)轉換:
　　changeBounds ——View的佈局的邊界變化。
　　changeClipBounds——View的裁剪邊界變化。
　　changeTransform——View的旋轉、縮放邊界變化
　　changeImageTransform——目標圖像的尺寸和縮放變化。
　　當啓用活動在你的應用程序轉換,默認同一時候淡出淡入之間的過渡是激活進入和退出活動。

Specify custom transitions 本身定義過渡動畫

首先需要在定義主題的style中，使用android:windowContentTransitions屬性，聲明使用transitions。也可以定義使用的Transitions：

<?xmlversion="1.0"encoding="utf-8"?>

<resources>

    <stylename="MyTheme"parent="@android:style/Theme.Material">

        <!-- enable window content transitions -->

        <itemname="android:windowContentTransitions">true</item>

        <!-- specify enter and exit transitions -->

        <itemname="android:windowEnterTransition">@android:transition/explode</item>

        <itemname="android:windowExitTransition">@android:transition/explode</item>

        <!-- specify shared element transitions -->

        <itemname="android:windowSharedElementEnterTransition">@android:transition/move</item>

        <itemname="android:windowSharedElementExitTransition">@android:transition/slide_top</item>

    </style>

</resources>

注：每個transition的xml中定義的就是一組change的元素

在代碼中啓用transitions：

// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

// set an exit transition
getWindow().setExitTransition(new Explode());

在代碼中設置transitions的方法還有

• Window.setEnterTransition()
• Window.setExitTransition()
• Window.setSharedElementEnterTransition()
• Window.setSharedElementExitTransition()

要想盡快進行transitions過渡，可在Activity中調用Window.setAllowEnterTransitionOverlap()。

Start an activity using transitions 使用過渡啓動Activity

假設你要啓用transtions並設置爲一個Activity的結束exit transtion，當你以例如如下方式啓動還有一個Activity時。它將被激活：

startActivity(intent,
              ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

當你在還有一個Activity中設置了enter transtion。在其啓動時，它將被激活。想要disable transitions，那麼在啓動還有一個Activity時：

startActivity(intent,null);  //傳遞null 的options bundle

Start an activity with a shared element  使用一個共享元素啓動Acitvity

1.在主題中啓用window content 

2.在style中定義共享的過渡transitions

3.定義transitions的xml資源  res/transition

4.在layout中調用android:transitionName="" 設置第3步中定義的名字

5.調用 ActivityOptions.makeSceneTransitionAnimation()生成對應的ActivityOptions對象。

// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);

// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);

// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Intent intent = new Intent(this, Activity2.class);
        // create the transition animation - the images in the layouts
        // of both activities are defined with android:transitionName="robot"
        ActivityOptions options = ActivityOptions
            .makeSceneTransitionAnimation(this, androidRobotView, "robot");
        // start the new activity
        startActivity(intent, options.toBundle());
    }
});

在代碼中可以用View.setTransitionName()來設置過渡動畫

當你要關閉第二個Activity時，要反轉過渡動畫，那麼可以調用Activity.finishAfterTransition()方法,而不是Activity.finish()。

Start an activity with multiple shared elements  用多共享元素啓動Activity

若兩個Activity擁有不單單一個的共享元素，要在它們之間開始場景transition動畫，在它們的layout中都要使用 android:transitionName (或在Activity中代碼中調用View.setTransitionName() )來定義。並建立一個例如如下的 ActivityOptions 對象：

ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
        Pair.create(view1, "agreedName1"),
        Pair.create(view2, "agreedName2"));

Use Curved Motion 使用曲線運動

在Material設計中的動畫。依賴於曲線的時間插入值和空間運動模式。在android5.0(api21)及以上，可以本身定義動畫時間曲線和曲線運動模式。

PathInterpolator類是一個新的基於貝塞爾曲線或路徑對象的插入器。這個插入器指定了一個1 x1正方形運動曲線。它使用(0,0)爲錨點，(1,1)爲控制點，做爲構造函數的參數。

你也可以定義一個path interpolator的xml資源：

<pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
    android:controlX1="0.4"
    android:controlY1="0"
    android:controlX2="1"
    android:controlY2="1"/>

系統提供了三種主要的曲線，XML資源：

• @interpolator/fast_out_linear_in.xml
• @interpolator/fast_out_slow_in.xml
• @interpolator/linear_out_slow_in.xml

您可以用PathInterpolator對象做Animator.setInterpolator()方法的參數。

ObjectAnimator類有新構造函數使您能夠激活座標沿着一個path同一時候使用兩種或兩種以上的屬性。

比方。例如如下的animator就使用了一個path 對象。來同一時候操做View的x和y屬性：

ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();

Animate View State Changes  視圖狀態改變更畫

StateListAnimator類贊成您定義動畫執行時視圖的狀態變化。

如下的樣例演示怎樣在xml中定義一個StateListAnimator：

<!-- animate the translationZ property of a view when pressed -->
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_pressed="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="@android:integer/config_shortAnimTime"
        android:valueTo="2dp"
        android:valueType="floatType"/>
        <!-- you could have other objectAnimator elements
             here for "x" and "y", or other properties -->
    </set>
  </item>
  <item android:state_enabled="true"
    android:state_pressed="false"
    android:state_focused="true">
    <set>
      <objectAnimator android:propertyName="translationZ"
        android:duration="100"
        android:valueTo="0"
        android:valueType="floatType"/>
    </set>
  </item>
</selector>

在上例中，爲一個View加入視圖狀態動畫。定義了一個使用selector元素的xml資源。並賦給view的android:stateListAnimator屬性。如要在代碼中爲View指定視圖狀態動畫，可以使用AnimationInflater.loadStateListAnimator()載入xml資源。並使用View.setStateListAnimator()將其指定給View。

當你的主題繼承了Material主題。button默認擁有了z動畫。

爲了不這樣的行爲在你的button。設置android:stateListAnimator屬性值爲null。

AnimatedStateListDrawable類贊成您建立圖片以顯示關聯View的狀態改變更畫。一些系統的Widget。在5.0上默認使用這些動畫。

如下的樣例顯示了怎樣定義一個AnimatedStateListDrawable做爲XML資源:

<!-- res/drawable/myanimstatedrawable.xml -->
<animated-selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- provide a different drawable for each state-->
    <item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
        android:state_pressed="true"/>
    <item android:id="@+id/focused" android:drawable="@drawable/drawableF"
        android:state_focused="true"/>
    <item android:id="@id/default"
        android:drawable="@drawable/drawableD"/>

    <!-- specify a transition -->
    <transition android:fromId="@+id/default" android:toId="@+id/pressed">
        <animation-list>
            <item android:duration="15" android:drawable="@drawable/dt1"/>
            <item android:duration="15" android:drawable="@drawable/dt2"/>
            ...
        </animation-list>
    </transition>
    ...
</animated-selector>

Animate Vector Drawables  矢量圖片動畫

矢量圖片是可伸縮而不失真的。

AnimatedVectorDrawable類讓你能使一個矢量圖動起來。

一般在三種xml定義動態的矢量圖：

·使用<vector>元素的矢量圖，在res/drawable/

·一個動態矢量圖，使用<animated-vector>元素，在res/drawable/

·一個或多個object animator。使用<objectAnimator>元素。在res/animator/

矢量圖可以定義的屬性元素有<group>和<path>，<group>定義了一個<path>的集合，或者子<group>。<path>定義繪製的路徑。

定義矢量圖時。可以給<group>和<path>指定一個名字，示比例如如下：

<!-- res/drawable/vectordrawable.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="64dp"
    android:width="64dp"
    android:viewportHeight="600"
    android:viewportWidth="600">
    <group
        android:name="rotationGroup"
        android:pivotX="300.0"
        android:pivotY="300.0"
        android:rotation="45.0" >
        <path
            android:name="v"
            android:fillColor="#000000"
            android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
    </group>
</vector>

在矢量動畫中，引用矢量圖定義的名字：

<!-- res/drawable/animvectordrawable.xml -->
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
  android:drawable="@drawable/vectordrawable" >
    <target
        android:name="rotationGroup"
        android:animation="@anim/rotation" />
    <target
        android:name="v"
        android:animation="@anim/path_morph" />
</animated-vector>

下面樣例表明了一個 ObjectAnimator or AnimatorSet 對象：動做爲旋轉360度

<!-- res/anim/rotation.xml -->
<objectAnimator
    android:duration="6000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

如下的樣例表示矢量圖path從一個圖形到還有一個。兩種漸變路徑必須一致:他們必須具備一樣數量的命令和一樣數量的每個命令的參數：

<!-- res/anim/path_morph.xml -->
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
        android:duration="3000"
        android:propertyName="pathData"
        android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"
        android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"
        android:valueType="pathType" />
</set>

不少其它詳見：AnimatedVectorDrawable.