Android 動畫進階 Lollipop

Lollipop動畫

Lollipop爲咱們帶來很多動畫，簡單而有效，靈活運用提高APP逼格

過渡動畫

Activity過渡動畫包含兩部分 ：

1. Activity的進入和退出
2. 過渡過程當中的共享元素

進入和退出

• explode (分解) ：從屏幕中間進進或出，移動視圖
• slide (滑動) : 從屏幕邊緣進或出，移動視圖

• fade (淡入淡出) ： 經過改變視圖的透明度來添加或者移除視圖

• 使用 ：
  初始Activity：

• startActivity(mIntent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle());

目標跳轉Activity :

• getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

• getWindow().setExitTransition() - 當A 跳轉到 B時，使A中的View退出場景的transition

• getWindow().setEnterTransition() : 當A 跳轉到 B時，使B中的View進入場景的transition
• getWindow().setReturnTransition() : 當B 返回到 A時，使B中的View退出場景的transition
• getWindow().setReenterTransition() : 當B 返回到 A時，使A中的View進入場景的transition

上述設置須要在setContentView() 以前設置

一共就是上述三種模式： Explode、Slide 、 Fade、

效果如圖：

過渡動畫演示.mp4_1492677049.gif

共享元素

• changeBounds : 捕獲共享元素的layout bound，而後播放layout bound變化動畫。ChangeBounds 是共享元素變換中用的最多的，由於先後兩個activity中共享元素的大小和位置通常都是不一樣的。
• changeClipBounds : 裁剪目標視圖邊界,捕獲共享元素clip bounds，而後播放clip bounds變化動畫。
• changeTransform : 捕獲共享元素的縮放（scale）與旋轉（rotation）屬性 ，而後播放縮放（scale）與旋轉（rotation）屬性變化動畫。
• changeImageTransform :捕獲共享元素（ImageView）的transform matrices 屬性，而後播放ImageViewtransform matrices 屬性變化動畫。與ChangeBounds相結合，這個變換可讓ImageView在動畫中高效實現大小，形狀或者ImageView.ScaleType 屬性平滑過分。

效果圖：

共享元素.mp4_1492769148.gif

• 使用

1. 須要共享的View 在兩邊的佈局 加上 android:transitionName="one" 裏面的值是本身定的一個標識，可是必須保持兩邊一致
2. 在啓動Activity中 找到 須要共享的控件而且設置好Tag就能夠了（須要注意的傳入的只能是View）
3. 在跳轉的目標Activity中設置方法：

• getWindow().setSharedElementEnterTransition(); : A->B,B進入動畫
• getWindow().setSharedElementExitTransition(); : A->B,A退出動畫
• getWindow().setSharedElementReenterTransition(); : B->A，A進入動畫
• getWindow().setSharedElementReturnTransition(); : B->A,B退出動畫

startActivity(mIntent,
       ActivityOptions.makeSceneTransitionAnimation(this,
     Pair.create(ivImageI, "one"), // 設置共享的控件和他的Tag 就能夠了
    Pair.create(ivImageIi, "two"))
    .toBundle());複製代碼

動畫效果

Ripple (波紋效果)

十分簡單在Xml中控件添加

• 有邊框波紋：android:background="?android:attr/selectableItemBackground"
• 無邊框波紋：android:background="?android:attr/selectableItemBackgroundBorderless"

這個是系統默認的
自定義Ripple一樣簡單，當即上手

1. drawable文件夾新建一個Ripple資源文件
2. 代碼以下：

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#cb2eff" android:radius="500dp"> <item android:drawable="@color/blue_i"/> </ripple>複製代碼

1. android:background="@drawable/ripple_red"
2. 這就是一個藍色底，紅色波紋的點擊效果了

Circular Reveal

其實就是一個圓形路徑繪製。
和Animator的使用基本一致
API解析：

• ViewAnimationUtils.createCircularReveal(view, centerX, centerY, startRadius, endRadius);
• view : 動畫的做用目標
• centerX : 動畫開始的中心點X座標
• centerY : 動畫開始的中心點Y座標
• startRadius : 動畫開始時的圓半徑
• endRadius : 動畫結束時的圓的半徑

兩種應用：

1. 控件點擊的動畫效果
2. 頁面過渡的動畫 ： 就是給頂佈局 設置 Circular 動畫

//設置頂佈局過渡動畫
 llRoot.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            //當佈局已經徹底展現出來再開始動畫
            @Override
            public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
                v.removeOnLayoutChangeListener(this);
                Animator circularReveal = ViewAnimationUtils.createCircularReveal(
                        llRoot,
                        llRoot.getWidth() / 2,
                        llRoot.getHeight() / 2,
                        50,
                       1000);
                circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
                circularReveal.setDuration(1000);
                circularReveal.start();
            }
        });

// 控件設置點擊動畫效果
        ivImageI.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                //實現從左上角開始的扇形展開動畫
                Animator circularReveal = ViewAnimationUtils.createCircularReveal(
                        ivImageI,
                        0,
                        0,
                        0,
                        ivImageI.getWidth()+159);
                circularReveal.setInterpolator(new AccelerateDecelerateInterpolator());
                circularReveal.setDuration(1000);
                circularReveal.start();
            }
        });複製代碼

效果圖：

circularAnim.mp4_1492705069.gif

最後

Lollipop 中添加的動畫效果仍是十分不錯的，並且使用也是十分簡單高效
將有需求的動畫效果封裝在本身的基類文件中使用起來就更加順暢了

若是覺有有用，能夠點贊鼓勵一下哈O(∩_∩)O~~
附上：代碼Github