Android-Animation (1) 視圖動畫

Android-Animation （1） 視圖動畫

學習自：

Keegan小鋼 ：http://keeganlee.me/post/android/20151003

Carson_Ho ： https://www.jianshu.com/p/733532041f46

Android 框架提供了兩種動畫體系：

視圖動畫（View Animation）：

應用於各類View，能夠作一些位置、大小、旋轉和透明度的簡單轉變。改變的只是View的繪製效果。 xml 文件存放在 res/anim/目錄下。

屬性動畫（Property Animation）:

它是在 andorid3.0 引入的動畫體系，提供了更多特性和靈活性，能夠應用於任何對象。屬性動畫能夠改變真正的屬性。xml 文件存放在 res/animator/ 目錄下。

1.alpha （透明度動畫）

實現透明度漸變更畫效果，淡入淡出效果。

屬性	說明
duration	持續時間
fromAlpha	開始時透明度，0.0全透明，1.0不透明
toAlpha	結束時透明度，0.0全透明，1.0不透明

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

效果圖：

添加動畫到 View 中：

iv_.startAnimation(AnimationUtils.loadAnimation(this, R.anim.test_anim_alpha))

獲取 AlphaAnimation 對象，對動畫進行重用

var animAlpha = AnimationUtils.loadAnimation(this, R.anim.test_anim_alpha) as AlphaAnimation

2.scale （縮放動畫）

實現縮放的動畫效果

屬性	描述
duration	持續時間
pivotX	縮放軸點X， 用百分比表示，0%表示左邊緣，100%表示右邊緣
pivotY	縮放軸點Y，用百分比表示，0%表示頂邊緣，100%表示底邊緣
fromXScale	開始時X座標縮放尺寸
fromYScale	開始時Y座標縮放尺寸
toXScale	結束時X座標縮放尺寸
toYScale	結束時Y座標縮放尺寸

上邊幾個縮放尺寸，0.0表示縮放到沒有，1.0正常大小，大於1.0 表示放大

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

效果圖：

3. translate （平移動畫）

實現位置移動的動畫效果，能夠是垂直方向或者水平方向的。

屬性	說明
fromXDelta	起始位置X座標的偏移量
toXDelta	結束位置X座標的偏移量
fromYDelta	起始位置Y座標的偏移量
toYDelta	結束位置Y座標的偏移量

座標值有三種格式：

以百分比 「%」 結束，表示相對於View 自己的百分比位置。

以 「%p」 結束，表示相對於View的父View的百分比位置。

沒有後綴，相對於View自己具體的像素值。

從左到右移動：

代碼：

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

效果圖：

4.rotate (旋轉動畫)

實現旋轉的動畫效果

屬性	說明
fromDegrees	旋轉開始角度
toDegrees	旋轉結束角度
pivoX	旋轉中心點的X座標
pivoY	旋轉中心點的Y座標

旋轉180度：

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

效果圖：

5.set

set 標籤能夠將多個動畫組合起來，變成一個動畫集。

5.1 縮放的同時又移動

代碼：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000">
    <translate
        android:fromXDelta="0"
        android:fromYDelta="0"
        android:toXDelta="100%"
        android:toYDelta="0" />
    <scale
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="0%"
        android:pivotY="100%"
        android:toXScale="1.5"
        android:toYScale="1.5" />
</set>

效果圖：

5.2 縮放的同時又改變透明度

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000">
    <scale android:fromYScale="0%"
        android:fromXScale="0%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotY="50%"
        android:pivotX="50%" />
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"/>
</set>

效果圖：

6. 通用屬性

屬性	說明
duration	動畫從開始到結束持續的時長，單位爲毫秒
fillAfter	動畫執行完後，View是否會停留在動畫的最後一幀；默認爲false
fillBefore	動畫執行完後，View是否回到動畫執行前的狀態；默認爲true
repeatCount	動畫重複執行的次數，默認0，即不重複；可設置爲-1或infinite,表示無限重複
repeatMode	動畫重複執行的模式： restart ：動畫重複執行時從起點開始，默認值 reverse ：動畫會反方向執行
startOffset	設置動畫執行以前的等待時長，單位爲毫秒。
zAdjustment	表示被設置動畫的內容在動畫運行時在 Z 軸上的位置，取值： normal：默認值，保持內容在 Z 軸上的位置不變 top ：保持在 Z 軸最上層 bottom：保持在 Z軸最下層
interpolator	設置動畫速率的變化。如加速、減速、勻速等。

7.interpolator 插值器

經過interpolator 能夠定義動畫速率變換的方式，好比加速、減速、勻速等。每種Interpolator的子類。

能夠實現非線性運動效果。

系統提供的 9種Interpolator

Interpolator class	Resource ID And Description
AccelerateDecelerateInterpolator	@android:anim/accelerate_decelerate_interpolator 在動畫開始與結束時速率改變比較慢，在中間的時候加速
AccelerateInterpolator	@android:anim/accelerate_interpolator 在動畫開始時速率改變比較慢，而後開始加速
AnticipateInterpolator	@android:anim/anticipate_interpolator 動畫開始的時候向後而後往前拋
AnticipateOvershootInterpolator	@android:anim/anticipate_overshoot_interpolator 動畫開始的時候向後而後向前拋，會拋超過目標值後再返回到最後的值
BounceInterpolator	@android:anim/bounce_interpolator 動畫結束的時候會彈跳
CycleInterpolator	@android:anim/bounce_interpolator 動畫循環作週期運動，速率改變沿着正弦曲線
DecelerateInterpolator	@android:anim/decelerate_interpolator 在動畫開始時速率改變比較快，而後開始減速
LinearInterpolator	@android:anim/decelerate_interpolator 動畫勻速播放
OvershootInterpolator	@android:anim/overshoot_interpolator 動畫向前拋，會拋超過最後值，而後再返回

設置 Interpolator 的兩種方式：

（1） 直接在動畫 XML 資源文件種指定資源ID

android:interpolator="@android:anim/overshoot_interpolator"

（2） 代碼設置

var animAlpha = AnimationUtils.loadAnimation(this, R.anim.test_anim_alpha) as AlphaAnimation //獲取動畫對象實例
var overshootInterpolator = OvershootInterpolator() //聲明插值器
animAlpha.interpolator=overshootInterpolator //設置插值器
iv_temp3.startAnimation(animAlpha) //設置動畫

系統內置插入器效果圖：

代碼：

tv_1.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = AccelerateDecelerateInterpolator() })
tv_2.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = AccelerateInterpolator() })
tv_3.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = AnticipateInterpolator() })
tv_4.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = AnticipateOvershootInterpolator() })
tv_5.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = BounceInterpolator() })
tv_6.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = CycleInterpolator(1f) })
tv_7.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = DecelerateInterpolator() })
tv_8.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = LinearInterpolator() })
tv_9.startAnimation(TranslateAnimation(0f, 500f, 0f, 0f).
        apply { fillAfter = true; duration = 4000;interpolator = OvershootInterpolator() })

8.監聽動畫

//獲取動畫對象實例
var animAlpha = AnimationUtils.loadAnimation(this, R.anim.test_anim_alpha) as AlphaAnimation 
animAlpha.setAnimationListener(object: Animation.AnimationListener{
    override fun onAnimationRepeat(animation: Animation?) {
        //動畫重複
    }
    override fun onAnimationEnd(animation: Animation?) {
        //動畫結束
    }

    override fun onAnimationStart(animation: Animation?) {
        //動畫開始
    }
})

9. 應用場景

• 經常使用於視圖View的一些標準動畫效果：平移、旋轉、縮放、透明度
• 其餘應用場景：Activity 切換效果；Fragment 切換效果；視圖組(ViewGroup)中子元素的出場效果。