2. 程式人生 > 其它 >Android Animation 動畫使用詳解

Android Animation 動畫使用詳解

阿新 • • 發佈：2021-01-31

技術標籤：androidjavacsshtmlspring

閱讀五分鐘，每日十點，和您一起終身學習，這裡是程式設計師Android

本篇文章主要介紹Android開發中的部分知識點，通過閱讀本篇文章，您將收穫以下內容:

一、幀動畫 使用詳解
二、補間動畫 使用詳解
三、屬性動畫 使用詳解

動畫在Android 開發中經常會被用到，使用好的動畫效果有時候可以達到事半功倍的效果。
Android動畫常見的有 幀動畫 、補間動畫、屬性動畫 三種。

一、幀動畫 使用詳解

1. 在xml 宣告幀動畫

我們可以在 xml中設定要播放幀動畫的圖片資源，持續時間，播放屬性等。

在xml 宣告幀動畫舉例如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item
        android:drawable="@drawable/bird0001_risk"
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0002_risk"
        android:duration="80"/>
  ... ...
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0016_risk"
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0017_risk"
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0018_risk"
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0019_risk"
        android:duration="80"/>
    <item
        android:drawable="@drawable/bird0020_risk"
        android:duration="80"/>

</animation-list>

2.控制元件中幀動畫 xml檔案

我們使用幀動畫的時候可以通過@anim/自定義檔名引用我們定義的xml動畫資源。
ImageView 中將幀動畫設定為背景的方法舉例如下：

    <ImageView
        android:id="@+id/img"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_gravity="center_horizontal"
        android:background="@anim/frame_animation" />

二、補間動畫 使用詳解

補間動畫也是Android中常用的動畫之一，相對屬性動畫來說，補間動畫的點選事件不會跟著動畫的位置變化而變化。因為屬性動畫的點選事件會隨著動畫的位置變化而變化，後續將逐漸被屬性動畫替代。

1. 補間動畫分類

補間動畫 常用的分類如下：

  1. 透明動畫 AlphaAnimation

  2. 旋轉動畫 ScaleAnimation

  3. 縮放動畫 RotateAnimation

  4. 平移動畫 TranslateAnimation

  5. 動畫集合 AnimationSet

  6. XML 實現動畫效果

2. 透明動畫

AlphaAnimation 透明動畫 可以設定動畫的透明效果，執行時間，重複方式、重複次數等等。
AlphaAnimation 使用舉例如下：

 /**
         * 透明度動畫AlphaAnimation 從不透明到完全透明
         * **/
        // 起始透明度 到結束透明度 不透明到透明（1f-0f）
        AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
        // 動畫執行時間
        alphaAnimation.setDuration(4000);
        // 設定重複次數
        alphaAnimation.setRepeatCount(2);
        // 重複模式
        alphaAnimation.setRepeatMode(Animation.RESTART);
        // alphaAnimation.setRepeatMode(Animation.REVERSE);
        // 保持結束時候的狀態
        alphaAnimation.setFillAfter(true);
        mImageView.startAnimation(alphaAnimation);

3. 旋轉動畫

RotateAnimation 可以設定旋轉動畫的旋轉角度、持續時間、重複次數等等。

RotateAnimation 使用舉例如下：

   /**
         * 旋轉動畫RotateAnimation,旋轉360度
         **/

        RotateAnimation rotateAnimation = new RotateAnimation(0, 360);
        rotateAnimation.setDuration(2000);
        rotateAnimation.setRepeatCount(2);
        mImageView.startAnimation(rotateAnimation);

4. 縮放動畫

ScaleAnimation可以設定縮放動畫的倍數，持續時間，重複模式等等。

ScaleAnimation使用舉例如下：

        /**
         * 縮放動畫 ScaleAnimation使用方法 縮放2倍
         * */
        ScaleAnimation scaleAnimation = new ScaleAnimation(1, 2, 1, 2);
        scaleAnimation.setDuration(2000);
        scaleAnimation.setRepeatCount(2);
        scaleAnimation.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(scaleAnimation);

5. 平移動畫

TranslateAnimation可以設定平移動畫的舉例，持續時間，重複模式等等。

TranslateAnimation 使用舉例如下：

    /***
         * 平移動畫TranslateAnimation 從x,y 軸 從（0,0）平移到（300,200） *
         **/
        TranslateAnimation translateAnimation = new TranslateAnimation(0,
                300.f, 0, 200.f);
        translateAnimation.setDuration(2000);
        translateAnimation.setRepeatCount(2);
        translateAnimation.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(translateAnimation);

6. 動畫集合

AnimationSet，可以實現設定AlphaAnimation、TranslateAnimation 、RotateAnimation、RotateAnimation 4種動畫累加在一起，進而實現非一般的動畫效果。

動畫集合效果使用舉例如下：

   /***
         * 動畫集合使用效果如下：
         * ***/
        AnimationSet sets = new AnimationSet(true);

        AlphaAnimation alphaAnimation1 = new AlphaAnimation(0.0f, 1.0f);
        TranslateAnimation translateAnimation1 = new TranslateAnimation(0,
                100.f, 0, 100.f);
        RotateAnimation rotateAnimation1 = new RotateAnimation(0, 360);
        ScaleAnimation scaleAnimation1 = new ScaleAnimation(1, 2, 1, 2);

        // 將動畫新增到set集合中
        sets.addAnimation(alphaAnimation1);
        sets.addAnimation(translateAnimation1);
        sets.addAnimation(rotateAnimation1);
        sets.addAnimation(scaleAnimation1);

        sets.setDuration(4000);
        sets.setRepeatCount(2);
        sets.setRepeatMode(Animation.RESTART);
        mImageView.startAnimation(sets);

7. XML 實現動畫效果

實現動畫有兩種方式 ，一種是通過xml 設定，另一種是通過Java程式碼動態設定，上面講的是Java程式碼中的動態設定，下面我們來看xml程式碼中的動畫設定實現方法。

  • 1.XML檔案宣告動畫內容

比如我們在res/anim/hyperspace_jump.xml中通過set 集合，宣告旋轉以及縮放動畫方法舉例如下：

<set android:shareInterpolator="false">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="1.0"
        android:toXScale="1.4"
        android:fromYScale="1.0"
        android:toYScale="0.6"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="700" />
    <set android:interpolator="@android:anim/decelerate_interpolator">
        <scale
           android:fromXScale="1.4"
           android:toXScale="0.0"
           android:fromYScale="0.6"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400"
           android:fillBefore="false" />
        <rotate
           android:fromDegrees="0"
           android:toDegrees="-45"
           android:toYScale="0.0"
           android:pivotX="50%"
           android:pivotY="50%"
           android:startOffset="700"
           android:duration="400" />
    </set>
</set>

  • 2.Java 程式碼中載入xml動畫檔案

完成在xml定義完動畫後，我們可以在Java程式碼中動態引用xml檔案，使用方法舉例如下：

   ImageView spaceshipImage = (ImageView) findViewById(R.id.spaceshipImage);
   Animation hyperspaceJumpAnimation = AnimationUtils.loadAnimation(this, R.anim.hyperspace_jump);
   spaceshipImage.startAnimation(hyperspaceJumpAnimation);

三、 屬性動畫 使用詳解

屬性動畫是補間動畫的延伸，主要解決動畫點選事件可以隨位置到改變而改變，將來會替換補間動畫。

1. 屬性動畫分類

  1. ValueAnimator

  2. ObjectAnimator

  3. TypeEvaluator

2. ValueAnimator 動畫

ValueAnimator 使用方法如下：

    ValueAnimator animation = ValueAnimator.ofFloat(0f, 100f);
    animation.setDuration(1000);
    animation.start();

3. ObjectAnimator動畫

1. 屬性動畫分類

屬性動畫跟補間動畫類似主要分為以下幾類，

  1. 透明動畫 alpha

  2. 旋轉動畫 rotation

  3. 縮放動畫 scaleX

  4. 平移動畫 translationX

  5. 動畫集合 AnimatorSet

2. 旋轉動畫

rotation 可以設定旋轉動畫的旋轉角度、持續時間、重複次數等等。

rotation 使用舉例如下：

     /**
         * 旋轉動畫 rotation
         * */
        ObjectAnimator rotationanimator = ObjectAnimator.ofFloat(mImageView,
                "rotation", 0, 360);
        rotationanimator.setDuration(2000);
        rotationanimator.setRepeatCount(2);
        rotationanimator.setRepeatMode(Animation.RESTART);
        rotationanimator.start();

3. 縮放動畫

scale可以設定縮放動畫的倍數，持續時間，重複模式等等。

scaleX 使用舉例如下：

       /**
         * scaleX 縮放動畫
         *
         * */
        ObjectAnimator scaleXanimator = ObjectAnimator.ofFloat(mImageView,
                "scaleX", 0, 2);
        scaleXanimator.setDuration(2000);
        scaleXanimator.setRepeatCount(2);
        scaleXanimator.setRepeatMode(Animation.RESTART);
        scaleXanimator.start();

4. 平移動畫

translation可以設定平移動畫的舉例，持續時間，重複模式等等。

translationX 使用舉例如下：

      /**
         * translationX平移動畫
         *
         * */
        ObjectAnimator translationanimator = ObjectAnimator.ofFloat(mImageView,
                "translationX", 0, 200f);
        translationanimator.setDuration(2000);
        translationanimator.setRepeatCount(2);
        translationanimator.setRepeatMode(Animation.RESTART);
        translationanimator.start();

5. 透明動畫

alpha透明動畫 可以設定動畫的透明效果，執行時間，重複方式、重複次數等等。

alpha 使用舉例如下：

   /**
         * alpha 透明動畫 1.屬性動畫作用在誰身上 2.屬性名稱 3.屬性的變化範圍值 透明值
         * **/
        ObjectAnimator alphaanimator = ObjectAnimator.ofFloat(mImageView,
                "alpha", 0, 1.0f);
        alphaanimator.setDuration(4000);
        alphaanimator.setRepeatCount(2);
        alphaanimator.start();

6. 動畫集合

AnimationSet，可以實現設定alpha、scale、translation、rotation 4種動畫累加在一起，進而實現非一般的動畫效果。

動畫集合效果使用舉例如下：

 /**
         * 動畫集合效果 rotation
         * */

        AnimatorSet animatorSet = new AnimatorSet();
        ObjectAnimator animator1 = ObjectAnimator.ofFloat(mImageView, "alpha",
                0, 1.0f);
        ObjectAnimator animator2 = ObjectAnimator.ofFloat(mImageView,
                "translationX", 0, 100f);
        ObjectAnimator animator3 = ObjectAnimator.ofFloat(mImageView, "scaleX",
                0, 3);
        ObjectAnimator animator4 = ObjectAnimator.ofFloat(mImageView,
                "rotation", 0, 90);
        List<Animator> list = new ArrayList<Animator>();

        // 將動畫集合新增到list集合中
        list.add(animator1);
        list.add(animator2);
        list.add(animator3);
        list.add(animator4);

        // 播放集合中的動畫
        animatorSet.playSequentially(list);
        animatorSet.setDuration(2000);
        animatorSet.start();

7. 動畫監聽事件

動畫監聽事件主要用來監聽動畫播放時的Listener時間，比如監聽動畫播放取消onAnimationCancel，動畫播放完成onAnimationEnd的事件。
動畫監聽事件舉例如下：

  scaleXanimator.addListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationCancel(Animator animation) {
                super.onAnimationCancel(animation);
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                super.onAnimationRepeat(animation);
            }

            @Override
            public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
            }

            @Override
            public void onAnimationPause(Animator animation) {
                super.onAnimationPause(animation);
            }

            @Override
            public void onAnimationResume(Animator animation) {
                super.onAnimationResume(animation);
            }
        });

友情推薦

Android開發乾貨分享

至此，本篇已結束，如有不對的地方，歡迎您的建議與指正。同時期待您的關注，感謝您的閱讀，謝謝！

點個在看，方便您使用時快速查詢！

相關推薦

【轉載】 android 屬性動畫詳解

動畫綜述 Google大大對動畫的總述如下： Animations can add visual cues that notify users about what\'s going on in your app. They are especially useful when the UI changes state, such as when new cont

【轉載】Android 屬性動畫詳解

引言： 現在市面類似功能的App太多，如果你想要在類似的App中脫穎而出的話，那麼你就要在增強使用者體驗方面下功夫，動畫是你最好的選擇。它可以給使用者增加指引、吸引眼球、提醒使用者跟著你一步步操作等等，動畫

Android Animation 動畫使用詳解

技術標籤：androidjavacsshtmlspring 閱讀五分鐘，每日十點，和您一起終身學習，這裡是程式設計師Android

android popupwindow用法詳解

本文例項為大家分享了android popupwindow的用法，供大家參考，具體內容如下 一、基本用法

Android開發 DownloadManager詳解

前言 　　此部落格正在整理中。。。 　　參考：https://www.jianshu.com/p/e0496200769c

Android Monkey使用詳解

Monkey 是Android SDK提供的一個命令列工具，是一個黑盒壓力測試工具，採用隨機演算法，對被測應用隨機發送偽隨機的使用者事件流，如點選，拖拽，滑動，輸入等，來確定應用是否會發生異常，並且會產生日誌來進行分析

如何使用Flutter實現58同城中的載入動畫詳解

前言 在應用中執行耗時操作時，為了避免介面長時間等待造成假死的現象，往往會新增一個載入中的動畫來提醒使用者，在58同城中也不例外，而且我們並沒有使用系統預設的載入動畫，而是製作了一個具有58特色的載入動畫

動畫詳解天問一號著陸過程：6 大階段，鐳射 3 維成像

5 月 15 日訊息我國天問一號探測器今早成功降落在火星烏托邦平原，實現了我國首次地外行星著陸。著陸後，“祝融號”火星車成功傳回了遙測訊號，標誌著任務成功。

Android MVP模式詳解，全套教學資料

Android面試題含答案 1、Activity生命週期？ onCreate() -> onStart() -> onResume() -> onPause() -> onStop() -> onDetroy()

Android setSystemUiVisibility方法詳解

前言 通過setSystemUiVisibility(int)方法，改變狀態列或者其他系統UI的可見性。 getWindow().getDecorView().setSystemUiVisibility(int visibility);

Android onKeyDown事件詳解

一、前言： 本篇文章介紹如何在Android中實現監聽返回鍵，主鍵，選單鍵。一般情況下，我們都可以在Android手機底部看到三個按鈕，這三個按鈕就分別是返回鍵,主鍵,選單鍵。

android實現截圖並動畫消失效果的思路詳解

整體思路 1、獲取要截圖的view 2、根據這個view建立Bitmap 3、儲存圖片，拿到圖片路徑

詳解微信小程式動畫Animation執行過程

前言 因官方文件描述不清晰，本文主要介紹微信小程式動畫 實現過程 / 實現方式。

android動畫原理，Android熱修復原理，附架構師必備技術詳解

開頭 25歲那年，我從京東離職，入職百度。 在百度認識了當時的架構師久哥（T9級別），因為他的一番話，徹底改變了我的職業生涯，短短三年的時間，我從一枚普通程式設計師成長為別人眼中的技術大咖。

Android評分RationBar控制元件使用詳解

Android評分RationBar控制元件，供大家參考，具體內容如下 主要是不想用太多三方的控制元件，所以決定儘可能自己寫，最近有寫一個評分的頁面，廢話不多說直接上圖

Android Canvas的drawText()與文字居中方案詳解

自定義View是繪製文字有三類方法 // 第一類 public void drawText (String text,float x,float y,Paint paint)

Android中layer-list基本使用詳解

使用layer-list可以將多個drawable按照順序層疊在一起顯示，預設情況下，所有的item中的drawable都會自動根據它附上view的大小而進行縮放，

android studio 的下拉選單Spinner使用詳解

一、認識Spinner Spinner其實就是一個列表選擇框。不過Android的列表選擇框並不需要顯示下拉列表，而是相當於彈出一個選單供使用者選擇。

Android系統新增自定義滑鼠樣式通過按鍵切換例項詳解

一、APP通過View修改滑鼠樣式 app view上修改滑鼠樣式比較簡單，通過hover event 獲取滑鼠座標並使用如下方法修改為自定義圖片：

詳解Android v1、v2、v3簽名(小結）

Android簽名機制 什麼是Android簽名 瞭解 HTTPS 通訊的同學都知道，在訊息通訊時，必須至少解決兩個問題：一是確保訊息來源的真實性，二是確保訊息不會被第三方篡改。