Android動畫進階Lollipop

Lollipop動畫

Lollipop為我們帶來不少動畫,簡單而有效,靈活運用提升APP逼格

過渡動畫

Activity過渡動畫包含兩部分 :

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

進入和退出

  • explode (分解) :從屏幕中間進進或出,移動視圖

  • slide (滑動) : 從屏幕邊緣進或出,移動視圖

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

  • 使用 :
    初始Activity:

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

目標跳轉(zhuǎn)Activity :

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

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

  • getWindow().setEnterTransition() : 當A 跳轉(zhuǎn)到 B時,使B中的View進入場景的transition

  • getWindow().setReturnTransition() : 當B 返回到 A時,使B中的View退出場景的transition

  • getWindow().setReenterTransition() : 當B 返回到 A時,使A中的View進入場景的transition

上述設置需要在setContentView() 之前設置

一共就是上述三種模式: Explode、SlideFade、

效果如圖:

過渡動畫演示.mp4_1492677049.gif

共享元素

  • changeBounds : 捕獲共享元素的layout bound,然后播放layout bound變化動畫。ChangeBounds 是共享元素變換中用的最多的,因為前后兩個activity中共享元素的大小和位置一般都是不同的。
  • changeClipBounds : 裁剪目標視圖邊界,捕獲共享元素clip bounds,然后播放clip bounds變化動畫。
  • changeTransform : 捕獲共享元素的縮放(scale)與旋轉(zhuǎn)(rotation)屬性 ,然后播放縮放(scale)與旋轉(zhuǎn)(rotation)屬性變化動畫。
  • changeImageTransform :捕獲共享元素(ImageView)的transform matrices 屬性,然后播放ImageViewtransform matrices 屬性變化動畫。與ChangeBounds相結(jié)合,這個變換可以讓ImageView在動畫中高效實現(xiàn)大小,形狀或者ImageView.ScaleType 屬性平滑過度。

效果圖:

共享元素.mp4_1492769148.gif
  • 使用
  1. 需要共享的View 在兩邊的布局 加上 android:transitionName="one" 里面的值是自己定的一個標識,但是必須保持兩邊一致
  2. 在啟動Activity中 找到 需要共享的控件并且設置好Tag就可以了(需要注意的傳入的只能是View)
  3. 在跳轉(zhuǎn)的目標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"

這個是系統(tǒng)默認的
自定義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 : 動畫結(jié)束時的圓的半徑

兩種應用:

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

//設置頂布局過渡動畫
 llRoot.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
            //當布局已經(jīng)完全展示出來再開始動畫
            @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) {
                //實現(xiàn)從左上角開始的扇形展開動畫
                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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,828評論 25 709
  • 前言 早在Android 4.4,Transition 就已經(jīng)引入,但在5.0才得以真正的實現(xiàn)。而究竟Transi...
    justCode_閱讀 1,434評論 2 8
  • 假設,兩個有Activity A和B A啟動B: A發(fā)生exit動畫,B發(fā)生enter動畫 B返回A:B發(fā)生ret...
    i冰點閱讀 17,475評論 7 42
  • 每年春夏之交的紅五月,都會隨先生回鄉(xiāng)省親,給婆母祝生賀壽。 開車出行往往是我們共同的選擇,一來方便,溫度季節(jié)亦相宜...
    笨死的豬閱讀 488評論 0 4
  • 我在自己的影子里,向遠方宣泄,假裝是一個幸福的成年人 我傾盡力量 穿過一個又一個的方格磚,原來眼睛看到的要用心去暢...
    星火_5232閱讀 222評論 0 0

友情鏈接更多精彩內(nèi)容