看完這篇再不會 View 的動畫框架，我跪搓衣板

水中魚之1999發表於2019-06-20

引言

眾所周知，一款沒有動畫的 app，就像沒有靈魂的肉體，給使用者的體驗性很差。現在的 android 在動畫效果方面早已空前的發展，1.View 動畫框架 2.屬性動畫框架 3.Drawable 動畫。相比後後兩者，View 動畫框架在 Android 的最開始就已經出現，即有著非常容易學習的有點，卻也有著用法太死的毛病，但對於初學者而言，豬狗實現各種可選的效果了。

“Android animator”的圖片搜尋結果

組成

對於 View 的動畫框架而言，最常見的有：

AlphaAnimation（透明度動畫）、
RotateAnimation（旋轉動畫）、
ScaleAnimation（縮放動畫）、
TranslateAnimation（平移動畫）四種型別。

除此之外還提供了動畫集合類（AnimationSet），用於將各種基本動畫組合起來進行顯示。

使用

對於現在市面上的書籍 ?，基本都是在活動程式碼中，一步一步設定透明度，執行時間。來對控制元件新增動畫框架。所以我這裡還是隻講 Java 程式碼新增那就太無聊了。所以這裡我向大家介紹的使用方法，除了基本的以程式碼形式新增之外，更有 xml 檔案的格式書寫，並在活動中直接引用?的騷操作。

如果大家對其他動畫方式，比如 Drawable 動畫啊，屬性動畫啊感興趣，歡迎檢視我以後的博文。

既然是要在 xml 中配置，那我獻給大家介紹下，xml 中各種屬性的意義：在 /res 下建立名為 “anim” 的 Directory，將以後的 xml 配置檔案都放在該目錄下。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="true">
    <!--透明度更變動畫-->
    <alpha
        android:fromAlpha="float"
        android:toAlpha="float" />
    <!--縮放動畫-->
    <scale
        android:fromXScale="float"
        android:toXScale="float"
        android:fromYScale="float"
        android:toYScale="float"
        android:pivotX="float"
        android:pivotY="float" />
    <!--平移動畫-->
    <translate
        android:fromXDelta="float"
        android:toXDelta="float"
        android:fromYDelta="float"
        android:toYDelta="float" />
    <!--旋轉動畫-->
    <rotate
        android:fromDegrees="float"
        android:toDegrees="float"
        android:pivotX="float"
        android:pivotY="float" />
    <!--...-->
</set>

下面，我就開始帶領大家，以 ImageView TextView 為例，展示下使用方法，開始發乾貨咯：

在開始前

重點：嘮叨一下

這裡給出佈局檔案以後都是這樣的，就不再給出了

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".AlphaAnimationActivity">

    <!--不建議用 Relativelayout 浪費記憶體 哈哈哈-->
    <ImageView
        android:id="@+id/image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:alpha="1.0"/>

    <!--這裡的 alpha 設定的是最大透明度-->
    <TextView
        android:id="@+id/text"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:gravity="center"
        android:text="@string/text"
        android:background="@color/papayawhip"
        android:alpha="0.75"/>

</LinearLayout>

在佈局檔案中，對控制元件設定 alpha 值，表示最大的透明度

透明度動畫 -> Alpha

在 xml 檔案中設定 alpha 動畫，主要分為三個屬性

fromAlpha 表示開始時的透明度
toAlpha 表示結束時的透明度
duration 表示變化經歷過程所佔時間

在 /res/anim 下建立 alpha_anim.xml 檔案

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

然後直接在活動中例項化 Animate 物件，引用即可

        Animation animation = AnimationUtils.loadAnimation(this, R.anim.alpha_anim);
        animation.setFillAfter(false);// 變化之後是永久更改還是恢復原樣

        ImageView imageView = findViewById(R.id.image);
        imageView.startAnimation(animation);

        TextView textView   = findViewById(R.id.text);
        textView.startAnimation(animation);

注意這個 setFillAfter 是用於設定：控制元件變化之後是永久更改，還是執行完了就恢復原樣

執行一下，看效果：

縮放動畫 -> Scale

在屬性檔案（xml）中，scale 的標籤主要有一下這幾個

duration 執行時間
fromXScale 橫軸方向開始變化時的大小
toXScale 橫軸方向變化結束時的大小
fromYScale 縱軸方向開始變化時的大小
toYScale 縱軸方向變化結束時的大小
pivotX 按比例確定縮小/放大中心點的橫座標
pivotY 按比例確定縮小/放大中心點的縱座標

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="2000"
        android:fromXScale="1.0"
        android:toXScale="0.0"
        android:fromYScale="1.0"
        android:toYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

如果你願意，可以在佈局檔案中設定，預設開始是的縮放比例：

見名知意：

scaleX 橫向預設縮放比
scaleY 縱向預設縮放比

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:scaleY="0.75"
        android:scaleX="1.15"/>

能達到如下的效果

同樣的在活動中引用該屬性檔案：

和前面無異，改個檔案即可

。。。
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.scale_anim);
        animation.setFillAfter(false);// 變化之後是永久更改還是恢復原樣

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
。。。

執行一下看看效果：

平移動畫 -> Translate

平移動畫相對其他簡單的屬性動畫來說，更為簡單，主要有五個屬性：

duration 執行時間
fromXDelta 在 X 軸的開始位置
toXDelta 在 X 軸的結束位置
fromYDelta 在 Y 軸的開始位置
toYDelta 在 Y 軸的結束位置

注意，這裡有個點比較特殊：

在確定位置屬性的時候，有三種型別的賦值方法：

整型值：如：android:fromXDelta="20" 表示自己與左邊界的距離
百分比：如：android:fromXDelta="20%" 表示自己與左邊界的距離和自己高度的百分比
百分比+p：如：android:fromXDelta="20%p" 表示自己與父控制元件（一般為 ViewGroup ）左邊界的距離

篇幅問題，這裡我只介紹整型值的使用方法

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="2000"
        android:fromXDelta="20"
        android:toXDelta="100"
        android:fromYDelta="20"
        android:toYDelta="100"/>
</set>

同樣的也可以在佈局檔案中加以引用，這頂初始值：

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:translationX="50sp"
        android:translationY="20sp"/>

可以看到，設定了初始位移的 ImageView 相對與未設定的 TextView 發生了偏移

同樣的，在活動中加以引用：

...
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim);
        animation.setFillAfter(false);// 變化之後是永久更改還是恢復原樣

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
...

執行一下看看效果：

旋轉動畫 -> Rotate

對於旋轉動畫而言，一切就顯得有趣了起來，我碼字的雙手就顯得疲憊了起來

首先還是設定屬性，對於旋轉動畫，基本的屬性有：

duration 動畫時間
fromDegrees 動畫開始角度
toDegrees 動畫結束偏轉角度
pivotX 旋轉軸心點 X 位置
pivotY 旋轉軸心點 Y 位置

同樣的旋轉動畫的屬性也有三種設定方法，但這主要是對於 pivot 而言，用於確定軸心點位置

整型值：如：android:pivotX="20" 表示自己與左邊界的距離
百分比：如：android:pivotX="20%" 表示自己與左邊界的距離和自己高度的百分比
百分比+p：如：android:pivotX="20%p" 表示自己與父控制元件（一般為 ViewGroup ）左邊界的距離

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="2000"
        android:fromDegrees="0"
        android:toDegrees="+360"
        android:pivotX="50%"
        android:pivotY="50%"/>
</set>

老樣子，新增布局

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"/>

在活動中新增程式碼

...
        Animation animation = AnimationUtils.loadAnimation(this, R.anim.rotate_anim);
        animation.setFillAfter(false);// 變化之後是永久更改還是恢復原樣

        ImageView imageView = findViewById(R.id.scale_image);
        imageView.startAnimation(animation);
...

同樣的在執行一下

這時你可能會揪著我稀疏的秀髮問我，這有趣在哪裡？？！

好的請看！

360度無腦大旋轉，好了牛逼吹完了，不告述你咋調的，我先跑了

開個玩笑啦，其實很簡單，在佈局檔案中，設定下傾斜角就行了

rotationX 橫向傾斜角
rotationY 縱向傾斜角

    <ImageView
        android:id="@+id/scale_image"
        android:layout_width="300dp"
        android:layout_height="200dp"
        android:src="@drawable/girl"
        android:scaleType="fitXY"
        android:rotationX="50"
        android:rotationY="20"/>

時間插值器

好了，到此為止基本動畫就結束了，現在我們來點猛的：對就是：時間插值器

什麼是時間插值器？我剛學時其實也很懵逼，現在發覺還是給大家看例子方便

使用

首先教大家下使用方法，完了在以咋們透明度動畫為例做纖細的介紹

首先看，這時我們原來透明度的程式碼：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

執行效果，我們可以看到這是個比較均勻的變化過程

我們簡單的新增一行：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="5000"/>
</set>

再來這次時間加到10s，方便看效果；

可以看到，變化的數獨越來越快，這就是時間插值器：

常見的時間插值器有：

android:interpolator="@android:anim/accelerate_interpolator" 設定動畫為加速動畫(動畫播放中越來越快)

就是這例子，這裡不在說了

android:interpolator="@android:anim/decelerate_interpolator" 設定動畫為減速動畫(動畫播放中越來越慢)

android:interpolator="@android:anim/accelerate_decelerate_interpolator" 設定動畫為先加速在減速(開始速度最快逐漸減慢)

android:interpolator="@android:anim/anticipate_interpolator" 先反向執行一段，然後再加速反向回來（相當於我們彈簧，先反向壓縮一小段，然後在加速彈出）

android:interpolator="@android:anim/anticipate_overshoot_interpolator" 同上先反向一段，然後加速反向回來，執行完畢自帶回彈效果（更形象的彈簧效果）

android:interpolator="@android:anim/bounce_interpolator" 執行完畢之後會回彈跳躍幾段（相當於我們高空掉下一顆皮球，到地面是會跳動幾下）

android:interpolator="@android:anim/cycle_interpolator" 迴圈，動畫迴圈一定次數，值的改變為一正弦函式：Math.sin(2* mCycles* Math.PI* input)

android:interpolator="@android:anim/linear_interpolator" 線性均勻改變

android:interpolator="@android:anim/overshoot_interpolator" 加速執行，結束之後回彈

補間動畫 -> Tween animation

摳完了上面每個的細節，我們玩波大的，首先我們先定義一個動畫集合：

首先們還是，定義一個屬性檔案，但這裡我們集合了縮放透明度兩種效果：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/bounce_interpolator" >

    <scale
        android:duration="500"
        android:fromXScale="0.1"
        android:fromYScale="0.1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0" />

    <alpha
        android:duration="500"
        android:fromAlpha="0"
        android:toAlpha="1.0" />

</set>

然後我們在程式碼中，對 RecyclerView 設定它，對於 RecyclerView Adapter 的寫法這裡略去了，設定的詳細方法如下：

    private List<String> list;

    private void iniList(){
        list = new ArrayList<>();
        for (int i = 0 ; i < 30 ; i ++){
            list.add(i + " -- tween 測試 --");
        }
    }

    private void iniRecyclerView(){
        recyclerView = findViewById(R.id.recycler);
        GridLayoutManager manager = new GridLayoutManager(this,1);
        recyclerView.setLayoutManager(manager);

        LayoutAnimationController lac=new LayoutAnimationController(AnimationUtils
                .loadAnimation(this, R.anim.in_anim));
        lac.setDelay(0.5f);
        lac.setOrder(LayoutAnimationController.ORDER_RANDOM);
        recyclerView.setLayoutAnimation(lac);

        TweenRecyclerAdapter adapter = new TweenRecyclerAdapter(list);
        recyclerView.setAdapter(adapter);
    }

讓我們執行下看看酷炫的效果：

如果文中有誤，歡迎在評論區指出

怎麼樣，我不用貴搓衣板了吧，哈哈哈，點個讚唄麼麼噠～

本文以同步釋出到我的 CSDN 部落格，歡迎大家來捧場：
點選跳轉 https://blog.csdn.net/qq_43377749/article/details/91890323

Android高階進階之路【三】看完這篇再不會Android動畫框架，我跪搓衣板
2021-11-06
Android動畫框架
看完不會寫MVP架構我跪搓板
2018-05-03
MVP架構
深入理解Java多執行緒與併發框（完結篇）——看完再不懂多執行緒我跪鍵盤
2020-04-01
Java執行緒
看完這篇Linux基本的操作就會了
2019-01-19
Linux
做國產獨立遊戲花了一百萬，差點在家跪搓衣板
2020-11-23
遊戲
看完這篇 Linux 的基本操作你就會了！
2019-04-17
Linux
大寫的服，看完這篇你還不懂RocketMQ算我輸
2020-09-25
MQ
從工廠流水線妹子到Google上班程式媛，看完後，我跪服了！
2019-05-20
Go
【死磕JVM】看完這篇我也會排查JVM記憶體過高了就是玩兒！
2021-05-05
JVM記憶體
看完這篇，學會MySQL資料複製（含配置教程）
2018-10-10
MySql
看完這篇，還不懂JAVA記憶體模型(JMM)算我輸
2022-12-06
Java記憶體模型
看完這篇原型設計模式，還不會，請你吃瓜
2023-02-20
原型設計模式
看完這篇，再也不怕面試官問我執行緒池了
2020-12-02
面試執行緒
看完動畫你還敢說不會快速排序
2018-11-23
動畫排序
HTML教程（看完這篇就夠了）
2021-02-17
HTML
看完這篇，Promise面試就搞定了...
2018-07-30
Promise面試
貝葉斯網路，看完這篇我終於理解了(附程式碼)！
2019-08-01
View動畫、幀動畫
2018-07-02
View動畫
看完這篇不在擔心刪庫跑路
2020-12-10
看完這篇文章，我奶奶都懂了https的原理
2019-06-01
HTTP
看完這篇。再也不怕被問 HandlerThread 的原理
2020-07-28
thread
Sql Or NoSql，看完這一篇你就懂了
2019-08-12
SQL
看了這篇你就會手寫RPC框架了
2020-07-24
RPC框架
聽我的，看完這30道MySQL基礎題再去面試
2020-09-26
MySql面試
看完這篇，再也不怕被問到 AsyncTask 的原理了
2020-07-27
關於 Docker 映象的操作，看完這篇就夠啦 !（上）
2019-03-30
Docker
關於 Docker 映象的操作，看完這篇就夠啦 !（下）
2019-04-01
Docker
看完這篇你不能再說不懂SSO原理了！
2023-02-17
看完這你會明白黑客攻擊都是血淋淋的錢
2017-07-03
黑客
看完這個你還不會插入排序麼
2018-11-24
排序
【Spring】使用@Profile註解實現開發、測試和生產環境的配置和切換，看完這篇我徹底會了！！
2020-08-24
Spring
【高併發】Redis如何助力高併發秒殺系統，看完這篇我徹底懂了！！
2020-09-12
Redis
看完這篇 HashSet，跟面試官扯皮沒問題了
2020-07-01
面試
研究分散式唯一ID生成，看完這篇就夠
2019-07-27
分散式
想轉行資料分析，看完這篇再做決定
2021-05-12
看完這篇報導，你們都想去 GitHub 上班了
2015-11-24
Github
還在為找資料而發愁嗎？看完這篇應該再也不會了
2018-08-11
【Android】給我一個Path，還你一個動畫View
2019-02-25
Android動畫View