android動(dòng)畫入門：View動(dòng)畫和幀動(dòng)畫

前言

Android 的動(dòng)畫可以分為三種：View 動(dòng)畫（view animation），幀動(dòng)畫（drawable animation）以及 屬性動(dòng)畫（property animation）。屬性動(dòng)畫是API11的新特性，不能再低版本中直接使用，但是我們可以通過兼容庫來使用它。接下來，本文會主要講解View動(dòng)畫和幀動(dòng)畫的使用，以及一些特殊的使用場景。

View 動(dòng)畫

View動(dòng)畫 即：補(bǔ)間動(dòng)畫（Tween Animation），通過對場景里的對象不斷地做圖像變換，從而產(chǎn)生動(dòng)畫效果，他是一種漸進(jìn)式的動(dòng)畫，并且View動(dòng)畫支持自定義。
View動(dòng)畫包括四種動(dòng)畫效果：平移動(dòng)畫，縮放動(dòng)畫，旋轉(zhuǎn)動(dòng)畫和透明度動(dòng)畫。

名稱 標(biāo)簽 效果
平移動(dòng)畫 <translate> 移動(dòng) View
縮放動(dòng)畫 <scale> 放大或縮小 View
旋轉(zhuǎn)動(dòng)畫 <rotate> 旋轉(zhuǎn) View
透明度動(dòng)畫 <alpha> 改變View的透明度

View 動(dòng)畫的使用，需要編寫動(dòng)畫xml文件，存放的路徑呢？ 是在res/anim/ 文件夾下面。下面來看一下，xml文件的語法格式：

  • 平移動(dòng)畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="30"
android:toXDelta="-80"
android:fromYDelta="30"
android:toYDelta="300"
/>
<!-- translate 位置轉(zhuǎn)移動(dòng)畫效果
        整型值:
            fromXDelta 屬性為動(dòng)畫起始時(shí) X坐標(biāo)上的位置    
            toXDelta   屬性為動(dòng)畫結(jié)束時(shí) X坐標(biāo)上的位置
            fromYDelta 屬性為動(dòng)畫起始時(shí) Y坐標(biāo)上的位置
            toYDelta   屬性為動(dòng)畫結(jié)束時(shí) Y坐標(biāo)上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時(shí)候，
                     默認(rèn)是以自己為相對參照物                
-->
</set>
  • 縮放動(dòng)畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
   <scale  
          android:interpolator=
                     "@android:anim/accelerate_decelerate_interpolator"
          android:fromXScale="0.0"
          android:toXScale="1.4"
          android:fromYScale="0.0"
          android:toYScale="1.4"
          android:pivotX="50%"
          android:pivotY="50%" />
</set>
<!-- 尺寸伸縮動(dòng)畫效果 scale
       屬性：interpolator 指定一個(gè)動(dòng)畫的插值器
      浮點(diǎn)型值：      
            fromXScale 屬性為動(dòng)畫起始時(shí) X坐標(biāo)上的伸縮尺寸    
            toXScale   屬性為動(dòng)畫結(jié)束時(shí) X坐標(biāo)上的伸縮尺寸     
        
            fromYScale 屬性為動(dòng)畫起始時(shí)Y坐標(biāo)上的伸縮尺寸    
            toYScale   屬性為動(dòng)畫結(jié)束時(shí)Y坐標(biāo)上的伸縮尺寸    
        
            說明:
                 以上四種屬性值    
    
                    0.0表示收縮到?jīng)]有 
                    1.0表示正常無伸縮     
                    值小于1.0表示收縮  
                    值大于1.0表示放大
        
            pivotX     屬性為動(dòng)畫相對于物件的X坐標(biāo)的開始位置
            pivotY     屬性為動(dòng)畫相對于物件的Y坐標(biāo)的開始位置
        
            說明:
                    以上兩個(gè)屬性值 從0%-100%中取值
                    50%為物件的X或Y方向坐標(biāo)上的中點(diǎn)位置
-->
  • 旋轉(zhuǎn)動(dòng)畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromDegrees="0" 
        android:toDegrees="+350"         
        android:pivotX="50%" 
        android:pivotY="50%" />
  <!-- rotate 旋轉(zhuǎn)動(dòng)畫效果
       屬性：interpolator 指定一個(gè)動(dòng)畫的插值器
             
       浮點(diǎn)數(shù)型值:
            fromDegrees 屬性為動(dòng)畫起始時(shí)物件的角度    
            toDegrees   屬性為動(dòng)畫結(jié)束時(shí)物件旋轉(zhuǎn)的角度 可以大于360度   

            說明:
                     當(dāng)角度為負(fù)數(shù)——表示逆時(shí)針旋轉(zhuǎn)
                     當(dāng)角度為正數(shù)——表示順時(shí)針旋轉(zhuǎn)              
                     (負(fù)數(shù)from——to正數(shù):順時(shí)針旋轉(zhuǎn))   
                     (負(fù)數(shù)from——to負(fù)數(shù):逆時(shí)針旋轉(zhuǎn)) 
                     (正數(shù)from——to正數(shù):順時(shí)針旋轉(zhuǎn)) 
                     (正數(shù)from——to負(fù)數(shù):逆時(shí)針旋轉(zhuǎn))       

            pivotX     屬性為動(dòng)畫相對于物件的X坐標(biāo)的開始位置
            pivotY     屬性為動(dòng)畫相對于物件的Y坐標(biāo)的開始位置

            說明:        以上兩個(gè)屬性值 從0%-100%中取值
                         50%為物件的X或Y方向坐標(biāo)上的中點(diǎn)位置
-->
</set>
  • 透明度動(dòng)畫
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:fromAlpha="0.1"
android:toAlpha="1.0"
/> 
<!-- 透明度控制動(dòng)畫效果 alpha
        浮點(diǎn)型值：
            fromAlpha 屬性為動(dòng)畫起始時(shí)透明度
            toAlpha   屬性為動(dòng)畫結(jié)束時(shí)透明度
            說明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之間的float數(shù)據(jù)類型的數(shù)字
-->
</set>

除了以上各個(gè)View動(dòng)畫 特有的屬性之外，他們還存在著許多共有的屬性。

屬性 描述
android:duration="long" 動(dòng)畫的持續(xù)時(shí)間，單位：毫秒
android:fillAfter=["true" , "false"] 動(dòng)畫結(jié)束時(shí)，是否保持動(dòng)畫的結(jié)束狀態(tài)
android:fillBefore=["true" , "false"] 動(dòng)畫結(jié)束時(shí)，是否恢復(fù)至最開始的狀態(tài)
android:fillEnabled =["true" , "false"] 同 android:fillBefore
android:interpolator ="@[package:]anim/interpolator_resource" 設(shè)置插值器
android:repeatCount="int" 動(dòng)畫的重復(fù)播放次數(shù)
android:repeatMode=["reverse" or "restart"] 重復(fù)類型，reverse：倒序回放，restart：從頭播放
android:startOffset="long" 調(diào)用start函數(shù)之后等待開始運(yùn)行的時(shí)間，單位為毫秒
android:zAdjustment = ["top","normal","bottom"] 動(dòng)畫運(yùn)行在Z軸上的位置，默認(rèn)值為normal

以上介紹都是各個(gè)View動(dòng)畫的單獨(dú)使用 ，通常的應(yīng)用場景中是需要我們 對各種View動(dòng)畫的結(jié)合使用,<set>標(biāo)簽表示一組動(dòng)畫的集合。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
         android:interpolator="@android:anim/accelerate_decelerate_interpolator"
         android:shareInterpolator="true">
  <alpha/>
  <scale/>
  <translate/>
  <rotate/>
<!-- 動(dòng)畫集合
       屬性：interpolator 指定一個(gè)動(dòng)畫的插值器
            shareInterpolator 表示集合中的動(dòng)畫是否共享同一個(gè)插值器
-->
</set>

如何應(yīng)用上面的動(dòng)畫呢？也很簡單，如下所示。

// AnimationUtils.loadAnimation(Context context, int id);
Animation animation = AnimationUtils.loadAnimation(this, R.anim.modal_in);
view.startAnimation(animation);

同時(shí)，通過Animation 的setAnimationListener 方法可以給View動(dòng)畫添加過程監(jiān)聽，接口如下：

public static interface AnimationListener {
        //動(dòng)畫開始        
        void onAnimationStart(Animator animation);
        //動(dòng)畫結(jié)束
        void onAnimationEnd(Animator animation);
        //動(dòng)畫重復(fù)
        void onAnimationRepeat(Animator animation);
    }

幀動(dòng)畫

幀動(dòng)畫是順序播放一組預(yù)先定義好的圖片，類似于電影播放。不同于View 動(dòng)畫，系統(tǒng)提供了另外一個(gè)雷AnimationDrawable 來使用幀動(dòng)畫。對于來說，使用起來比較簡單，這里首先需要用到另一個(gè) 集合標(biāo)簽 <animation-list>.

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/icon_refresh_0" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_1" android:duration="60"/>
    <item android:drawable="@drawable/icon_refresh_2" android:duration="60"/>
</animation-list>

文件的存放路徑：res/drawable/file_source.xml
然后將上述的 動(dòng)畫 作為View的背景并通過AnimationDrawable 來播放即可：

view.setBackgroundResource(R.drawable.file_source);
AnimationDrawable animationDrawable = (AnimationDrawable)view.getBackground();
animationDrawable.start();

幀動(dòng)畫使用比較簡單，但是比較容易引起OOM，所以在使用幀動(dòng)畫時(shí)，應(yīng)盡量避免使用過多尺寸的圖片。

View 動(dòng)畫的特殊使用

View 動(dòng)畫除了單純的用于 單個(gè)View 的動(dòng)畫形式， 還可以在一些其他的特殊的使用，例如：控制 ViewGroup 的子View 的出場效果，或者Activity的切換效果。

LayoutAnimation

用于設(shè)置 ViewGroup 子View 的顯示動(dòng)畫效果。 下面就讓我們通過一個(gè)例子來學(xué)習(xí)一下：

  1. 首先定義layoutAnimation 動(dòng)畫，它有三個(gè)屬性：
  • android:animation 指定子元素所要顯示的View動(dòng)畫效果
  • android:animationOrder 指定子元素的動(dòng)畫顯示順序 提供了三種模式：normal 正常順序 random 隨機(jī)播放 reverse 倒序
  • android:delay 指定子元素動(dòng)畫效果的延遲，比如說：view動(dòng)畫的 duration 設(shè)置為 500 ms，那么 delay 為 0.5 ，子元素之間將相差250ms 的依次播放動(dòng)畫。
// res/anim/anim_layout.xml
<layoutAnimation 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/anim_item"
    android:delay="0.5"
    android:animationOrder="normal">
</layoutAnimation>  

// res/anim/anim_item.xml 
<set 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:shareInterpolator="true"
    android:interpolator="@android:anim/accelerate_interpolator">
    <alpha
        android:fromAlpha="0.6f"
        android:toAlpha="1f" />
    <translate
        android:fromXDelta="100"
        android:toXDelta="0"
        />
</set>
  1. 為ViewGroup 設(shè)置android:layoutAnimation 屬性，這一以ListView 為例：
    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layoutAnimation="@anim/anim_layout"/>

這樣就完成了 ViewGroup 動(dòng)畫的設(shè)置。當(dāng)然，出了通過xml 指定之外，我們也可以通過代碼來實(shí)現(xiàn)，這就需要用到一個(gè)類 LayoutAnimationController :

Animation animation = AnimationUtils.loadLayoutAnimation(this, R.anim.anim_item);
        LayoutAnimationController controller = new LayoutAnimationController(animation);
        controller.setDelay(0.5f);
        controller.setOrder(LayoutAnimationController.ORDER_NORMAL);
        listView.setLayoutAnimation(controller);

總結(jié)

通過 View 動(dòng)畫我們基本就可以實(shí)現(xiàn)一些比較實(shí)現(xiàn)一些比較絢麗的效果了，但在使用過程中還是需要注意一些問題的：

  • OOM問題 ：這個(gè)問題主要針對 幀動(dòng)畫 ，我們要盡量避免使用太多和太大的圖片，不然極容易出現(xiàn)OOM。
  • View 動(dòng)畫并不能改變 View的位置，即使視覺上改變了位置，但點(diǎn)擊事件仍在 原位置生效。

動(dòng)畫其他：android動(dòng)畫入門：屬性動(dòng)畫

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

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