Material Design中全新的動(dòng)畫
Material Design中的動(dòng)畫將為用戶提供操作反饋并在用戶與您的應(yīng)用進(jìn)行互動(dòng)時(shí)提供視覺連續(xù)性。 Material Design將為按鈕與操作行為轉(zhuǎn)換提供一些默認(rèn)動(dòng)畫，而 Android 5.0(API Level 21)及更高版本可讓您定制這些動(dòng)畫，同時(shí)也可創(chuàng)建新動(dòng)畫：
一、觸摸反饋動(dòng)畫
效果圖：
Material Design的觸摸反饋可在用戶與 UI 元素互動(dòng)時(shí)，在接觸點(diǎn)上提供即時(shí)視覺確認(rèn)。 適用于按鈕的默認(rèn)觸摸動(dòng)畫使用全新 RippleDrawable類別，以波紋效果實(shí)現(xiàn)不同狀態(tài)間的轉(zhuǎn)換。
在大多數(shù)情況下，應(yīng)以下列方式指定視圖背景，在您的視圖 XML 中應(yīng)用此功能：
- android:attr/selectableItemBackground 指定有界的波紋。
- android:attr/selectableItemBackgroundBorderless 指定越過視圖邊界的波紋。 它將由一個(gè)非空背景的視圖的最近父項(xiàng)所繪制和設(shè)定邊界。
任何view處于可點(diǎn)擊狀態(tài)，都可以使用RippleDrawable來達(dá)到水波紋特效，而且必須處于可點(diǎn)擊狀態(tài)，才會(huì)出現(xiàn)波紋動(dòng)畫效果。
在代碼中可以這樣設(shè)置：
注意：selectableItemBackgroundBorderless是 API Level 21 中推出的新屬性。
此外，您可利用 ripple元素將 RippleDrawable定義為一個(gè) XML 資源。
您可以為 RippleDrawable對(duì)象指定一種顏色。如果要改變默認(rèn)觸摸反饋顏色，請(qǐng)使用主題的 android:colorControlHighlight屬性。
如果要了解更多信息，請(qǐng)參閱 RippleDrawable類別的 API 參考文檔。
我們來看看系統(tǒng)自帶的觸摸反饋動(dòng)畫是怎么實(shí)現(xiàn)的，為什么只需要在view的background或者foreground屬性設(shè)置成?android:attr/selectableItemBackground或者?android:attr/selectableItemBackgroundBorderless就可以實(shí)現(xiàn)波紋動(dòng)畫的效果?這兩個(gè)屬性點(diǎn)進(jìn)去，可以看到在路徑sdk/platforms/android-xx/data/res/values/attrs.xml文件中有定義這么兩個(gè)屬性：
- <!-- Background drawable for bordered standalone items that need focus/pressed states. -->
- <attr name="selectableItemBackground" format="reference" />
- <!-- Background drawable for borderless standalone items that need focus/pressed states. -->
- <attr name="selectableItemBackgroundBorderless" format="reference" />
我們想到，這兩個(gè)屬性既然是整個(gè)app中有效的，那可能會(huì)是在Theme中的屬性吧，那就去AndroidManifest文件中跟這個(gè)Theme一步步看下去，***在Base.V21.Theme.AppCompat.Light這個(gè)style中看到確實(shí)是有這兩個(gè)item屬性：
- <item name="selectableItemBackground">?android:attr/selectableItemBackground</item>
- <item name="selectableItemBackgroundBorderless">?android:attr/selectableItemBackgroundBorderless</item>
但是這里還是調(diào)用的系統(tǒng)的定義的屬性，繼續(xù)往下追，在android:Theme.Material和android:Theme.Material.Light中，可以看到：
- <item name="selectableItemBackground">@drawable/item_background_material</item>
- <item name="selectableItemBackgroundBorderless">@drawable/item_background_borderless_material</item>
然后sdk路徑下platforms\\android-xx\\data\\res\\drawable可以找到這些資源文件如下圖：
item_background_material的內(nèi)容是：
- <ripple xmlns:android="http://schemas.android.com/apk/res/android"
- android:color="?attr/colorControlHighlight">
- <item android:id="@id/mask">
- <color android:color="@color/white" />
- </item>
- </ripple>
item_background_borderless_material的內(nèi)容是：
- <ripple xmlns:android="http://schemas.android.com/apk/res/android"
- android:color="?attr/colorControlHighlight" />
系統(tǒng)的做法是用ripple元素將 RippleDrawable定義為一個(gè) XML 資源，而通過看View的源碼中在構(gòu)造方法中是這樣獲取background屬性的：
- public View(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
- this(context);
- final TypedArray a = context.obtainStyledAttributes(
- attrs, com.android.internal.R.styleable.View, defStyleAttr, defStyleRes);
- if (mDebugViewAttributes) {
- saveAttributeData(attrs, a);
- }
- Drawable background = null;
- switch (attr) {
- case com.android.internal.R.styleable.View_background:
- background = a.getDrawable(attr);
- break;
- .
- .
- .
- }
也就是說，這個(gè)background實(shí)際上就是RippleDrawable類。那我們就來看看這個(gè)RippleDrawable內(nèi)部到底是怎么做的吧。
首先官方文檔對(duì)RippleDrawable解釋是
Drawable that shows a ripple effect in response to state changes. The anchoring position of the ripple for a given state may be specified by calling setHotspot(float, float)with the corresponding state attribute identifier.
通過顯示出波紋效果來響應(yīng)狀態(tài)的改變，對(duì)于給定狀態(tài)的波紋的錨定位置可以通過調(diào)用具有對(duì)應(yīng)的狀態(tài)屬性標(biāo)識(shí)符的setHotspot(float，float)來指定。
RippleDrawable繼承自LayerDrawable，而LayerDrawable是繼承Drawable，RippleDrawable又是為了響應(yīng)View的statechange，那就看看Drawable類中對(duì)點(diǎn)擊時(shí)的狀態(tài)處理吧。
- public boolean setState(@NonNull final int[] stateSet) {
- if (!Arrays.equals(mStateSet, stateSet)) {
- mStateSet = stateSet;
- return onStateChange(stateSet);
- }
- return false;
- }
給Drawable設(shè)置狀態(tài)屬性時(shí)，會(huì)把狀態(tài)的數(shù)組傳給onStateChange方法，在RippleDrawable中重寫了onStateChange。
看到setRippleActive和setBackgroundActive這兩個(gè)方法應(yīng)該可以猜到是什么意思了，接著看。
- private void setRippleActive(boolean active) {
- if (mRippleActive != active) {
- mRippleActive = active;
- if (active) {
- tryRippleEnter();
- } else {
- tryRippleExit();
- }
- }
- }
如果Drawable是enable=true且pressd=true時(shí)，會(huì)調(diào)用tryRippleEnter方法
看到這里，我們可以知道要開始做波紋動(dòng)畫的效果了。mRipple 是RippleForeground類的實(shí)例，然而我沒有在RippleForeground類中找到setup和enter方法，但是RippleForeground繼承自RippleComponent類，于是，我在這個(gè)類中發(fā)現(xiàn)了這兩個(gè)方法。
- public final void setup(float maxRadius, int densityDpi) {
- if (maxRadius >= 0) {
- mHasMaxRadius = true;
- mTargetRadius = maxRadius;
- } else {
- mTargetRadius = getTargetRadius(mBounds);
- }
- mDensityScale = densityDpi * DisplayMetrics.DENSITY_DEFAULT_SCALE;
- onTargetRadiusChanged(mTargetRadius);
- }
setup是初始化一系列參數(shù)，enter創(chuàng)建一個(gè)動(dòng)畫并開始動(dòng)畫。
從上面創(chuàng)建動(dòng)畫的代碼可以看到，實(shí)際上是一個(gè)組合的屬性動(dòng)畫，然后自定義了三個(gè)屬性波紋半徑TWEEN_RADIUS、波紋中心點(diǎn)TWEEN_ORIGIN和波紋的不透明度OPACITY。通過這三個(gè)屬性的過渡變化得到一個(gè)復(fù)合的動(dòng)畫。以上就是前景波紋動(dòng)畫效果的實(shí)現(xiàn)過程。
- private void setBackgroundActive(boolean active, boolean focused) {
- if (mBackgroundActive != active) {
- mBackgroundActive = active;
- if (active) {
- tryBackgroundEnter(focused);
- } else {
- tryBackgroundExit();
- }
- }
- }
mBackground是RippleBackground類的實(shí)例，與RippleForeground不同的是，背景動(dòng)畫只是改變了不透明度。
- @Override
- protected Animator createSoftwareEnter(boolean fast) {
- // Linear enter based on current opacity.
- final int maxDuration = fast ? OPACITY_ENTER_DURATION_FAST : OPACITY_ENTER_DURATION;
- final int duration = (int) ((1 - mOpacity) * maxDuration);
- final ObjectAnimator opacity = ObjectAnimator.ofFloat(this, OPACITY, 1);
- opacity.setAutoCancel(true);
- opacity.setDuration(duration);
- opacity.setInterpolator(LINEAR_INTERPOLATOR);
- return opacity;
- }
以上分析的都是手指觸摸view時(shí)產(chǎn)生的enter波紋動(dòng)畫，當(dāng)手指抬起時(shí)state也會(huì)改變，會(huì)產(chǎn)生一個(gè)exit動(dòng)畫，這里就不詳細(xì)分析了。
二、使用揭露效果
效果圖：
當(dāng)需要顯示或隱藏一組UI元素時(shí)，揭露動(dòng)畫可為用戶提供視覺連續(xù)性。
- /* @param view The View will be clipped to the animating circle.要隱藏或顯示的view
- * @param centerX The x coordinate of the center of the animating circle, relative to <code>view</code>.動(dòng)畫開始的中心點(diǎn)X
- * @param centerY The y coordinate of the center of the animating circle, relative to <code>view</code>.動(dòng)畫開始的中心點(diǎn)Y
- * @param startRadius The starting radius of the animating circle.動(dòng)畫開始半徑
- * @param endRadius The ending radius of the animating circle.動(dòng)畫結(jié)束半徑
- */
- public static Animator createCircularReveal(View view,
- int centerX, int centerY, float startRadius, float endRadius) {
- return new RevealAnimator(view, centerX, centerY, startRadius, endRadius);
- }
RevealAnimator和之前的動(dòng)畫使用沒什么區(qū)別，同樣可以設(shè)置監(jiān)聽器和加速器來實(shí)現(xiàn)各種各樣的特效，該動(dòng)畫主要用在隱藏或者顯示一個(gè)view，改變view的大小等過渡效果。
顯示view：
- final TextView tv9 = (TextView) findViewById(R.id.tv9);
- findViewById(R.id.content_main).setOnClickListener(new View.OnClickListener() {
- @Override public void onClick(View v) {
- // get the center for the clipping circle
- int cx = (tv9.getRight() - tv9.getLeft()) / 2;
- int cy = (tv9.getBottom() - tv9.getTop()) / 2;
- // get the final radius for the clipping circle
- int finalRadius = Math.max(tv9.getWidth(), tv9.getHeight());
- // create the animator for this view (the start radius is zero)
- final Animator anim = ViewAnimationUtils.createCircularReveal(tv9, cx, cy, 0, finalRadius);
- tv9.setVisibility(View.VISIBLE);
- anim.start();
- }
- });
隱藏view：
- final TextView tv9 = (TextView) findViewById(R.id.tv9);
- tv9.setOnClickListener(new View.OnClickListener() {
- @Override public void onClick(View v) {
- // get the center for the clipping circle
- int cx = (tv9.getRight() - tv9.getLeft()) / 2;
- int cy = (tv9.getBottom() - tv9.getTop()) / 2;
- // get the final radius for the clipping circle
- int initRadius = Math.max(tv9.getWidth(), tv9.getHeight());
- // create the animator for this view (the start radius is zero)
- final Animator anim = ViewAnimationUtils.createCircularReveal(tv9, cx, cy, initRadius, 0);
- anim.addListener(new AnimatorListenerAdapter() {
- @Override public void onAnimationEnd(Animator animation) {
- super.onAnimationEnd(animation);
- // make the view visible and start the animation
- tv9.setVisibility(View.INVISIBLE);
- }
- });
- anim.start();
- }
- });
沿著中心縮?。?/p>
- Animator animator = ViewAnimationUtils.createCircularReveal(view, view.getWidth() / 2, view.getHeight() / 2, view.getWidth(), 0);
- animator.setInterpolator(new LinearInterpolator());
- animator.setDuration(1000);
- animator.start();
從左上角擴(kuò)展：
- Animator animator = ViewAnimationUtils.createCircularReveal(view,0,0,0,(float) Math.hypot(view.getWidth(), view.getHeight()));
- animator.setDuration(1000);
- animator.start();
三、使用轉(zhuǎn)場(chǎng)動(dòng)畫
效果圖以共享元素的轉(zhuǎn)場(chǎng)動(dòng)畫為例：
MaterialDesign應(yīng)用中的操作行為轉(zhuǎn)換透過通用元素之間的移動(dòng)和轉(zhuǎn)換提供不同狀態(tài)之間的視覺連接。可為進(jìn)入、退出轉(zhuǎn)換以及操作行為之間的共享元素轉(zhuǎn)換指定定制動(dòng)畫。在5.0之前，我們可以在startActivity之后調(diào)用overridePendingTransition來指定Activity的轉(zhuǎn)場(chǎng)動(dòng)畫。
- 進(jìn)入轉(zhuǎn)換將決定操作行為中視圖如何進(jìn)入場(chǎng)景。例如，在分解進(jìn)入轉(zhuǎn)換中，視圖將從屏幕外進(jìn)入場(chǎng)景并飛往屏幕中心。
- 退出轉(zhuǎn)換將決定操作行為中應(yīng)用行為的顯示視圖如何退出場(chǎng)景。例如，在分解退出轉(zhuǎn)換中，視圖將從屏幕中心退出場(chǎng)景。
- 共享元素轉(zhuǎn)換將決定兩個(gè)操作行為轉(zhuǎn)換之間共享的視圖如何在這些操作行為中轉(zhuǎn)換。 例如，如果兩個(gè)操作行為擁有相同的圖像，但其位置與大小不同，changeImageTransform共享元素轉(zhuǎn)換將在這些操作行為之間平滑地轉(zhuǎn)換與縮放圖像。
Android 5.0(API Level 21)支持這些進(jìn)入與退出轉(zhuǎn)換：(普通過渡動(dòng)畫)
- 分解 - 從場(chǎng)景中心移入或移出視圖。
- 滑動(dòng) - 從場(chǎng)景邊緣移入或移出視圖。
- 淡入淡出 - 通過調(diào)整透明度在場(chǎng)景中增添或移除視圖。
也支持這些共享元素轉(zhuǎn)換：(共享元素的過渡動(dòng)畫)
- changeBounds - 為目標(biāo)視圖的大小添加動(dòng)畫。
- changeClipBounds - 為目標(biāo)視圖的裁剪大小添加動(dòng)畫。
- changeTransform - 為目標(biāo)視圖的縮放、旋轉(zhuǎn)和位移添加動(dòng)畫。
- changeImageTransform - 為目標(biāo)圖片的縮放、旋轉(zhuǎn)和位移添加動(dòng)畫。
指定轉(zhuǎn)場(chǎng)動(dòng)畫
要想使用新的轉(zhuǎn)場(chǎng)動(dòng)畫，可以繼承Material Design主題后在style風(fēng)格中指定：
其中，change_image_transform定義如下：
- <!-- res/transition/change_image_transform.xml -->
- <!-- (see also Shared Transitions below) -->
- <transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
- <changeImageTransform/>
- </transitionSet>
如果要帶代碼中開啟窗口內(nèi)容轉(zhuǎn)換，需要調(diào)用Window.requestFeature()方法。
普通轉(zhuǎn)場(chǎng)動(dòng)畫：
所有繼承自visibility類都可以作為進(jìn)入、退出的過度動(dòng)畫。如果我們想自定義進(jìn)入和退出時(shí)的動(dòng)畫效果，只需要繼承Visibility，重載onAppear和onDisappear方法來定義進(jìn)入喝退出的動(dòng)畫。系統(tǒng)提供了三種默認(rèn)方式：
- explode 從屏幕中心移入或移出視圖
- slide 從屏幕邊緣移入或移出視圖
- fade 改變視圖的透明度
想在xml中指定自定義的進(jìn)入、退出的過度動(dòng)畫需要先對(duì)動(dòng)畫進(jìn)行定義：
- <transition class="my.app.transition.CustomTransition"/>
注意：其中CustomTransition是我們自定義的動(dòng)畫，它必須繼承自Visibility。
想以普通轉(zhuǎn)場(chǎng)動(dòng)畫的方式啟動(dòng)一個(gè)Activity，必須在startActivity函數(shù)中傳遞一個(gè)ActivityOptions的Bundle對(duì)象：
- ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(activity);
- startActivity(intent, options.toBundle());
如果想讓返回也具備轉(zhuǎn)場(chǎng)效果，那么在返回的Activity中不要再調(diào)用finish函數(shù)，而是應(yīng)該使finishAfterTransition來結(jié)束一個(gè)Activity，該函數(shù)會(huì)等待動(dòng)畫執(zhí)行完畢才結(jié)束該Activity。
共享轉(zhuǎn)場(chǎng)動(dòng)畫：
如果要在兩個(gè)具有共享元素的Activity之間使用轉(zhuǎn)場(chǎng)動(dòng)畫，那么：
1、在題中啟用窗口內(nèi)容轉(zhuǎn)換。android:windowContentTransitions
2、在Theme中指定一個(gè)共享元素轉(zhuǎn)換。
3、將transitions定義為xml資源。
4、利用 android:transitionName屬性對(duì)兩個(gè)布局中的共享元素指定一個(gè)通用名稱。
5、使用 ActivityOptions.makeSceneTransitionAnimation()方法。
- // 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，那么需要調(diào)用View.setTransitionName()方法對(duì)兩個(gè)布局中的共享元素指定一個(gè)通用名稱。
如果有多個(gè)共享元素，則可以通過Pair進(jìn)行包裝處理：
- ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(activity,
- Pair.create(view1, "name1"),//這里view1、view2如果是TextView或者ImageView等，需要轉(zhuǎn)成View類型才可以
- Pair.create(view2, "name2"));
- startActivity(intent,.toBundle());
返回時(shí)如果需要具備轉(zhuǎn)場(chǎng)動(dòng)畫，那么也需要用finish函數(shù)替代finishAfterTransition來結(jié)束一個(gè)Activity。
使用曲線運(yùn)動(dòng)
因?yàn)榍€運(yùn)動(dòng)和屬性動(dòng)畫以及貝塞爾曲線這些東西混雜在一起，所以準(zhǔn)備把這節(jié)拿出來單獨(dú)寫。這里就不多說了。
視圖狀態(tài)改變
Android 5.0在原有的圖片選擇器和顏色選擇器上進(jìn)行了增強(qiáng)，不僅是控件能根據(jù)不同的狀態(tài)顯示不同的背景圖片，還能在兩種狀態(tài)切換時(shí)指定一個(gè)動(dòng)畫，來增加過渡效果，吸引用戶眼球，以突出重點(diǎn)內(nèi)容。
StateListAnimator類和圖片選擇器，顏色選擇器類似，可以根據(jù)view的狀態(tài)改變呈現(xiàn)不同的動(dòng)畫效果，通過xml我們可以構(gòu)建對(duì)應(yīng)不同狀態(tài)的動(dòng)畫合集，其使用方式也非常簡(jiǎn)單，在對(duì)應(yīng)的狀態(tài)指定一個(gè)屬性動(dòng)畫即可：
- <selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:state_pressed="true">
- <set>
- <objectAnimator android:propertyName="translationZ"
- android:duration="200"
- android:valueTo="20dp"
- android:valueType="floatType"/>
- </set>
- </item>
- <item android:state_enabled="true" android:state_pressed="false">
- <set>
- <objectAnimator android:propertyName="translationZ"
- android:duration="200"
- android:valueTo="0"
- android:valueType="floatType"/>
- </set>
- </item>
- </selector>
代碼中這樣加載即可：
- TextView tv11 = (TextView) findViewById(R.id.tv11);
- StateListAnimator stateLAnim = AnimatorInflater.loadStateListAnimator(this,R.drawable.selector_for_button);
- tv11.setStateListAnimator(stateLAnim);
繼承了Material主題后，按鈕默認(rèn)擁有了z屬性動(dòng)畫。如果想取消這種默認(rèn)狀態(tài)，可以把狀態(tài)動(dòng)畫指定為null。
除了StateListAnimator類指定狀態(tài)切換的屬性動(dòng)畫外，還可以通過AnimatedStateListDrawable來指定狀態(tài)切換的幀動(dòng)畫：
- <animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
- <item android:id="@+id/pressed" android:drawable="@drawable/btn_check_15" android:state_pressed="true"/>
- <item android:id="@+id/normal" android:drawable="@drawable/btn_check_0"/>
- <transition android:fromId="@+id/normal" android:toId="@+id/pressed">
- <animation-list>
- <item android:duration="20" android:drawable="@drawable/btn_check_0"/>
- <item android:duration="20" android:drawable="@drawable/btn_check_1"/>
- <item android:duration="20" android:drawable="@drawable/btn_check_2"/>
- </animation-list>
- </transition>
- </animated-selector>
幀動(dòng)畫的資源文件直接在xml中作為view的background即可。
四、矢量圖動(dòng)畫
效果圖:
先在drawable中定義一張矢量圖：
- <?xml version="1.0" encoding="utf-8"?>
- <vector xmlns:android="http://schemas.android.com/apk/res/android"
- android:height="200dp"
- android:width="200dp"
- android:viewportHeight="400"
- android:viewportWidth="400">
- <group
- android:name="rotationGroup"
- android:pivotX="0"
- android:pivotY="0">
- <path
- android:name="star"
- android:pathData="M 100,100 h 200 l -200 150 100 -250 100 250 z"
- android:strokeColor="@color/colorPrimary"
- android:strokeLineCap="round"
- android:strokeWidth="10"/>
- </group>
- </vector>
然后在anim中定義動(dòng)畫：
- <?xml version="1.0" encoding="utf-8"?>
- <set xmlns:android="http://schemas.android.com/apk/res/android">
- <objectAnimator
- android:propertyName="trimPathStart"
- android:valueFrom="0"
- android:valueTo="1"
- android:valueType="floatType"
- android:duration="2000"
- android:repeatMode="reverse"
- android:repeatCount="-1"
- android:interpolator="@android:interpolator/accelerate_decelerate"/>
- </set>
***在drawable中定義一個(gè)animated-vector：將動(dòng)畫資源指定給drawable屬性值的矢量圖。
- <?xml version="1.0" encoding="utf-8"?><animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
- android:drawable="@drawable/vector_drawable">
- <target
- android:name="star"
- android:animation="@anim/animation"/></animated-vector>
注意：這里drawable屬性值是前面我們定義的矢量圖，target中name要和矢量圖中path的name一樣，animation就是前面定義的動(dòng)畫資源文件。
在view的xml中使用以及在代碼中開始動(dòng)畫：
- <ImageView
- android:id="@+id/iv"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_margin="20dp"
- app:srcCompat="@drawable/anim_vector_drawable"
- android:layout_gravity="center"/>
- ImageView iv = (ImageView) findViewById(R.id.iv);
- Drawable drawable = iv.getDrawable();
- if (drawable instanceof Animatable) {
- ((Animatable) drawable).start();
- }
