1. 程式人生 > >Android - 動畫(幀動畫,補間動畫,屬性動畫,以及插值器)

Android - 動畫(幀動畫,補間動畫,屬性動畫,以及插值器)

一: 動畫的分類

  1. 幀動畫
  2. 補間動畫
  3. 屬性動畫

二:解析

1. 幀動畫

(1)定義

這些圖片是將一些列的drawable組合在一起,進行連續的播放, 類似於以前電影源用膠捲進行動畫播放

(2)有圖有真相

(3)準備圖片

看著是不是還行,哈哈,下面說一下實現,首先準備幾個圖片,百度吧,啥都有,還有美女動圖,哈哈,準備好圖片以後就開始我們的專案咯

(4)建立XML 配置檔案

  1. 在res下建立一個drawable資料夾,在其中建立一個anim.xml
  2. 在 <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)使用

  1. 建立res/anim的資料夾 , 在anim中定義指定標籤的佈局檔案
  2. 在動態程式碼中載入補間動畫
  3. 找到指定的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插值器

這篇文章對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();// 播放動畫
    }