在Android 中,使用簡單的幾行代碼實現複雜、漂亮的動畫

2020-12-11 ProgrammerRan
Pixabay License

01了解 Android 動畫

在Android 中，動畫一般分為三類，幀動畫（Frame Animation）、補間動畫（Tween Animation）、屬性動畫（Property Animation）。

幀動畫（Frame Animation）是將一張張相似的圖片組合在一起，然後一幀一幀的播放，利用人眼視覺殘留原理，讓我們感覺這就是動畫，跟 GIF 圖片、視頻播放的原理差不多。

幀動畫一般通過編寫 xml 實現，通過 AnimationDrawable 控制動畫啟動，停止。

如圖，以Android 項目中常用的網絡加載動畫為例，在 xml 資源文件中配置完成後，使用 AnimationDrawable 加載動畫。

補間動畫（Tween Animation），補間動畫是在兩個關鍵幀（可以理解為開始和結束幀）之間通過系統運算、設置等操作做「補間動畫」，使靜態圖像運動起來。補間動畫也可細分為透明動畫（AlphaAnimation）、旋轉動畫（RotateAnimation）、縮放動畫（ScaleAnimation）、位移動畫（TranslateAnimation）。

補間動畫以透明動畫為例

在 res 資源文件下新建一個 anim 目錄，新建 anim_alpha.xml

屬性動畫（Property Animation）是在 Android 3.0 以後才引入的，它可以直接更改對象的屬性。通過不斷地設置一個 View 的視覺屬性讓其出現動畫效果。 例如不斷設置 View 的 scaleX 屬性，就能實現 View 在 X 軸縮放的效果。屬性動畫有很多種實現方式，簡單的動畫使用 ObjectAnimator 就可以滿足，複雜一些的使用 ValueAnimator 結合 AnimatorSet 或 PropertyValuesHolder 使用就可以做出比較漂亮的動畫。

屬性動畫以簡單的 ObjectAnimator 為例，將 View 對象從 1.0的透明度改變到透明度為 0.3，再從 0.3 的透明度改變為 1.0 的透明度。

02Android 複雜、漂亮動畫的實現

Android 應用中，動畫是非常重要的，以個漂亮的動畫往往會給人耳目一新，喜歡上這個應用。要使用比較複雜、漂亮的動畫，使用 Android API 就比較難以實現了，或者說需要花更多的時間，往往還達不到理想中的視覺效果。比如，如下動畫的實現

該動畫效果來自 lottie 官方。這個動畫如果使用幀動畫來實現，很可能就會出現 oom。

這個動畫複雜在哪？

幀數多，如果把動畫分割成很多幀的話，不僅應用體積會增大，在加載時還很有可能會出現 oom。

這裡我用 ScreenToGIF 工具查看一下到底有多少幀

可以看出，這個動畫只有 418 幀……

那麼，用什麼框架或庫能完美實現這個動畫呢？答案是 lottie-android。

lottie-android 是 Airbnb 公司開源的框架，最低支持 Android API 16，從 lottie-android 2.8.0開始，遷移到了 androidx 項目，目前最新的版本是 lottie-android 3.4.1。Airbnb 也開源了 lottie-ios 、lottie-web等項目，也就是說，在公司項目 Android 和 IOS 等平臺都可以使用 lottie 加載漂亮的動畫。

lottie 怎麼使用？

以 Android 為例，當設計師通過 AE 製作好一個動畫之後，導出 Json 動畫數據文件，具體操作步驟可以參考 lottiefiles.com 提供的教程。在這上面也有很多漂亮的動畫供大家測試所用。

lottie-android 可以通過多種形式加載動畫，如 Assets 、JsonObject、Json 字符串、Url等。

加載 Assets 目錄下的動畫

Json 字符串加載

加載時可以設置緩存，動畫文件一般都比較大，資源消耗較高，設置緩存對加載速度和應用性能是很有必要的。

JsonObject 方式加載

JsonReader 方式加載

通過網絡 Url 加載

以上是使用 lottie-android 加載動畫的幾種方式，實際上 lottie-android 也還有其它加載方式，在實際應用中，你可以根據自己項目需要，閱讀 lottie-android 源碼，了解更多加載動畫方式。

下面介紹下 lottie-android 常用的一些用法

1、監聽動畫進度

監聽動畫進度應該算是比較常用的功能，比如，在 Splash 界面使用動畫，監聽動畫完成之後跳轉到下一個頁面。

2、播放、暫停、取消

播放 lottieAnimationView.playAnimation()

取消 lottieAnimationView.cancelAnimation()

暫停 lottieAnimationView.pauseAnimation()

3、循環

lottieAnimationView.setRepeatCount()

LottieAnimationView 默認是循環模式，可以通過設置 RepeatCount 控制循環次數，lottieAnimationView.setRepeatCount(0) 表示不循環。

關於 lottie-android 的使用就講到這裡了，如果您有更好的使用心得或有不明白的地方之處，歡迎在評論區裡留言，讓我們一起來討論 Android 動畫。

最後，附上在手機上實現的效果圖

相關焦點

  • Android ConstraintLayout約束布局可視化工具使用~
    ConstraintLayout 布局，今天我們簡單看看這個布局的使用。ContraintLayout 是一個 Google 發布的一個新布局( 翻譯成中文 「約束布局「 )它的使用方式有兩種在 AS 2.3 以上版本都可以使用滑鼠拖動使用代碼書寫控制項之間的約束
  • Google I/O 2019 Android 應用原始碼現已發布
    在這篇文章中，我們將著重圍繞其中幾項主要變更進行說明。Google I/O 2019https://play.google.com/store/apps/details?更多內容，請閱讀《手勢導航: 實現邊到邊的全屏體驗》系列連載，或請前往 Github 查看團隊在 Google I/O 應用庫中提交的相關代碼，了解如何將應用內容擴展到屏幕邊緣。
  • Android - android xml 層級專題及常見問題 - CSDN
    除了應用程式的編碼，你需要關注各種各樣的資源，諸如你用到的各種靜態內容，如位圖，顏色，布局定義，用戶界面字符串，動畫等等。這些資源一般放置在項目的 res/ 下獨立子目錄中。這節教程將學習如何來組織應用程式資源，指定替代資源，並在應用程式中訪問它們。在eclipse中組織資源你需要將每種資源放置在項目中 res/ 目錄的特定子目錄下。
  • Android Studio基礎-選項菜單Java實現實例
    在Android應用程式中菜單是用戶界面中最常見的元素之一，使用非常頻繁。通常Android應用程式中的菜單默認是不可見的，只有當用戶單擊手機上的「Menu」鍵，系統才會顯示該應用關聯的菜單。所以一般的Android系統的手機都要有一個"Menu"鍵。
  • Android系統開機動畫的一生
    前言在上篇文章【Android從上電到加載launcher，都發生了啥】中，簡單介紹了Android系統從上電到加載launcher的流程，但比較粗略，特別是init之後，開機動畫如何啟動，又如何結束的，絲毫沒有涉及，這篇文章就來好好說說。
  • Android開發:如何在MotionLayout中使用動態數據
    可以使用MotionLayout創建數據的動態動畫嗎？這是任何你在編譯時不知道的數據，比如用戶輸入。對！當然。可以使用MotionLayout代碼API在代碼中動態創建MotionScene。在本文中，我們將使用開發一個動態直方圖，該直方圖使用MotionLayout設置其更改的動畫。
  • 想讓Android手機開掛,安裝Xposed框架就行了!
    其通過替換Android系統的關鍵文件，可以攔截幾乎所有Java函數的調用，並允許通過模塊擴展方式來實現各種功能，模塊中的自定義代碼可以更改調用函數時的行為，常被用來修改Android系統和應用程式的功能。用戶可以在一些應用商店或其自帶的下載庫來下載安裝各種模塊，相比於重新安裝系統來獲得新功能，Xposed提供了一種更便捷的方式[1][2]。
  • 幾行代碼搞定ML模型,低代碼機器學習Python庫正式開源
    /github.com/pycaret/pycaret用戶文檔：https://www.pycaret.org/guideNotebook 教程：https://www.pycaret.org/tutorialPyCaret 庫支持數據科學家快速高效地執行端到端實驗，與其他開源機器學習庫相比，PyCaret 庫只需幾行代碼即可執行複雜的機器學習任務
  • 駭極乾貨|第2期:Android日誌系統分析
    Liblog提供的接口實現在logd_write.c文件中，它的位置如下：其中實現了一系列的日誌寫入函數，如下圖所示：其中_android_log_assert, _android_log_vprint和_android_log_print用來寫入類型為
  • Keras 之父講解 Keras:幾行代碼就能在分布式環境訓練模型 |...
    在谷歌，我們相信，未來深度學習將存在於每一個普通 IT 開發者的工具箱中，不再局限於機器學習專家。原因很簡單：每個開發者都需要做出更智能的應用。為了讓這成為現實，我們需要降低深度學習的使用門檻，搞出每一個人都能用的工具，而不應該只有專家才能用深度學習解決問題。
  • Android 與 iOS 共用一套代碼?Netflix 是如何實現
    工作性質的變化，意味著我們需要在分布式環境中的設備上開發出高寫入強度軟體，其中約三分之一用戶的網絡連接條件並不穩定，容錯能力也相當有限。作為一支小型工程團隊，我們意識到必須對可靠性及產品交付速度進行優化，才能滿足不斷變化的客戶需求。由於網絡連接的可靠性不高，因此我們更傾向於推出移動解決方案，藉此實現強大的客戶端持久性與脫機支持能力。為了快速交付產品，我們決定使用一套多平臺架構。
  • 一個簡單的示例,說明Manim的完整工作過程,很簡單!
    該文件夾中包含的項目文件分別是：使用Manim的Python代碼文件；Manim的輸出文件；Manim的配置文件。接下來，通過一個簡單的例子，來說明一下manim的使用過程。第一個簡單場景在項目文件夾「project」中，創建一個新的文件，可命名為「scene.py」，代碼如下：保存上述代碼後，打開命令行，進入到「project」目錄下，運行下面的命令：manim scene.py SquareToCircle
  • 使用jQuery的animate()+CSS樣式實現動畫效果及stop()停止動畫
    CSS屬性，可見動畫效果是CSS樣式實現的。，一個CSS樣式是一個動畫效果，那麼多個CSS樣式就是多個動畫效果了，此時，就可以實現更豐富的動畫效果。在使用多個CSS樣式屬性時，要使用英文的逗號隔開即可，如下是多動畫的效果代碼：<!
  • 命令行工具開發:如何快速實現命令行提示?
    阿里妹導讀：對於稍微複雜一些的命令行工具，命令行的提示功能必不可少。那麼對於不同語言的開發者，有沒有一種簡單快捷的實現方式呢？本文分享一種快速實現的方法，使用YAML文件定義命令行工具的使用規範，再通過工具自動生成各種shell的命令行提示腳本，最後分享一些至關重要的命令行解析器。
  • 推薦9款使用CSS3實現的超酷動畫效果
    大家都知道，在網頁製作時使用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制。只要對相應的代碼做一些簡單的修改，就可以改變同一頁面的不同部分，或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本，CSS3語言開發是朝著模塊化發展的。
  • 現代的 「Hello, World」,可不僅僅是幾行代碼而已
    要想構建這樣的程序，我需要回憶如何使用KEDIT等編輯器，學習如何使用AS/400軟體開發工具、構建測試庫、編輯實際的程序，然後再編譯並弄清楚如何運行。雖說客戶的程序很簡單，但我不想直接開始寫程序。於是，我創建了一個「Hello，World」項目。
  • 不會php代碼怎麼做網站?教你輕鬆使用各種開源系統建站方法
    做網站大家首先想到的就是要怎麼寫代碼，選擇PHP還是asp，或者Java等語言，還有資料庫使用MySQL、oracle還是access等等，其實完全沒有那個擔心，很多的個人站長並不會寫代碼，這是事實。只要掌握網站建設的基本方法，對於各種類型的開源網站系統都可以輕鬆駕馭，做出漂亮的網站。
  • Excel宏功能技巧進階-三行代碼實現批量隔行插入表格
    大家好，昨天給大家分享了Excel宏功能的隔行插入技巧。但是很多時候我們既然用到了宏這個功能，那麼肯定是文檔中有很多的數據。表格中有1000條記錄，用我們昨天的方法完成隔行插入製作工資條就需要運行1000次，即便是設置了快捷鍵也需要按1000次鍵盤。所以並不能滿足我們的需求。
  • 如何使用AOS庫輕鬆製作網站滾動動畫?
    滾動動畫可以為您的網站增添優雅的效果。一點點動畫修飾可以使您的網站看起來全面而完整。使用JavaScript和CSS，可以使元素在向下滾動頁面時淡出，滑動甚至旋轉。而且，您甚至不必自己編寫所有代碼！多虧了免費的AOS庫，美化您的網站就像添加腳本一樣簡單。只需使用CDN或程序包管理器來安裝JavaScript和CSS文件，然後插入幾行代碼即可。然後，製作動畫將變得輕而易舉。我們將在此處向您展示如何設置AOS庫，並為您提供一些實用的AOS實驗示例。
  • 使用簡單 好看的CSS加載動畫源碼
    今天小編分享的css-spinners，它自帶的CSS加載樣式很漂亮，圖案色彩豐富，花樣多多，就算不用它的CSS，也可以按它的動畫來做成GIF圖像。loading樣式有花形、心形、指針、圓形旋轉、進度條以及常見的菊花加載圖案：使用教程CSS Spinners除了輕量級外，使用也十分的簡單，下面來看看教學：STEP 1: 引入CSS文件加載動畫樣式有單個以及全部，如果用戶只需要一個加載動畫，就選擇對應的CSS文件。