前言
- 動畫的使用 是
Android開發中常用的知識
本次分享探討 Android動畫，包括動畫的種類、使用、原理等，以及支持跨平臺動畫庫--Lottie
目錄
1. 動畫類型
Android動畫主要分爲分爲兩大類（三種）：
- 視圖動畫：補間動畫、逐幀動畫
- 屬性動畫
- 下面。我們一起探討下三種動畫的使用 & 原理
2. 視圖動畫（View Animation）
- 作用對象：視圖（
View），不可用於View的屬性 - 具體分類：補間動畫 & 逐幀動畫
下面會詳細介紹這兩種視圖動畫：
2.1 逐幀動畫
2.1.1 作用對象 : 視圖控件（View）
- 如
Android的TextView、Button等等 - 不可作用於
View的屬性，如：顏色、背景、長度等等
2.1.2 原理 :
- 將動畫拆分爲 幀 的形式，且定義每一幀 = 每一張圖片
- 逐幀動畫的本質：按序播放一組預先定義好的圖片
2.1.3 具體使用 :
- 步驟1. 將動畫資源（即每張圖片資源）放到
drawable文件夾裏 - 步驟2. 在 res/anim/xxx.xml 的文件夾裏創建 設置動畫資源（圖片資源）
- 步驟3：在
Java代碼中載入 & 啓動動畫
2.1.4 特點 :
- 優點：使用簡單、方便
- 缺點：容易引起
OOM，因爲會使用大量 & 尺寸較大的圖片資源 - 使用場景：較爲複雜的個性化動畫效果。
2.2 補間動畫（Tween Animation）
- 簡介如下：
- 使用如：位移變化：
1. 在 Java 代碼中設置 ：
Button mButton = (Button) findViewById(R.id.Button);
Animation translateAnimation = new TranslateAnimation(0，500，0，500)；
translateAnimation.setDuration(3000)；
mButton.startAnimation(translateAnimation);
1. 在XML 代碼中設置，在Java代碼中創建Animation對象並播放 ：
Button mButton = (Button) findViewById(R.id.Button);
Animation translateAnimation = AnimationUtils.loadAnimation(this, R.anim.view_animation);
mButton.startAnimation(translateAnimation)
- 補間動畫顯示效果如下：
3. 屬性動畫
-
屬性動畫（
Property Animation）是在Android 3.0（API 11）後才提供的一種全新動畫模式
3.1 插值器 & 估值器
插值器（Interpolator）
- 定義：一個接口
- 作用：設置 屬性值 從初始值過渡到結束值 的變化規律
- 如勻速、加速 & 減速 等等
- 即確定了 動畫效果變化的模式，如勻速變化、加速變化 等等
Android內置了 9 種內置的插值器實現：
accelerate_interpolator （動畫加速進行），accelerate_decelerate_interpolato （先加速後減速），
anticipate_interpolator （先退後再加速前進）， anticipate_overshoot_interpolator （先退後再加速前進，超出終點後再回終點）， bounce_interpolator （最後階段彈球效果），cycle_interpolator （週期運動），decelerate_interpolator （減速） ，linear_interpolator （勻速），overshoot_interpolator （快速完成動畫，超出再回到結束樣式）
如果上述9個插值器無法滿足需求，還可以自定義插值器：
c. 自定義插值器
- 本質：根據動畫的進度（0%-100%）計算出當前屬性值改變的百分比
- 具體使用：自定義插值器需要實現
Interpolator/TimeInterpolator接口 & 複寫getInterpolation（）方法
估值器（TypeEvaluator）
- 定義：一個接口
- 作用：設置 屬性值 從初始值過渡到結束值 的變化具體數值
b. 自定義估值器
- 本質：根據 插值器計算出當前屬性值改變的百分比 & 初始值 & 結束值 來計算 當前屬性具體值
兩者區別:
- 插值器（
Interpolator）決定 值 的變化模式（勻速、加速blabla） - 估值器（
TypeEvaluator）決定 值 的具體變化數值
3.2 屬性動畫兩個核心類：
- ValueAnimator類 與 ObjectAnimator類
ValueAnimator類
- 實現動畫的原理：通過不斷控制 值 的變化，再不斷 手動 賦給對象的屬性，從而實現動畫效果。
ValueAnimator類中有3個重要方法：
ValueAnimator.ofInt（int values）: (作用：將初始值 以整型數值的形式 過渡到結束值)ValueAnimator.ofFloat（float values）:(作用：將初始值 以浮點型數值的形式 過渡到結束值)ValueAnimator.ofObject（int values）: (作用：將初始值 以對象的形式 過渡到結束值)
以 ValueAnimator.ofInt爲例
- 實現的動畫效果：按鈕的寬度從
150px放大到500px
ObjectAnimator類
- 實現動畫的原理：通過不斷控制 值 的變化，再不斷 自動 賦給對象的屬性，從而實現動畫效果。是 直接對象屬性進行操作；
- 繼承自
ValueAnimator類，即底層的動畫實現機制是基於ValueAnimator類 - 如果需要採用
ObjectAnimator類實現動畫效果，那麼需要操作的對象就必須有該屬性的set（） & get（）
由於 系統實現的四種動畫Alpha，Translation，Scale，Rotation 對應屬性set&get(),所以我們直接可以用使用：
如下：
ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(view,"rotation",0f,180f,0f);
objectAnimator.setDuration(1000);
objectAnimator.setRepeatCount(3);
objectAnimator.start();
4. 動畫開源庫--- Lottie
4.1 Lottie簡介 ：
- Lottie 是Airbnb公司開源的一個面向 iOS、Android、React Native 的動畫庫， 能分析 Adobe After Effects 導出的動畫並且能讓原生 App 像使用靜態素材一樣使用這些動畫，完美實現動畫效果。
4.2 環境搭建 ：
- Adobe After Effects
- Bodymovin插件
4.3 兼容性：
- Web ： 調用Bodymovin提供的js庫 — bodymovin.js
- Android ：支持API 16及以上
- iOS/MacOS ：支持iOS 8+和MacOS 10.10+
- React Native ： 要求Android支持庫版本爲26，即compileSdkVersion 26
4.4 Lottie動畫庫使用：
- compile 'com.airbnb.android:lottie:2.1.0' 引入依賴
- 將我們所需要的動畫文件XX.json保存在app/src/main/assets文件裏
- 佈局中添加 LottieAnimationView ：
- 代碼中運行：
animationView.setAnimation("love.json");
animationView.loop(true);
animationView.playAnimation();
- 運行效果如下：
4.5 文件校驗 及 官方社區精選動畫下載
- 在線校驗：針對UE提供沒有圖片資源的JSON動畫文件校驗。
https://www.lottiefiles.com/preview
- 官方社區精選動畫：https://lottiefiles.com/featured
4.6、解析繪製
4.7、性能
- 在未開啓硬件加速的情況下，幀率、內存，CPU都比屬性動畫差，開啓硬件加速後，性能差不多。
- 如果沒有遮罩、陰影和蒙版，那麼性能和內存非常好，沒有bitmap創建，大部分操作都是簡單的cavas繪製。