android動畫入門:View動畫和幀動畫

前言

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


View 動畫

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

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

View 動畫的使用,需要編寫動畫xml文件,存放的路徑呢? 是在res/anim/ 文件夾下面。下面來看一下,xml文件的語法格式:

  • 平移動畫
<?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)移動畫效果
        整型值:
            fromXDelta 屬性為動畫起始時 X坐標(biāo)上的位置    
            toXDelta   屬性為動畫結(jié)束時 X坐標(biāo)上的位置
            fromYDelta 屬性為動畫起始時 Y坐標(biāo)上的位置
            toYDelta   屬性為動畫結(jié)束時 Y坐標(biāo)上的位置
            注意:
                     沒有指定fromXType toXType fromYType toYType 時候,
                     默認是以自己為相對參照物                
-->
</set>
  • 縮放動畫
<?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>
<!-- 尺寸伸縮動畫效果 scale
       屬性:interpolator 指定一個動畫的插值器
      浮點型值:      
            fromXScale 屬性為動畫起始時 X坐標(biāo)上的伸縮尺寸    
            toXScale   屬性為動畫結(jié)束時 X坐標(biāo)上的伸縮尺寸     
        
            fromYScale 屬性為動畫起始時Y坐標(biāo)上的伸縮尺寸    
            toYScale   屬性為動畫結(jié)束時Y坐標(biāo)上的伸縮尺寸    
        
            說明:
                 以上四種屬性值    
    
                    0.0表示收縮到?jīng)]有 
                    1.0表示正常無伸縮     
                    值小于1.0表示收縮  
                    值大于1.0表示放大
        
            pivotX     屬性為動畫相對于物件的X坐標(biāo)的開始位置
            pivotY     屬性為動畫相對于物件的Y坐標(biāo)的開始位置
        
            說明:
                    以上兩個屬性值 從0%-100%中取值
                    50%為物件的X或Y方向坐標(biāo)上的中點位置
-->
  • 旋轉(zhuǎn)動畫
<?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)動畫效果
       屬性:interpolator 指定一個動畫的插值器
             
       浮點數(shù)型值:
            fromDegrees 屬性為動畫起始時物件的角度    
            toDegrees   屬性為動畫結(jié)束時物件旋轉(zhuǎn)的角度 可以大于360度   

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

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

            說明:        以上兩個屬性值 從0%-100%中取值
                         50%為物件的X或Y方向坐標(biāo)上的中點位置
-->
</set>
  • 透明度動畫
<?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"
/> 
<!-- 透明度控制動畫效果 alpha
        浮點型值:
            fromAlpha 屬性為動畫起始時透明度
            toAlpha   屬性為動畫結(jié)束時透明度
            說明: 
                0.0表示完全透明
                1.0表示完全不透明
            以上值取0.0-1.0之間的float數(shù)據(jù)類型的數(shù)字
-->
</set>

除了以上各個View動畫 特有的屬性之外,他們還存在著許多共有的屬性。

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

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

<?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/>
<!-- 動畫集合
       屬性:interpolator 指定一個動畫的插值器
            shareInterpolator 表示集合中的動畫是否共享同一個插值器
-->
</set>

如何應(yīng)用上面的動畫呢?也很簡單,如下所示。

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

同時,通過Animation 的setAnimationListener 方法可以給View動畫添加過程監(jiān)聽,接口如下:

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


幀動畫

幀動畫是順序播放一組預(yù)先定義好的圖片,類似于電影播放。不同于View 動畫,系統(tǒng)提供了另外一個雷AnimationDrawable 來使用幀動畫。對于來說,使用起來比較簡單,這里首先需要用到另一個 集合標(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
然后將上述的 動畫 作為View的背景并通過AnimationDrawable 來播放即可:

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

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


View 動畫的特殊使用

View 動畫除了單純的用于 單個View 的動畫形式, 還可以在一些其他的特殊的使用,例如:控制 ViewGroup 的子View 的出場效果,或者Activity的切換效果。

LayoutAnimation

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

  1. 首先定義layoutAnimation 動畫,它有三個屬性:
  • android:animation 指定子元素所要顯示的View動畫效果
  • android:animationOrder 指定子元素的動畫顯示順序 提供了三種模式:normal 正常順序 random 隨機播放 reverse 倒序
  • android:delay 指定子元素動畫效果的延遲,比如說:view動畫的 duration 設(shè)置為 500 ms,那么 delay 為 0.5 ,子元素之間將相差250ms 的依次播放動畫。
// 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 動畫的設(shè)置。當(dāng)然,出了通過xml 指定之外,我們也可以通過代碼來實現(xiàn),這就需要用到一個類 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 動畫我們基本就可以實現(xiàn)一些比較實現(xiàn)一些比較絢麗的效果了,但在使用過程中還是需要注意一些問題的:

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

動畫其他:android動畫入門:屬性動畫

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

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

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