Android(Lollipop/5.0) Material Design(六) 自定義動畫
來源:程序員人生 發布時間:2014-11-18 08:34:20 閱讀次數:4422次
官網地址:https://developer.android.com/intl/zh-tw/training/material/animations.html
動畫在Material設計中,為用戶與app交互反饋他們的動作行動和提供了視覺上的聯貫性。Material主題為Buttons和Activity的過渡提供了1些默許的動畫,在android5.0(api21)及以上,允許自定義這些動畫:
? Touch feedback 觸摸反饋
? Circular Reveal 循環顯示
? Activity transitions 活動過渡
? Curved motion 曲線運動
? View state changes 視圖狀態變化
Customize Touch Feedback 自定義觸摸反饋動畫
在Material設計中,觸摸反饋提供了1種在用戶與UI進行交互時 即時可視化的確認接觸點。關于buttons默許的觸摸反饋動畫,使用了RippleDrawable類,用1個波紋(漣漪)效果在兩種不同的狀態間過渡。
在多數情況下,你需要在view的xml定義中,定義它的背景:
?android:attr/selectableItemBackground 有界限的波紋
?android:attr/selectableItemBackgroundBorderless 延伸到view以外的波紋 note:該屬性為api21添加
或,你可以用xml定義1個RippleDrawable類型的資源,并使用波紋屬性。
你可以指定1個色彩給RippleDrawable對象,以改變它的默許觸摸反饋色彩,使用主題的android:colorControlHighlight屬性。
Use the Reveal Effect 使用展現效果
ViewAnimationUtils.createCircularReveal()方法使您能夠激活1個循環顯示或隱藏1個視圖。
顯示:
// 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的過渡動畫
?1個enter transition表示,Activity的進入場景。比如1個explode enter transition,表示Views的進入場景:飛快的從外部向屏幕中心移動。
?1個exit transition表示,Activity的離開場景。比如1個explode exit transition,表示Views的離開場景:從屏幕中心散開。
?1個share transition表示,在兩個Activity間同享它們的activity transtion。比如,兩個Activity有1個相同的圖片,而位置和尺寸不同,使用changeImageTransform這個同享元素,能在Activity間安穩的轉換和縮放圖片。
android5.0(api21)及以上,支持這些效果的transition(過渡):
爆炸――移動視圖或從場景中心。class Explode
滑行――移動視圖或從1個場景的邊沿。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⑻"?>
<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中定義的就是1組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并設置為1個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 使用1個同享元素啟動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");
&n
生活不易,碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
------分隔線----------------------------
------分隔線----------------------------