詳解Android Material Design自定義動(dòng)畫(huà)的編寫(xiě)

更新時(shí)間：2016年04月07日 14:57:48 作者：匆忙擁擠repeat

這篇文章主要介紹了詳解Android Material Design自定義動(dòng)畫(huà)的編寫(xiě),其中對(duì)Activity的過(guò)渡動(dòng)畫(huà)進(jìn)行了重點(diǎn)講解,需要的朋友可以參考下

新的動(dòng)畫(huà)Api，讓你在UI控件里能創(chuàng)建觸摸反饋，改變View的狀態(tài)，切換activity的一系列自定義動(dòng)畫(huà)
具體有：

響應(yīng)View的touch事件的觸摸反饋動(dòng)畫(huà)
隱藏和顯示View的循環(huán)展示動(dòng)畫(huà)
兩個(gè)Activity間的切換動(dòng)畫(huà)
更自然的曲線運(yùn)動(dòng)的動(dòng)畫(huà)
使用View的狀態(tài)更改動(dòng)畫(huà)，能改變一個(gè)或多個(gè)View的屬性
在View的狀態(tài)更改時(shí)顯示狀態(tài)列表動(dòng)畫(huà)

這些new animations Api，已內(nèi)置在標(biāo)準(zhǔn)Widget中，如Button。在自定義view時(shí)也可使用這些api

201647145144001.gif (252×480)

動(dòng)畫(huà)在Material設(shè)計(jì)中，為用戶與app交互反饋他們的動(dòng)作行為和提供了視覺(jué)上的連貫性。Material主題為Buttons和Activity的過(guò)渡提供了一些默認(rèn)的動(dòng)畫(huà)，在android5.0(api21)及以上，允許自定義這些動(dòng)畫(huà)：

Touch feedback 觸摸反饋
Circular Reveal 循環(huán)顯示
Activity transitions 活動(dòng)過(guò)渡
Curved motion 曲線運(yùn)動(dòng)
View state changes 視圖狀態(tài)變化
Customize Touch Feedback 自定義觸摸反饋動(dòng)畫(huà)

在Material設(shè)計(jì)中，觸摸反饋提供了一種在用戶與UI進(jìn)行交互時(shí) 即時(shí)可視化的確認(rèn)接觸點(diǎn)。關(guān)于buttons默認(rèn)的觸摸反饋動(dòng)畫(huà)，使用了RippleDrawable類(lèi)，用一個(gè)波紋(漣漪)效果在兩種不同的狀態(tài)間過(guò)渡。

在多數(shù)情況下，你需要在view的xml定義中，定義它的背景：

android:attr/selectableItemBackground 有界限的波紋
android:attr/selectableItemBackgroundBorderless 延伸到view之外的波紋 note：該屬性為api21添加

或者，你可以用xml定義一個(gè)RippleDrawable類(lèi)型的資源，并使用波紋屬性。

你可以指定一個(gè)顏色給RippleDrawable對(duì)象，以改變它的默認(rèn)觸摸反饋顏色，使用主題的android:colorControlHighlight屬性。
Use the Reveal Effect 使用展現(xiàn)效果
ViewAnimationUtils.createCircularReveal()方法使您能夠激活一個(gè)循環(huán)顯示或隱藏一個(gè)視圖。
顯示：

// 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的過(guò)渡動(dòng)畫(huà)

一個(gè)enter transition表示，Activity的進(jìn)入場(chǎng)景。比如一個(gè)explode enter transition，表示Views的進(jìn)入場(chǎng)景：飛快的從外部向屏幕中心移動(dòng)。
一個(gè)exit transition表示，Activity的離開(kāi)場(chǎng)景。比如一個(gè)explode exit transition，表示Views的離開(kāi)場(chǎng)景：從屏幕中心散開(kāi)。
一個(gè)share transition表示，在兩個(gè)Activity間共享它們的activity transtion。比如，兩個(gè)Activity有一個(gè)相同的圖片，而位置和尺寸不同，使用changeImageTransform這個(gè)共享元素，能在Activity間平穩(wěn)的轉(zhuǎn)換和縮放圖片。

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

爆炸——移動(dòng)視圖或從場(chǎng)景中心。class Explode
滑行——移動(dòng)視圖或從一個(gè)場(chǎng)景的邊緣。class Slide
淡入淡出——添加或從場(chǎng)景中刪除視圖通過(guò)改變其透明度。 class Fade

也支持這些共享元素(都有對(duì)應(yīng)的class)轉(zhuǎn)換:

　　changeBounds ——View的布局的邊界變化。
　　changeClipBounds——View的裁剪邊界變化。
　　changeTransform——View的旋轉(zhuǎn)、縮放邊界變化
　　changeImageTransform——目標(biāo)圖像的尺寸和縮放變化。

　　當(dāng)啟用活動(dòng)在你的應(yīng)用程序轉(zhuǎn)換,默認(rèn)同時(shí)淡出淡入之間的過(guò)渡是激活進(jìn)入和退出活動(dòng)。

Specify custom transitions 自定義過(guò)渡動(dòng)畫(huà)
首先需要在定義主題的style中，使用android:windowContentTransitions屬性，聲明使用transitions。也可以定義使用的Transitions：

<?xml version="1.0" encoding="utf-8"?> 
<resources> 
  <style name="MyTheme" parent="@android:style/Theme.Material"> 
    <!-- enable window content transitions --> 
    <item name="android:windowContentTransitions">true</item> 
    <!-- specify enter and exit transitions --> 
    <item name="android:windowEnterTransition">@android:transition/explode</item> 
    <item name="android:windowExitTransition">@android:transition/explode</item> 
    <!-- specify shared element transitions --> 
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item> 
    <item name="android:windowSharedElementExitTransition">@android:transition/slide_top</item> 
  </style> 
</resources>

注：每個(gè)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());
在代碼中設(shè)置transitions的方法還有
Window.setEnterTransition()
Window.setExitTransition()
Window.setSharedElementEnterTransition()
Window.setSharedElementExitTransition()

要想盡快進(jìn)行transitions過(guò)渡，可在Activity中調(diào)用Window.setAllowEnterTransitionOverlap()。
Start an activity using transitions 使用過(guò)渡啟動(dòng)Activity
如果你要啟用transtions并設(shè)置為一個(gè)Activity的結(jié)束exit transtion，當(dāng)你以如下方式啟動(dòng)另一個(gè)Activity時(shí)，它將被激活：

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

當(dāng)你在另一個(gè)Activity中設(shè)置了enter transtion，在其啟動(dòng)時(shí)，它將被激活。想要disable transitions，那么在啟動(dòng)另一個(gè)Activity時(shí)：

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

Start an activity with a shared element 使用一個(gè)共享元素啟動(dòng)Acitvity

1.在主題中啟用window content
2.在style中定義共享的過(guò)渡transitions
3.定義transitions的xml資源 res/transition
4.在layout中調(diào)用android:transitionName="" 設(shè)置第3步中定義的名字
5.調(diào)用 ActivityOptions.makeSceneTransitionAnimation()生成相應(yīng)的ActivityOptions對(duì)象。

// 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()來(lái)設(shè)置過(guò)渡動(dòng)畫(huà)
當(dāng)你要關(guān)閉第二個(gè)Activity時(shí)，要反轉(zhuǎn)過(guò)渡動(dòng)畫(huà)，那么可以調(diào)用Activity.finishAfterTransition()方法,而不是Activity.finish()。
Start an activity with multiple shared elements 用多共享元素啟動(dòng)Activity
若兩個(gè)Activity擁有不只一個(gè)的共享元素，要在它們之間開(kāi)始場(chǎng)景transition動(dòng)畫(huà)，在它們的layout中都要使用 android:transitionName (或在Activity中代碼中調(diào)用View.setTransitionName() )來(lái)定義，并創(chuàng)建一個(gè)如下的 ActivityOptions 對(duì)象：

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

Use Curved Motion 使用曲線運(yùn)動(dòng)
在Material設(shè)計(jì)中的動(dòng)畫(huà)，依賴(lài)于曲線的時(shí)間插入值和空間運(yùn)動(dòng)模式。在android5.0(api21)及以上，可以自定義動(dòng)畫(huà)時(shí)間曲線和曲線運(yùn)動(dòng)模式。

PathInterpolator類(lèi)是一個(gè)新的基于貝塞爾曲線或路徑對(duì)象的插入器。這個(gè)插入器指定了一個(gè)1 x1正方形運(yùn)動(dòng)曲線，它使用(0,0)為錨點(diǎn)，(1,1)為控制點(diǎn)，作為構(gòu)造函數(shù)的參數(shù)。你也可以定義一個(gè)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"/>

系統(tǒng)提供了三種基本的曲線，XML資源：

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

您可以用PathInterpolator對(duì)象作Animator.setInterpolator()方法的參數(shù)。

ObjectAnimator類(lèi)有新構(gòu)造函數(shù)使您能夠激活坐標(biāo)沿著一個(gè)path同時(shí)使用兩種或兩種以上的屬性。比如，如下的animator就使用了一個(gè)path 對(duì)象，來(lái)同時(shí)操作View的x和y屬性：

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

Animate View State Changes 視圖狀態(tài)改變動(dòng)畫(huà)

StateListAnimator類(lèi)允許您定義動(dòng)畫(huà)運(yùn)行時(shí)視圖的狀態(tài)變化。下面的例子演示如何在xml中定義一個(gè)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>

在上例中，為一個(gè)View添加視圖狀態(tài)動(dòng)畫(huà)，定義了一個(gè)使用selector元素的xml資源，并賦給view的android:stateListAnimator屬性。如要在代碼中為View指定視圖狀態(tài)動(dòng)畫(huà)，可使用AnimationInflater.loadStateListAnimator()加載xml資源，并使用View.setStateListAnimator()將其指定給View。
當(dāng)你的主題繼承了Material主題，按鈕默認(rèn)擁有了z動(dòng)畫(huà)。為了避免這種行為在你的按鈕，設(shè)置android:stateListAnimator屬性值為null。
AnimatedStateListDrawable類(lèi)允許您創(chuàng)建圖片以顯示關(guān)聯(lián)View的狀態(tài)改變動(dòng)畫(huà)。一些系統(tǒng)的Widget，在5.0上默認(rèn)使用這些動(dòng)畫(huà)。下面的例子顯示了如何定義一個(gè)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 矢量圖片動(dòng)畫(huà)
矢量圖片是可伸縮而不失真的。AnimatedVectorDrawable類(lèi)讓你能使一個(gè)矢量圖動(dòng)起來(lái)。
通常在三種xml定義動(dòng)態(tài)的矢量圖：

使用<vector>元素的矢量圖，在res/drawable/
一個(gè)動(dòng)態(tài)矢量圖，使用<animated-vector>元素，在res/drawable/
一個(gè)或多個(gè)object animator，使用<objectAnimator>元素，在res/animator/

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

定義矢量圖時(shí)，可以給<group>和<path>指定一個(gè)名字，示例如下：

<!-- 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>

在矢量動(dòng)畫(huà)中，引用矢量圖定義的名字：

<!-- 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>

以下例子代表了一個(gè) ObjectAnimator or AnimatorSet 對(duì)象：動(dòng)作為旋轉(zhuǎn)360度

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

下面的例子表示矢量圖path從一個(gè)圖形到另一個(gè)。兩種漸變路徑必須一致:他們必須具有相同數(shù)量的命令和相同數(shù)量的每個(gè)命令的參數(shù)：

<!-- 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>

您可能感興趣的文章: