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

老婆保佑,代碼無BUG

目錄

  • 一: 動畫的分類
  • 二:解析
      1. 幀動畫
      1. 補間動畫
      • 屬性講解
      • interpolator插值器
      1. 屬性動畫
    • ValueAnimator
    • ObjectAnimator

一: 動畫的分類

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

二:解析

1. 幀動畫

(1)定義

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

(2)有圖有真相

(3)準備圖片

看著是不是還行,哈哈,下面說一下實現(xiàn),首先準備幾個圖片,百度吧,啥都有,還有美女動圖,哈哈,準備好圖片以后就開始我們的項目咯

(4)創(chuàng)建XML 配置文件

  1. 在res下創(chuàng)建一個drawable文件夾,在其中創(chuàng)建一個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進行縮放,旋轉(zhuǎn),位移,透明度的變化 (對前面的4個效果可以組合實用)

(2)屬性講解

屬性名稱 作用
Alpha 透明度
Rotate 旋轉(zhuǎn)
Canle 縮放
Translate 位移
Set 組合

先有個概念,后續(xù)會對每個屬性詳細講解。。。

(3)使用

  1. 創(chuàng)建res/anim的文件夾 , 在anim中定義指定標簽的布局文件
  2. 在動態(tài)代碼中加載補間動畫
  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 動畫執(zhí)行的時間 以毫秒為單位
fillEnabled 動畫結(jié)束時,是否還原到開始動畫前的狀態(tài) true或者false
fillBefore 與fillEnabled相同
fillAfter 動畫結(jié)束時,是否將保持動畫最后時的狀態(tài) true或者false
repeatMode 重復類型 reverse:表示倒序回訪,restart:表示重新放一遍,這個屬性必須與repeatCount聯(lián)合使用,因為牽扯到重復,即重復播放時的播放類型。
repeatCount 動畫重復的次數(shù) infinite:表示無限循環(huán)
interpolator 設(shè)定的插值器,它主要用來為動畫設(shè)置一些特殊的效果,比方說:加速運動、減速運動、動畫結(jié)束的時候彈起等等。 下面會詳細介紹

alpha屬性詳解

屬性名稱 作用 備注
fromAlpha 動畫開始時的透明度 變化范圍為0.0-1.0,0.0表示完全透明,1.0表示完全不透明
toAlpha 動畫結(jié)束時的透明度 同上

rotate屬性詳解

屬性名稱 作用 備注
fromDegrees 動畫開始時旋轉(zhuǎn)的角度位置 float類型;正值代表順時針方向度數(shù),負值代碼逆時針方向度數(shù)
toDegrees 動畫結(jié)束時旋轉(zhuǎn)到的角度位置 同上
pivotX 旋轉(zhuǎn)點X軸坐標 排版問題,請看下面的備注
pivotY 旋轉(zhuǎn)點Y軸坐標 同上

pivotX:float類型,可以是數(shù)值、百分數(shù)、百分數(shù)p三種樣式,比如50、50%、50%p; 當為數(shù)值時,表示在當前View的左上角,即原點處加上50px,做為旋轉(zhuǎn)點X坐標,如果是50%;表示在當前控件的左上角加上自己寬度的50%做為旋轉(zhuǎn)點X坐標;如果是50%p,那么就是表示在當前控件的左上角加上父控件寬度的50%做為旋轉(zhuǎn)點X坐標

canle屬性詳解

屬性名稱 作用 備注
fromXScale 起始的X方向上相對自身的縮放比例 型float,比如1.0代表自身無變化,0.5代表起始時縮小一倍,2.0代表放大一倍
toXScale 結(jié)尾的X方向上相對自身的縮放比例 類型float
fromYScale 起始的Y方向上相對自身的縮放比例 類型float
toYScale 結(jié)尾的Y方向上相對自身的縮放比例 類型float
pivotX 縮放起點X軸坐標 可以是數(shù)值、百分數(shù)、百分數(shù)p
pivotY 縮放起點Y軸坐標 取值及意義與pivotX一樣

Translate屬性詳解

屬性名稱 作用 備注
fromXDelta 起始點X軸坐標 可以是數(shù)值、百分數(shù)、百分數(shù)p 三種樣式
fromYDelta 起始點Y坐標 同上
toXDelta 結(jié)束點X坐標
toYDelta 結(jié)束點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定義了動畫變化的速率,它允許基礎(chǔ)動畫(alpha, scale, translate, rotate)加速,減速,重復變化等等。在補間動畫中,我們一般只定義關(guān)鍵幀(首幀和尾幀),然后由系統(tǒng)自動生成中間幀,生成中間幀的這個過程可以成為“插值”。插值器定義了動畫變化的速率,提供不同的函數(shù)定義變化值相對于時間的變化規(guī)則,可以定義各種各樣的非線性變化函數(shù),比如加速、減速等。下面是幾種常見的插值器:

Interpolator對象 功能作用 屬性講解
AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator 先加速再減速
AccelerateInterpolator @android:anim/accelerate_interpolator 加速 android:factor 浮點值,加速速率,默認為1; android:tension浮點值,起始點后退的張力、拉力數(shù),默認為2
AnticipateInterpolator @android:anim/anticipate_interpolator 先回退一小步然后加速前進
AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator 先回退一小步然后加速前進,超出終點一小步后再回到終點 android:tension 同上; android:extraTension 浮點值,拉力的倍數(shù),默認為1.5(2 * 1.5)
BounceInterpolator @android:anim/bounce_interpolator 最后階段彈球效果
CycleInterpolator @android:anim/cycle_interpolator 周期運動 android:cycles整數(shù)值,循環(huán)的個數(shù),默認為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)定義

通過改變?nèi)魏螌ο蟮膶傩?在屬性改變的過程當中產(chǎn)生的動畫 (3.0以后提出的)
比如:顏色 字體的顏色是紅色 最后最后的顏色是綠色 (屬性動畫體現(xiàn)該變化效果) 更改控件的寬度高度等等,和補間動畫相比他是改變了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);//設(shè)置時間
        oa.start();// 播放動畫
    }
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容