Android的Material Design設計理念 帶來很多絢麗的動畫效果

新增依賴

compile ‘com.android.support:design:25.3.1’

先上效果圖

Circular Reveal

官方將這一動畫稱為揭露效果，它在官網中的描述是這樣的：

當您顯示或隱藏一組 UI 元素時，揭露動畫可為使用者提供視覺連續性。ViewAnimationUtils.createCircularReveal()
方法讓您能夠為裁剪區域新增動畫以揭露或隱藏檢視。

那麼使用ViewAnimationUtils.createCircularReveal()方法就能達到基本的揭露動畫效果了。那麼我們就直接開始看一下這個方法到底需要哪些引數吧

public static Animator createCircularReveal(View view, int centerX, int centerY, float startRadius, float endRadius) {
    throw new RuntimeException("Stub!");
}

view 當前的控制元件
centerX 開始座標點的x
centerY開始座標點的y
startRadius 開始的揭露半徑距離
endRadius 結束揭露半徑距離

上程式碼:

    //擴散
public void onclick2(View view) {
    ImageView imageView = (ImageView) findViewById(R.id.ImageView);
    imageView.setBackgroundColor(Color.RED);

    // 獲取的中心點的座標
    int centerX = (int) imageView.getPivotX();
    int centerY = (int) imageView.getPivotY();
    // Math.hypot(x,y):  返回sqrt(x2 +y2)  返回根號((x2 +y2))
    // 獲取擴散的半徑
    float finalRadius = (float) Math.hypot((double) centerX, (double) centerY);
    // 定義揭露動畫
    Animator mCircularReveal = ViewAnimationUtils.createCircularReveal(
            imageView, centerX, centerY, 0, finalRadius);
    // 設定動畫持續時間，並開始動畫
    mCircularReveal.setDuration(1000).start();
}
 

上面的效果可能提不起你的興趣,那麼我們來看下下面的效果會不會提起你的興趣呢

Activity跳轉使用揭露動畫

以前我們使用一下方法就可以達到跳轉的一些動畫,但是跳轉的動畫是同步進行了

overridePendingTransition（int enterAnim，int exitAnim）

在5.0之後材料設計中Activity Transition也可以實現頁面的跳轉,具體實現方法自行百度

ANDROID L——Material Design詳解（動畫篇）

現在我們使用5.0之後材料設計中Circular Reveal來實現揭露動畫

1. 我們都知道Activity跳轉是有一個預設效果的，所以需要跳轉的Activity設定一個主題樣式，在這個樣式中，我們將Acitivty跳轉的動畫以及window的背景色都設定一下

   <!--關鍵部分-->
   <item name="android:windowAnimationStyle">@null</item>
   <item name="android:windowBackground">@android:color/transparent</item>
   <item name="android:colorBackgroundCacheHint">@null</item>
   <item name="android:windowIsTranslucent">true</item>
   

2. 跳轉動畫的設定。 一開始我想的是在第一個Activity中，給動畫設定一個監聽，然後在動畫完成之後再進行Activity的跳轉，但是效果並不好。所以，我現在的做法是將觸控點的座標傳給第二個Activity，然後讓第二個Activity來進行揭露動畫。

   //跳轉
   public void onclick1(View view) {
       Intent intent = new Intent(this, Main2Activity.class);
       startActivity(intent);
   }
   

頁面2

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main2);

    final TextView textView = (TextView) findViewById(R.id.textview);
    textView.post(new Runnable() {
        @Override
        public void run() {
            float hypot = (float) Math.hypot(textView.getHeight(), textView.getWidth());

            Animator animator = ViewAnimationUtils.createCircularReveal(
                    textView, textView.getWidth() / 2, textView.getHeight() / 2,
                    0,
                    hypot);
            animator.setDuration(2000);
            animator.setInterpolator(new AccelerateDecelerateInterpolator());

            animator.start();
        }
    });


}

總結

可能我的做法不是很好,如果這樣設定就會把所有的跳轉動畫都去掉,不是特別理想，如果有同學也正好做過這部分效果的，可以一起交流一下。當然網上也有很多Circular Reveal的使用，效果也有很多，在此我也只是進行一個小小的總結而已。

原始碼地址:http://blog.csdn.net/q714093365/article/details/77268717