Android 動畫進階 Lollipop

Rayhahah發表於2017-04-21
Android動畫

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、

效果如圖：

Android 動畫進階 Lollipop
過渡動畫演示.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 屬性平滑過度。

效果圖：

Android 動畫進階 Lollipop
共享元素.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();
            }
        });複製程式碼

效果圖：

Android 動畫進階 Lollipop
circularAnim.mp4_1492705069.gif

最後

Lollipop 中新增的動畫效果還是十分不錯的，而且使用也是十分簡單高效
將有需求的動畫效果封裝在自己的基類檔案中使用起來就更加順暢了

如果覺有有用，可以點贊鼓勵一下哈O(∩_∩)O~~
附上：程式碼Github

相關文章