Android動畫了解—其它動畫

其它的動畫了解

1. 爲 ViewGroup 對象的佈局更改添加動畫效果

名稱	說明
APPEARING	當一個View在ViewGroup中出現時，對此View設置的動畫
CHANGE_APPEARING	當一個View在ViewGroup中出現時，對此View對其他View位置造成影響，對其他View設置的動畫。
DISAPPEARING	當一個View在ViewGroup中消失時，對此View設置的動畫。
CHANGE_DISAPPEARING	當一個View在ViewGroup中消失時，對此View對其他View位置造成影響，對其他View設置的動畫。

LayoutTransition setLayoutTransition

舉個栗子

LayoutTransition transition = new LayoutTransition();
transition.setDuration(1000);
transition.setAnimator(LayoutTransition.APPEARING, 
	transition.getAnimator(LayoutTransition.APPEARING)); //
transition.setAnimator(LayoutTransition.CHANGE_APPEARING, 
	transition.getAnimator(LayoutTransition.CHANGE_APPEARING));
transition.setAnimator(LayoutTransition.DISAPPEARING, 
	transition.getAnimator(LayoutTransition.DISAPPEARING));
transition.setAnimator(LayoutTransition.CHANGE_DISAPPEARING, 		
	transition.getAnimator(LayoutTransition.CHANGE_DISAPPEARING));
viewGroup.setLayoutTransition(transition); // 設置 Layout Transition

2. 使用 StateListAnimator 爲視圖狀態更改添加動畫效果

AnimatorInflater.loadStateListAnimator

# xml 中設置  stateListAnimator
<Button
	android:id="@+id/add_btn"
	android:stateListAnimator="@xml/animate_scale"

# 代碼中設置
button.setStateListAnimator(AnimatorInflater.loadStateListAnimator(this, R.xml.animate_scale));

# animate_scale.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- the pressed state; increase x and y size to 150% -->
    <item android:state_focused="true">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1.5"
                android:valueType="floatType"/>
        </set>
    </item>
    <!-- the default, non-pressed state; set x and y size to 100% -->
    <item android:state_focused="false">
        <set>
            <objectAnimator android:propertyName="scaleX"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
            <objectAnimator android:propertyName="scaleY"
                android:duration="@android:integer/config_shortAnimTime"
                android:valueTo="1"
                android:valueType="floatType"/>
        </set>
    </item>
</selector>

3. Fling 動畫

// 導入方式
dependencies {
	implementation 'com.android.support:support-dynamic-animation:28.0.0'
}

// 代碼方式
FlingAnimation fling = new FlingAnimation(view, DynamicAnimation.SCROLL_X);
設置速度，摩擦力，動畫值的範圍
// 以下示例展示了水平投擲。速度跟蹤器捕獲的速度爲 velocityX，且滾動邊界值設置爲 0 和 maxScroll。摩擦力設置爲 1.1。
fling.setStartVelocity(-velocityX)
            .setMinValue(0)
            .setMaxValue(maxScroll)
            .setFriction(1.1f)
            .start();

setStartVelocity(float)：設置起始加速度，單位是改變的屬性每秒，默認是0
setMinValue(float)：設置動畫的最小值。這個值是創建FlingAnimation中的屬性值的最小值，也就是說屬性值不過小於該值。
setMaxValue(float)：與上面類似，只不過是最大值，min<=屬性值<=max。
setFriction(float)：設置摩擦力，學過力學的都知道，沒有摩擦力，那麼將一直運動下去；而摩擦力越大，那麼將會越快停止，默認值是1。

參考資料： https://developer.android.com/guide/topics/graphics/fling-animation

4. spring physics 動畫

導入方式

dependencies {
	def dynamicanimation_version = "1.0.0"
	implementation 'androidx.dynamicanimation:dynamicanimation:$dynamicanimation_version'
}

小栗子

final View img = findViewById(R.id.imageView);
// Setting up a spring animation to animate the view’s translationY property with the final
// spring position at 0.
final SpringAnimation springAnim = new SpringAnimation(img, DynamicAnimation.TRANSLATION_Y, 0);

TRANSLATION_X 表示左側座標。
TRANSLATION_Y 表示頂部座標。
TRANSLATION_Z 表示視圖相對於其高度的深度。

ROTATION、ROTATION_X 和 ROTATION_Y：這些屬性用於控制視圖圍繞軸心點進行的 2D（rotation屬性）和 3D 旋轉。

SCROLL_X 和 SCROLL_Y：這些屬性分別表示視圖距離源左側和頂部邊緣的滾動偏移量（以像素爲單位）。它還以頁面滾動的距離來表示位置。

ALPHA：表示視圖的 Alpha 透明度。該值默認爲 1（不透明），值爲 0 則表示完全透明（不可見）。

參考資料：https://developer.android.com/guide/topics/graphics/spring-animation

5. 開源動畫兼容庫 NineOldAndroids

Api level 11(Android 3.0纔開始) 推出 的 Property Animation API，但是在 3.0以下的版本無法使用。

爲了解決3.0以下的問題，大神 JakeWharton 編寫了 NineOldAndroids 這個庫，任意的Android版本上都可以使用 API 了！！！

這個庫中會根據我們運行的機器判斷其SDK版本，如果是API3.0以上則使用Android自帶的動畫類，否則就使用Nine Old Androids庫中，這是一個兼容庫。

官方資料

項目地址

6. SVG 動畫

實現複雜動畫的一種方式，SVG(Scalable vector Graphics，可縮放矢量圖形)，Android 5.0 開始支持 SVG圖形；5.0以下的機型，添加 appcompat-v7:23.4.0支持兼容。

一個根據 狀態切換 的簡單的DEMO —— SVG動畫

// strikethru_on.xml   => 通過SVG圖片轉換成 VectorDrawable
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="64dp"
    android:height="64dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    // 眼睛圖案
    <path
        android:fillColor="#FFFFFF"
        android:pathData="M12,4.5C7,4.5 2.73,7.61 1,12c1.73,4.39 6,7.5 11,7.5s9.27,-3.11 11,-7.5c-1.73,-4.39 -6,-7.5 -11,-7.5zM12,17c-2.76,0 -5,-2.24 -5,-5s2.24,-5 5,-5 5,2.24 5,5 -2.24,5 -5,5zM12,9c-1.66,0 -3,1.34 -3,3s1.34,3 3,3 3,-1.34 3,-3 -1.34,-3 -3,-3z" />
	
	// 斜線的終點
    <path
        android:name="strike"
        android:fillColor="#FFFFFF"
        android:pathData="M4,4L20,20L19,21L3,5Z" />

</vector>

反之 strikethru_off.xml 的預覽圖效果(唯一不同是 strike 的 pathData爲 “M4,4L20,20L19,21L3,5Z” 一條斜線)

根據焦點狀態切換不同的 SVG動畫

// strikethru_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<animated-selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    // 上焦點的時候爲 strikethru_on
    <item
        android:id="@+id/checked"
        android:drawable="@drawable/strikethru_on"
        android:state_focused="true" />
    
    // 失去焦點的時候爲 strikethru_off
    <item
        android:id="@+id/unchecked"
        android:drawable="@drawable/strikethru_off" />

    // unchecked -> 過渡(strikethru_off_to_on) -> checked(最終狀態) 
    <transition
        android:fromId="@id/unchecked"
        android:toId="@id/checked"
        android:drawable="@drawable/strikethru_off_to_on" />
    
    // checked -> 過渡(strikethru_on_to_off) -> unchecked(最終狀態)
    <transition
        android:fromId="@id/checked"
        android:toId="@id/unchecked"
        android:drawable="@drawable/strikethru_on_to_off" />

</animated-selector>

這裏拿出上焦後的所有SVG動畫來了解整個思路
從 strikethru_off 到 strikethru_on 的效果，中間穿插了過渡的動畫效果.
strikethru_off_to_on.xml 將 需要做動畫效果的 strike 的這條直線 與 動畫 strike_toggle_on 關聯起來.

strike 是繪製一條斜線

// strikethru_off_to_on.xml 
<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/strikethru_off">

    <!-- Vector圖形(strike)與動畫關聯(strike_toggle_on) -->
    <target
        android:name="strike"
        android:animation="@animator/strike_toggle_on" />

</animated-vector>

// strike_toggle_on.xml pathData表示的是 vector，valueFrom的矢量 到 valueTo的矢量 的動畫
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@android:integer/config_shortAnimTime"
    android:interpolator="@android:interpolator/accelerate_decelerate"
    android:propertyName="pathData"
    android:valueFrom="M4,4L20,20L19,21L3,5Z"
    android:valueTo="M4,4L4,4L3,5L3,5Z"
    android:valueType="pathType" />

最後 SVG + 動畫 就完成了，就像我們開頭看到的效果一樣

實現一個複雜的SVG動畫效果

代碼太多，我就不貼代碼，感興趣的可以自己去看看！！！
SVG生成的連接
SVG生成的drawable文件

性能上的比較

Android Vector svg相關資料
https://www.youtube.com/watch?v=fgbl34me3kk
http://blog.chengyunfeng.com/?p=1028 SVG複雜動畫教程
https://zhuanlan.zhihu.com/p/61678845
https://zhuanlan.zhihu.com/p/22013005

一些SVG相關工具
http://inloop.github.io/svg2android/ SVG轉換工具
https://github.com/sketch-hq/svgo-compressor
https://romannurik.github.io/AndroidIconAnimator/ SVG動畫生成工具

7. Lottie

動效 AE軟件 使用 bodymovin插件 導出 json數據文件(data.json)，最後在Android 中使用. (Lottie做動畫，專業的東西交給專業人做，真正解放程序員的生產力。)

導入方式

dependencies {
    ...
    implementation "com.airbnb.android:lottie:3.4.0"
    ...
}

使用方式

<com.airbnb.lottie.LottieAnimationView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="data.json"
    app:lottie_loop="true"
    app:lottie_autoPlay="true" />
    
// 或者代碼中導入    
animationView.setAnimation("data.json"); 

看看幾個官方的效果


使用場景

• 啓動(splash)動畫：典型場景是APP logo動畫的播放
• 上下拉刷新動畫：所有APP都必備的功能，利用 Lottie 可以做的更加簡單酷炫了
• 加載(loading)動畫：典型場景是網絡請求的loading動畫
• 提示(tips)動畫：典型場景是空白頁的提示
• 按鈕(button)動畫：典型場景如switch按鈕、編輯按鈕、播放按鈕等按鈕的切換過渡動畫
• 禮物(gift)動畫：典型場景是直播類APP的高級動畫播放
• 視圖轉場動畫（通過 LOTAnimationTransitionController 來實現 presentViewController 和 dismissViewControllerAnimated 轉場動畫）

感興趣的可以查查資料

json示例

官方資料

Android使用文檔

Lottie開源動畫庫介紹與使用示例

一些控件動畫庫瞭解

---

Android動畫了解—RecyclerView Animator<=上個章節 下個章節=> Android動畫了解—擴展知識