1. 程式人生 > >Android Material Design(一)動畫篇

Android Material Design(一)動畫篇

揭露動畫

效果:

簡介:

背景擴散從某一個點向四周展開或者從四周向某一點聚合起來,類似波紋的效果,可以給任意的View新增這種效果。 顯示或隱藏一組 UI 元素時,揭露動畫可為使用者提供視覺連續性;

使用:

Android Sdk 中已經幫我們提供了一個工具類 ViewAnimationUtils 來建立揭露動畫。ViewAnimationUtils 裡面只有一個靜態方法 createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius), 返回一個 Animator 動畫物件。


//第一個引數是執行揭露動畫的 View 檢視
//第二個引數是相對於檢視 View 的座標系,動畫圓的中心的x座標
//第三個引數是相對於檢視 View 的座標系,動畫圓的中心的y座標
//第四個引數是動畫圓的起始半徑,
//第五個引數動畫圓的結束半徑。
ViewAnimationUtils.createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius);
mButton.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        final int width = mImageView.getMeasuredWidth();
        final int height = mImageView.getMeasuredHeight();
        final float radius = (float) Math.sqrt(width * width + height * height);
        //主要程式碼
        Animator animator = ViewAnimationUtils.createCircularReveal(mImageView, width , height , radius, 0);
        animator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                  //mImageView.setVisibility(View.GONE);
            }
        });
        animator.setDuration(2000);
        animator.start();
    }
});

過度動畫

Android5.0之前在頁面進行跳轉的時候使用overPendingtransition(int inId,int outId)方法來給Activity增加一些簡單切換動畫效果

Intent intent =newIntent(MainActivity.this, SecondActivity.class); 
startActivity(intent); 
//轉場動畫,必須位於startActivity之後
overridePendingTransition(R.anim.slide_in_left, R.anim.slide_in_left);

Android 5.0之後,Google對動畫效果進行了更深一步的詮釋,為Activity的轉場效果設計了更加豐富的動畫效果。

進入和退出的效果包括

  • explode(分解) ———從螢幕中間進或出,移動檢視。

  • slide(滑動)———從螢幕邊緣進或出,移動檢視。

  • fade(淡出)———通過改變螢幕上檢視的不透明度達到新增或移除的效果。

 

  1. 這三種方式需要在設定動畫的頁面上設定如下所示程式碼:
    // 允許使用transitions
    getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
  2. 設定進入Activty或退出Activty的動畫
    //分解
    getWindow().setEnterTransition(new Explode());
    getWindow().setExitTransition(new Explode());
    //滑動
    getWindow().setEnterTransition(new Slide());
    getWindow().setExitTransition(new Slide());
    //淡出
    getWindow().setEnterTransition(new Fade());
    getWindow().setExitTransition(new Fade());
    
    getWindow().setEnterTransition(); //首次進入顯示的動畫
    getWindow().setExitTransition(); //啟動一個新Activity,當前頁的退出動畫
    getWindow().setReturnTransition(); //呼叫 finishAfterTransition() 退出時,當前頁退出的動畫
    getWindow().setReenterTransition(); //重新進入的動畫。即第二次進入,可以和首次進入不一樣。
    
  3. 需要將Activity跳轉的程式碼startActivity(intent)的方法改為
    startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

共享元素包括:

  • changeBounds———改變目標檢視的佈局邊界

  • changeClipBounds———裁切目標檢視邊界

  • changeTransform———改變目標檢視的縮放比例和旋轉角度

  • changeImageTransfrom———改變目標圖片的大小和縮放比例

 

從一個Activity A轉換到Activity B,而且他們共享一個元素(比如是一個view),在這種場景下,最好的使用者體驗可能就是將共享的元素直接變換到最終的地方和大小,這會使使用者專注於應用而且有一種連貫性的表達。

共享元素的連線點是所有共享元素View的transition name。通過transtion name來判斷哪兩個元素是共享關係  

  1. 首先需要給當前的Activity的佈局檔案中設定要共享的元素,給它增加相應的屬性:
        <ImageView
            android:id="@+id/ImageView1"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:src="@drawable/timg"
            android:transitionName="test" />
    
    
        //程式碼設定
        imageView. setTransitionName();
  2. 給跳轉的Activity的佈局檔案也增加相同的屬性,共享元素的屬性名要保持一致。
        <ImageView
            android:layout_width="300dp"
            android:layout_height="300dp"
            android:src="@drawable/timg"
            android:transitionName="test" />
  3. 跳轉程式碼

    //共享單個元素跳轉
    Intent intent = new Intent();
    intent.setClass(ExcessiveActivity.this, ExcessiveActivity2.class);
    startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(this, imageView, "test").toBundle());
    
    //共享多個元素跳轉
    Intent intent = new Intent(this,SecondActivity.class);
    ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
                    Pair.create(imageView,"test"),
                    Pair.create(textview,"test2"));
    startActivity(intent,options.toBundle());
    

注:一定要保證命名相同,這樣系統才能找到共享元素 

過渡動畫總結 overridePendingTransition方法從Android2.0開始,基本上能夠實現簡單的activity跳轉動畫; ActivityOptions API是在Android5.0開始的,可以實現一些炫酷的動畫效果,更加符合MD風格; ActivityOptions還可以實現兩個Activity元件之間的過度動畫;