詳解Android Material Design自定義動畫的編寫
新的動畫Api,讓你在UI控件里能創(chuàng)建觸摸反饋,改變View的狀態(tài),切換activity的一系列自定義動畫
具體有:
- 響應View的touch事件的觸摸反饋動畫
- 隱藏和顯示View的循環(huán)展示動畫
- 兩個Activity間的切換動畫
- 更自然的曲線運動的動畫
- 使用View的狀態(tài)更改動畫,能改變一個或多個View的屬性
- 在View的狀態(tài)更改時顯示狀態(tài)列表動畫
這些new animations Api,已內置在標準Widget中,如Button。在自定義view時也可使用這些api

動畫在Material設計中,為用戶與app交互反饋他們的動作行為和提供了視覺上的連貫性。Material主題為Buttons和Activity的過渡提供了一些默認的動畫,在android5.0(api21)及以上,允許自定義這些動畫:
- Touch feedback 觸摸反饋
- Circular Reveal 循環(huán)顯示
- Activity transitions 活動過渡
- Curved motion 曲線運動
- View state changes 視圖狀態(tài)變化
- Customize Touch Feedback 自定義觸摸反饋動畫
在Material設計中,觸摸反饋提供了一種在用戶與UI進行交互時 即時可視化的確認接觸點。關于buttons默認的觸摸反饋動畫,使用了RippleDrawable類,用一個波紋(漣漪)效果在兩種不同的狀態(tài)間過渡。
在多數(shù)情況下,你需要在view的xml定義中,定義它的背景:
- android:attr/selectableItemBackground 有界限的波紋
- android:attr/selectableItemBackgroundBorderless 延伸到view之外的波紋 note:該屬性為api21添加
或者,你可以用xml定義一個RippleDrawable類型的資源,并使用波紋屬性。
你可以指定一個顏色給RippleDrawable對象,以改變它的默認觸摸反饋顏色,使用主題的android:colorControlHighlight屬性。
Use the Reveal Effect 使用展現(xiàn)效果
ViewAnimationUtils.createCircularReveal()方法使您能夠激活一個循環(huán)顯示或隱藏一個視圖。
顯示:
// 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間平穩(wěn)的轉換和縮放圖片。
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:
<?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>
注:每個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() )來定義,并創(chuàng)建一個如下的 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)為控制點,作為構造函數(shù)的參數(shù)。你也可以定義一個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對象作Animator.setInterpolator()方法的參數(shù)。
ObjectAnimator類有新構造函數(shù)使您能夠激活坐標沿著一個path同時使用兩種或兩種以上的屬性。比如,如下的animator就使用了一個path 對象,來同時操作View的x和y屬性:
ObjectAnimator mAnimator; mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path); ... mAnimator.start();
Animate View State Changes 視圖狀態(tài)改變動畫
StateListAnimator類允許您定義動畫運行時視圖的狀態(tài)變化。下面的例子演示如何在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添加視圖狀態(tài)動畫,定義了一個使用selector元素的xml資源,并賦給view的android:stateListAnimator屬性。如要在代碼中為View指定視圖狀態(tài)動畫,可使用AnimationInflater.loadStateListAnimator()加載xml資源,并使用View.setStateListAnimator()將其指定給View。
當你的主題繼承了Material主題,按鈕默認擁有了z動畫。為了避免這種行為在你的按鈕,設置android:stateListAnimator屬性值為null。
AnimatedStateListDrawable類允許您創(chuàng)建圖片以顯示關聯(lián)View的狀態(tài)改變動畫。一些系統(tǒng)的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定義動態(tài)的矢量圖:
- 使用<vector>元素的矢量圖,在res/drawable/
- 一個動態(tài)矢量圖,使用<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從一個圖形到另一個。兩種漸變路徑必須一致:他們必須具有相同數(shù)量的命令和相同數(shù)量的每個命令的參數(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>
相關文章
Android Studio 4.0新特性及升級異常問題的解決方案
這篇文章主要介紹了Android Studio 4.0新特性及升級異常的相關問題,本文給大家分享解決方案,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
Android關于SeekBar無法點擊到最大值問題解決方法記錄(推薦)
這篇文章主要介紹了Android關于SeekBar無法點擊到最大值問題解決方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Android實現(xiàn)Reveal圓形Activity轉場動畫的完整步驟
這篇文章主要給大家介紹了關于Android Reveal圓形Activity轉場動畫的實現(xiàn)過程,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
利用Jetpack Compose實現(xiàn)經典俄羅斯方塊游戲
你的童年是否有俄羅斯方塊呢,本文就來介紹如何通過Jetpack Compose實現(xiàn)一個俄羅斯方塊!感興趣的小伙伴快跟隨小編一起動手嘗試一下吧2022-05-05

