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

 

動畫在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的過渡動畫

 

支持這些效果的過渡:

突然出現——移動視圖或從場景中心。class Explode

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

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

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

 

Specify custom transitions 自定義過渡動畫

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

 

 

true

@android:transition/explode

@android:transition/explode

@android:transition/move

@android:transition/slide_top

 

 

註:每個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

    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

     

     

    Use Curved Motion

     

     

     

     

    Animate View State Changes

     

     

     

     

     

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。