android 動畫系列 (3) - layoutAnimation 視圖動畫

這是我這個系列的目錄,有興趣的可以看下: android 動畫系列 - 目錄

我的一貫原則,先上圖看了再說:

ezgif.com-video-to-gif.gif

android 視圖動畫這塊其實 挺有意思的,應(yīng)用的也是挺多的,效果就是在一個頁面啟動后,頁面中的元素挨個執(zhí)行入場動畫,看著挺唬人的。簡單來說就是可以在 ViewGroup 的添加一個入場動畫,這個 ViewGroup 的所有子元素都會按照你設(shè)計的順序執(zhí)行一遍動畫,至于子元素的范圍目測是直接子元素才行,關(guān)于這塊的內(nèi)容其實挺老的,android 在很早就已經(jīng)支持了,但是這塊知識點算是冷門,詳細(xì)學(xué)習(xí)過的人應(yīng)該不多。

視圖動畫分3種:

  • layoutAnimation
  • gridLayoutAnimation
  • animateLayoutChanges
  • LayoutTransition

哈哈,說起 layoutAnimation 學(xué)習(xí)過的人應(yīng)該有不少,但是說起后幾個想必學(xué)習(xí)過的人就不多了,當(dāng)然了從后幾種使用的機(jī)會不是很多。

區(qū)別

  • layoutAnimation:
    layoutAnimation 是在 ViewGroup 創(chuàng)建之后,顯示時作用的,作用時間是:ViewGroup 的首次創(chuàng)建顯示,之后再有改變就不行了。
    動畫只能使用 tween 動畫

  • gridLayoutAnimation:
    是給網(wǎng)格布局使用的,現(xiàn)在 gridLayoutAnimation 也不用了,這個大家就不用看了,想詳細(xì)看也沒事,看最下面的參考資料
    動畫只能使用 tween 動畫

  • animateLayoutChanges:
    這是在 ViewGroup 創(chuàng)建顯示之后,內(nèi)容改變時對于新的內(nèi)容做動畫,和 layoutAnimation 是配合使用的。

  • LayoutTransition:
    這個作用范圍 = layoutAnimation + animateLayoutChanges。這個大家看源碼應(yīng)該可以看到,一般我是沒看見有人用這個。這個這里我就不說了,同樣的,詳細(xì)在下面的參考資料里
    動畫只能使用屬性動畫


layoutAnimation

layoutAnimation 是我們使用最多的了,他可以賦予頁面一種頁面展開的交互效果,當(dāng)然他也是有限制的,只能給子 view提供統(tǒng)一的動畫效果,而不能給不同的 view 賦予不同的動畫效果,這種需求就只能自己手動挨個 view寫了,實際還是使用 layoutAnimation的,除非產(chǎn)品腦洞大開...哈哈哈~~

layoutAnimation最大的優(yōu)點就是使用簡單,google 提供了2種方式,xml 和代碼,先來說 xml 的方式

** xml 實現(xiàn) layoutAnimation**

步奏有3:

  • 先寫一個 tween 動畫 xml
  • 在寫一個專門的 layoutAnimation xml 文件
  • 最后給根節(jié)點的 viewGroup 設(shè)置上這個你定義的 layoutAnimation

** layoutAnimation xml 定義:**

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
                 android:animation="@anim/tran_left"
                 android:animationOrder="normal"
                 android:delay="0.3"
/>

屬性參數(shù)很簡單,沒幾個

  • animation 是你指定的動畫
  • animationOrder 是子元素動畫的順序,有三種選項:nomal丶reverse丶和random,其中normal表示順序顯示,reverse表示逆向顯示,random則表示隨機(jī)播放入場動畫。
  • delay 是子元素開始動畫的時間延遲,比如子元素入場動畫的時間周期為300ms,那么0.5就代表每個子元素都需要延遲150ms才能播放入場動畫。總體來說,第一個子元素延遲150ms開始播放入場動畫,第二個子元素延遲300ms開始播放入場動畫,依次類推。

這里使用的動畫 xml 如下:

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
           android:duration="500"
           android:fromYDelta="100%p"
           android:toYDelta="0"
/>

好了到最后了,給根視圖節(jié)點設(shè)置上就行了:

Snip20170727_22.png

效果圖:

ezgif.com-video-to-gif.gif

注意一點這是在啟動頁面上添加的效果,要是我們不再啟動頁上添加而放在另一個頁面呢,速度上會不會有不同呢

非啟動頁效果圖:

ezgif.com-video-to-gif.gif

實測有時候會在卡第一個和第二個 textview,之后的沒事,有時候不會卡,我的機(jī)器配置還算不錯,也沒開別的軟件,具體還是聽見下面的 代碼生成 layoutAnimation 的方式

** 代碼實現(xiàn) layoutAnimation**

我覺得使用代碼生成 layoutAnimation 比在 xml 里設(shè)置要好些,用代碼的方式?jīng)]有再遇到卡的問題了,我們在 view 渲染完后再給他設(shè)置

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

        rootView = (ViewGroup) findViewById(R.id.activity_main);
        rootView.post(new Runnable() {
            @Override
            public void run() {
                // 添加布局動畫
                addLayoutAnimation(rootView);
            }
        });

    }

    private void addLayoutAnimation(ViewGroup view) {

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.tran_left);
        LayoutAnimationController layoutAnimationController = new LayoutAnimationController(animation);
        layoutAnimationController.setDelay(0.3f);
        layoutAnimationController.setOrder(LayoutAnimationController.ORDER_NORMAL);
        view.setLayoutAnimation(layoutAnimationController);
        view.setLayoutAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {

            }

            @Override
            public void onAnimationEnd(Animation animation) {
                Toast.makeText(MainActivity.this, "end!!!", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

    }

還可以設(shè)置監(jiān)聽動畫哦,這是代碼方式的效果圖:

ezgif.com-video-to-gif.gif

大家注意哦,用代碼的方式就不能在 xml 里設(shè)置了哦!


animateLayoutChanges

animateLayoutChanges 這個是在 ViewGroup 內(nèi)容改變的時候?qū)τ诟淖兊牟糠肿鰟赢嫞褂闷饋砗芎唵危谀阈枰@示動畫的 view xml 節(jié)點上設(shè)置 android:animateLayoutChanges="true" 就可以了,和 layoutAnimation 在使用上不沖突,不管是 xml 還是代碼的方式都不沖突。但是這個 animateLayoutChanges 你不能指定動畫,使用使用系統(tǒng)默認(rèn)提供的淡入淡出的動畫效果,先來看下效果圖:

ezgif.com-video-to-gif.gif

頁面的中間有一個線性布局,往里添加一些 view 進(jìn)去,代碼很簡單我就不貼了,大伙看看圖感受一下就 ok 了。有簡單就有復(fù)雜,你要是想指定 viewGroup 內(nèi)容改變時的動畫可以去看 LayoutTransition 這塊,提哦那個樣這部分代碼在下面的參考資料里,我就不說 LayoutTransition 了,要是說起來東西比較多,估計我也說不大好,還是看看比較好的資料把


參考資料

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容