Android - 動畫(幀動畫,補間動畫,屬性動畫,以及插值器)
一: 動畫的分類
- 幀動畫
- 補間動畫
- 屬性動畫
二:解析
1. 幀動畫
(1)定義
這些圖片是將一些列的drawable組合在一起,進行連續的播放, 類似於以前電影源用膠捲進行動畫播放
(2)有圖有真相
(3)準備圖片
看著是不是還行,哈哈,下面說一下實現,首先準備幾個圖片,百度吧,啥都有,還有美女動圖,哈哈,準備好圖片以後就開始我們的專案咯
(4)建立XML 配置檔案
- 在res下建立一個drawable資料夾,在其中建立一個anim.xml
- 在 <animation-list>標籤中將一系列的圖片組合在一起
<?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <!-- oneshot 是否只播放一次 --> <item android:drawable="@drawable/pic_01" android:duration="200" /> <!-- duration 延時時間 單位毫秒 --> <item android:drawable="@drawable/pic_02" android:duration="200" /> <item android:drawable="@drawable/pic_03" android:duration="200" /> <item android:drawable="@drawable/pic_04" android:duration="200" /> <item android:drawable="@drawable/pic_05" android:duration="200" /> <item android:drawable="@drawable/pic_06" android:duration="200" /> <item android:drawable="@drawable/pic_07" android:duration="200" /> </animation-list>
(5) 如何在程式碼中使用
//開始動畫 private void init_startAnim() { anim = (AnimationDrawable) getResources().getDrawable(R.drawable.anim); img.setBackgroundDrawable(anim);//img 是我們放在佈局檔案中的ImageView anim.start(); } //停止動畫 private void init_stopAnim() { if (anim != null) { anim.stop(); } }
2. 補間動畫
本文很多參考這篇文章,有興趣的小夥伴,可以點選詳細檢視
(1) 定義
指的View可以是TextView,Button等等 可以讓指定的View進行縮放,旋轉,位移,透明度的變化 (對前面的4個效果可以組合實用)
(2)屬性講解
屬性名稱 | 作用 |
---|---|
Alpha | 透明度 |
Rotate | 旋轉 |
Canle | 縮放 |
Translate | 位移 |
Set | 組合 |
先有個概念,後續會對每個屬性詳細講解。。。
(3)使用
- 建立
res/anim
的資料夾 , 在anim
中定義指定標籤的佈局檔案 - 在動態程式碼中載入補間動畫
-
找到指定的View播放動畫
還有比我還細心的嘛
anim_test中的屬性
<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="1500"
android:fillAfter="true"
android:fromAlpha="1.0"
android:repeatCount="infinite"
android:toAlpha="0.1" />
動畫屬性的介紹,這裡很重要
(4) 屬性講解
Animaton屬性講解(上訴的動畫都有這些屬性,是父類)
屬性名稱 | 作用 | 備註 |
---|---|---|
duration | 動畫執行的時間 | 以毫秒為單位 |
fillEnabled | 動畫結束時,是否還原到開始動畫前的狀態 | true或者false |
fillBefore | 與fillEnabled相同 | 無 |
fillAfter | 動畫結束時,是否將保持動畫最後時的狀態 | true或者false |
repeatMode | 重複型別 | reverse:表示倒序回訪,restart:表示重新放一遍,這個屬性必須與repeatCount聯合使用,因為牽扯到重複,即重複播放時的播放型別。 |
repeatCount | 動畫重複的次數 | infinite:表示無限迴圈 |
interpolator | 設定的插值器,它主要用來為動畫設定一些特殊的效果,比方說:加速運動、減速運動、動畫結束的時候彈起等等。 | 下面會詳細介紹 |
alpha屬性詳解
屬性名稱 | 作用 | 備註 |
---|---|---|
fromAlpha | 動畫開始時的透明度 | 變化範圍為0.0-1.0,0.0表示完全透明,1.0表示完全不透明 |
toAlpha | 動畫結束時的透明度 | 同上 |
rotate屬性詳解
屬性名稱 | 作用 | 備註 |
---|---|---|
fromDegrees | 動畫開始時旋轉的角度位置 | float型別;正值代表順時針方向度數,負值程式碼逆時針方向度數 |
toDegrees | 動畫結束時旋轉到的角度位置 | 同上 |
pivotX | 旋轉點X軸座標 | 排版問題,請看下面的備註 |
pivotY | 旋轉點Y軸座標 | 同上 |
pivotX
:float型別,可以是數值、百分數、百分數p三種樣式,比如50、50%、50%p; 當為數值時,表示在當前View的左上角,即原點處加上50px,做為旋轉點X座標,如果是50%;表示在當前控制元件的左上角加上自己寬度的50%做為旋轉點X座標;如果是50%p,那麼就是表示在當前控制元件的左上角加上父控制元件寬度的50%做為旋轉點X座標
canle屬性詳解
屬性名稱 | 作用 | 備註 |
---|---|---|
fromXScale | 起始的X方向上相對自身的縮放比例 | 型float,比如1.0代表自身無變化,0.5代表起始時縮小一倍,2.0代表放大一倍 |
toXScale | 結尾的X方向上相對自身的縮放比例 | 型別float |
fromYScale | 起始的Y方向上相對自身的縮放比例 | 型別float |
toYScale | 結尾的Y方向上相對自身的縮放比例 | 型別float |
pivotX | 縮放起點X軸座標 | 可以是數值、百分數、百分數p |
pivotY | 縮放起點Y軸座標 | 取值及意義與pivotX一樣 |
Translate屬性詳解
屬性名稱 | 作用 | 備註 |
---|---|---|
fromXDelta | 起始點X軸座標 | 可以是數值、百分數、百分數p 三種樣式 |
fromYDelta | 起始點Y座標 | 同上 |
toXDelta | 結束點X座標 | 無 |
toYDelta | 結束點Y座標 | 無 |
Set屬性詳解
他沒有特殊的屬性,因為他的作用只是將所有屬性融合在一起
例如
<?xml version="1.0" encoding= "utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:fillAfter="true">
<alpha
android:fromAlpha= "0.0"
android:toAlpha= "1.0"
android:duration= "3000" />
<scale
android:fromXScale= "0.0"
android:toXScale= "1.0"
android:fromYScale= "0.0"
android:toYScale= "1.0"
android:pivotX= "50%"
android:pivotY= "50%"
android:duration= "3000" />
<rotate
android:fromDegrees= "0"
android:toDegrees= "720"
android:pivotX= "50%"
android:pivotY= "50%"
android:duration= "3000"/>
<translate
android:startOffset= "3000"
android:fromXDelta= "0"
android:fromYDelta= "0"
android:toXDelta= "85"
android:toYDelta= "0"
android:duration= "1000" />
<alpha
android:startOffset= "4000"
android:fromAlpha= "1.0"
android:toAlpha= "0.0"
android:duration= "1000" />
</set>
interpolator插值器
interpolaotor定義了動畫變化的速率,它允許基礎動畫(alpha, scale, translate, rotate)加速,減速,重複變化等等。在補間動畫中,我們一般只定義關鍵幀(首幀和尾幀),然後由系統自動生成中間幀,生成中間幀的這個過程可以成為“插值”。插值器定義了動畫變化的速率,提供不同的函式定義變化值相對於時間的變化規則,可以定義各種各樣的非線性變化函式,比如加速、減速等。下面是幾種常見的插值器:
Interpolator物件 | 功能作用 | 屬性講解 |
---|---|---|
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator |
先加速再減速 | 無 |
AccelerateInterpolator @android:anim/accelerate_interpolator |
加速 | android:factor 浮點值,加速速率,預設為1; android:tension 浮點值,起始點後退的張力、拉力數,預設為2 |
AnticipateInterpolator @android:anim/anticipate_interpolator |
先回退一小步然後加速前進 | |
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator |
先回退一小步然後加速前進,超出終點一小步後再回到終點 | android:tension 同上; android:extraTension 浮點值,拉力的倍數,預設為1.5(2 * 1.5) |
BounceInterpolator @android:anim/bounce_interpolator |
最後階段彈球效果 | 無 |
CycleInterpolator @android:anim/cycle_interpolator |
週期運動 | android:cycles 整數值,迴圈的個數,預設為1 |
DecelerateInterpolator @android:anim/decelerate_interpolator |
減速 | android:factor 浮點值,減速的速率,預設為1 |
LinearInterpolator @android:anim/linear_interpolator |
勻速 | 無 |
OvershootInterpolator @android:anim/overshoot_interpolator |
快速到達終點並超出一小步最後回到終點 | tension 浮點值,超出終點後的張力、拉力,預設為2 |
插值器的使用
<?xml version="1.0" encoding="utf-8"?>
<translate
xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/bounce_interpolator"
android:fromXDelta="0"
android:fromYDelta="0"
android:toXDelta="200"
android:toYDelta="300"
android:duration="5000">
</translate>
animation.setInterpolator(new OvershootInterpolator());
(5)程式碼中如何使用補間動畫
Animation animation = AnimationUtils.loadAnimation(MainActivity.this,R.anim.rotate);
ivGirl.startAnimation(animation);
3. 屬性動畫
推薦這文章,講的真的挺好的
(1)定義
通過改變任何物件的屬性,在屬性改變的過程當中產生的動畫 (3.0以後提出的)
比如:顏色 字型的顏色是紅色 最後最後的顏色是綠色 (屬性動畫體現該變化效果) 更改控制元件的寬度高度等等,和補間動畫相比他是改變了Object的屬性,而補間動畫不會改變View的屬性
ValueAnimator
private void init_ValueAnimator() {
ValueAnimator valueAnimator = ValueAnimator.ofFloat(0,100);
valueAnimator.setDuration(200);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float) animation.getAnimatedValue();
img.setTranslationX(value);
}
});
valueAnimator.start();
}
ObjectAnimator
private void init_ObjectAnimator() {
ObjectAnimator oa = ObjectAnimator.ofFloat(img, "rotationY", 0f, 360f);
oa.setDuration(3000);//設定時間
oa.start();// 播放動畫
}