Android動畫實現詳解

前言

咱們都知道,漂亮的用戶界面是衡量一款應用"好壞"很重要的依據,由於人都是視覺動物,就比如說花容月貌總有男人爲之傾倒,英俊瀟灑總能博得芳心。這是一個無可置疑的事實,那麼咱們的應用也是如此,一個漂亮的用戶交互界面能提高用戶對應用的好感,提高用戶體驗。而動畫是提高用戶體驗的一個重要因素,好的動畫交互讓人用着更舒心,那麼今天的這篇文章就是介紹Android中動畫實現,讓咱們的應用動起來。ide

Android動畫分類

中也是按兩種分類來說解的。佈局

在Android 5.0開始增長了Material Design ,Material Design 中實現了一些動畫爲用戶提供操做反饋並在用戶與您的應用進行互動時提供視覺連續性。 它將爲按鈕與操做行爲轉換提供一些默認動畫,咱們能夠定製觸摸反饋,使用揭露效果,定製操做行爲轉換,指定定製轉換,使用轉換啓動一個操做行爲,以共享元素啓動一個操做行爲等等。動畫

Frame Animation

因爲Frame Animation,Tween Animation的實現仍是有區別的,暫且就將這兩種方式實現分開介紹,Frame Animation其實就是將一系列的圖片一張一張的展現出來,這個和咱們看電影是相似的,因爲人眼有一個可接收的暫留時間,這也就是爲何人在線看視頻會感受卡頓。固然咱們實現Frame Animation就是這個依據,當播放相同的圖片張數用時越短也就越流暢,天然人就會感受是一個動畫。咱們常見的Gif其實也是幀動畫,若是你用PhotoShop打開Gif動畫,會發現裏面是有不少圖層的也就是不少幀。spa

對於Frame動畫有兩種實現方式,第一種方式就是在drawable文件夾下建立一個xml文件。它的語法很簡單,以下視頻

 

看了上面你會發現實現Frame動畫很簡單,屬性不多,animation-list 是動畫的根元素,在根元素中的oneshot屬性表示動畫執行次數,若是設置爲true表示只播放一次,若是false則表示會一直循環執行。在根元素下有item元素,該元素就是咱們要添加的圖片,每個item表示一幀,item下的drawable就是咱們的圖片資源,duration就是該幀動畫執行的時間。例如xml

 

使用方法以下圖片

 

Picture

運行效果圖如上,在上面咱們沒有添加oneshot屬性,則該屬性默認false,也就是說該動畫會一直循環執行,當咱們設置true後則播放到最後一幀時動畫中止,當咱們想中止時可使用AnimationDrawable 的stop方法,它還提供了isRunning()方法判斷是否已經在執行動畫。另外咱們還須要注意的是當心OOM。ip

固然用代碼實現也很簡單,以下ci

 

Tween Animation

Tween Animation即補間動畫,主要分爲四種,分別是平移、縮放、旋轉、透明度,直接上語法資源

 

這是官方給的語法,set 是一個動畫集合,內部能夠是多個動畫的組合,也能夠嵌套set,這裏包含了動畫實現的全部屬性。在上面的語法中咱們須要注意的是平移的時候其實位置接受百分比數值:從-100到100的值,以「%」結尾,表示百分比相對於自身;從-100到100的值,以「%p」結尾,表示百分比相對於父容器。例如平移開始位置在自身中間則是50%,如平時開始位置在父容器的則是50%p.

例若有些人給咱們的Activity會加一些從左邊進右邊出的動畫,那麼當咱們打開Activity時將Activity佈局的fromXDelta值-100%p並將toXDelta爲0%p,那麼咱們看到的效果就是從左邊進入了。

插值器

在動畫插值器起的做用主要是改變更畫的執行速率,通常狀況咱們不須要本身實現插值器,由於在Android中已經給咱們提供了9種插值器,應該夠咱們使用了,咱們使用插值器後會讓動畫執行的效果更酷炫,固然想自定義插值器也不難,能夠查看已經實現插值器源碼作參考。

  • accelerate_decelerate_interpolator:先加速後減速

  • accelerate_interpolator:一直加速

  • anticipate_interpolator: 開始的時候先向後甩一點而後向前,就比如人扔東西會先向後甩一下,這樣才能拋的遠

  • anticipate_overshoot_interpolator:和上一種插值器類似,先向後拋而後向前,到達終點後會有回彈一下效果,比如咱們將球拋到牆上,而後反彈回來

  • bounce_interpolator:動畫結束的時候彈起,相似皮球落地,會彈幾下才中止

  • cycle_interpolator:動畫循環播放特定的次數回到原點,速率改變沿着正弦曲線

  • decelerate_interpolator:減速的插值器,剛開始速度快,而後愈來愈慢直到中止

  • linear_interpolator:線性的插值器。從開始到結束勻速運動

  • overshoot_interpolator:向前超過設定值一點而後返回

下面簡單實現一個動畫,動畫效果以下面截圖,是一個透明度,平移,縮放的動畫同時執行的動畫。

Picture

 

而後使用下面代碼給ImageView加入動畫。

 

固然咱們也可給動畫加上監聽。如

 

Propterty Animation

屬性動畫是3.0以後引入的,在View動畫中雖然咱們看到了咱們的控件位置發生發生變化,好比Button雖然位置變化了,可是點擊響應區域還在原來的位置。而屬性動畫就能夠解決這種問題。它能夠做用於View的屬性。
語法

 

下面列出了常見的屬性名字,另外須要注意的是,使用屬性動畫時,必須有相應屬性的set/get方法,不然屬性動畫沒有效果的。

  • translationX 和 translationY : 控制View距離左邊和頂部的距離的增長值。是一個相對值。相對於自身位置的具體。

  • rotation 、 rotationX 和 rotationY : rotation 是控制View圍繞其支點進行旋轉。 rotationX 和 rotationY 分別是圍繞X軸和Y軸旋轉。

  • scaleX 和 scaleY : 控制View的縮放。

  • pivotX 和 pivotY : 控制View的支點位置,進行旋轉和縮放,默認是View的中點。它們都是 float 值, 0 表示View的最左邊和最頂端, 1 表示最右端和最下端。

  • alpha : 控制View的透明度。

  • x 和 y : 控制View在佈局容器中距離左邊和頂部的距離。是一個絕對值。

例如咱們實現一個旋轉加透明度變化的動畫,效果圖以下

Picture

 

而後

 

固然不用xml書寫也是很簡單的,以下代碼

 

代碼實現的效果就是在2秒內先旋轉到180度,在回到90度在轉回180度
效果圖如

Picture

在上面代碼實現了一直屬性動畫,那麼若是咱們想同時做用幾個屬性那該如何操做呢。此時咱們有兩種實現方式分別是類PropertyValuesHolder和AnimatorSet,話很少說,先上圖再直接上代碼。

Picture

 

Fragment/Activity動畫

其實實現Activity及Fragment切換動畫也是很簡單的,具體的動畫效果製做可使用即便上面介紹的補間動畫。例如咱們Fragment動畫。

 

Activity實現動畫也很簡單,在Activity中提供了overridePendingTransition(int enterAnim, int exitAnim) 方法,該方法接收兩個參數,第一個參數是Activity進入時的動畫,第二個參數是Activity退出時的動畫。該方法通常寫在startActivity()後和finish()後,若是咱們想打開或者退出不顯示動畫,可將參數設置爲0。

在上面的咱們介紹了Activity/Fragment在代碼中實現動畫的方法,固然還有一種簡單的實現方式,那就是在主題中設置動畫。
對於Activity

 

可能你不太理解爲何是設置了四種,假若有Activity1和Activity2。當咱們在Activity1中跳轉到Activity2時,Activity1在頁面上消失是執行的:activityOpenExitAnimation動畫,Activity2出如今屏幕上執行的動畫是activityOpenEnterAnimation。當Activity2 finish返回Activity1時,Activity2執行的動畫是activityCloseExitAnimation,Activity1顯示在屏幕執行的是activityCloseEnterAnimation。建立上面主題後咱們須要將該主題應用到咱們的Activty中就能夠了。

同理Fragment也可相應設置,如activityCloseEnterAnimation改成fragmentCloseEnterAnimation便可。
除此以外咱們也可使用windowAnimation,它包括 windowEnterAnimation 和 windowExitAnimation。注意的一點就是WindowAnimation的控制權大於Activity/Fragment Animation的控制權。

除了上面介紹的動畫實現,還有一些動畫是從Android5.0增長的,你能夠參考文末給出的連接文章,酷炫的Activity切換動畫,打造更好的用戶體驗。我的感受這篇文章介紹的挺詳細。對本文缺乏的內容也作了一個補充。到這裏該篇文章就暫時告一段落,有問題歡迎指出,Have a wonderful day.

相關文章
相關標籤/搜索