Android 一共有多少種動畫?準確告訴你!

 

Android 動畫

Android 動畫在開發中是不可或缺的功能,或者說是界面靈動的添加劑。那你是否總結過 Android 中總共爲開發者提供了多少種方式的動畫呢?今天就爲你們總結概括一下。android

 
報告老師,我知道

我話音未落,前排那位騷氣不減當年、故事佈滿雙眼的大胸弟就激動得高高舉起了那隻盡是老繭的右手:「我知道,我知道!都有平移動畫、縮放動畫、旋轉動畫、漸變更畫、還有......」git

看着這位兄弟回答時專一又左思右想的表情,我真不忍心傷害他那顆純真的幼當心靈。因而我決定說一個謊:「這位同窗,你說的太對了!你都知道的這麼全面了還出來聽課真是太辛苦了。這麼熱的天,不如回家吹吹空調、吃吃西瓜,把此次學習的機會讓給更須要的人不挺好嗎!」github

看着那位兄弟一臉知足後遠去的歡快背影,我終於能夠放心的開始今天重點了。好了,上面內容純屬扯淡,轉入正題。網絡

本文章一部分教程圖片來自網絡,在這裏先對這些圖片的做者表示感謝。app

動畫種類

Android 動畫能夠概括爲如下幾種:框架

上面動畫分類是我的經過每種動畫種類概念的獨立性來劃分的,目前能想到的只有這麼多,若是有所遺漏你們能夠指點出來以供我後續完善。less

可能有不少人迅速的反應出,缺乏了目前使用也相對較多的 airbnb/lottie-android 動畫。不可置疑,Lottie 庫目前在 Android 開發中尤爲複雜動畫效果上地位顯著。但咱們今天要是的 Android 原生上爲咱們提供的能使用的動畫方式,Lottie 動畫今天暫且擱置。同時對於 RecyclerView item 加載動畫今天也暫且不提。咱們且把這些動畫歸爲其餘,並非把它們遺忘了。ide

詳盡教程

對於上面列舉的動畫種類,可能你們對部分較經常使用的動畫早已熟練應用,好比 View 動畫、屬性動畫等。而對部分較少使用(好比 揭露動畫)、或者經常使用卻從未意識到它也屬於動畫的一種(好比 觸摸反饋動畫)知道的並非那麼全面。「那麼今天就一一爲你們詳細講解每種動畫的概念」,那是不可能滴~~,就這麼點篇幅,這麼可能把每種動畫都細說下來。svg

要這些動畫一一梳理清晰,那將是一項浩大的工做,而我已經爲你們總結成了一個《詳盡 Android 動畫系列教程》,你們能夠到
https://github.com/OCNYang/Android-Animation-Set 
進行查看,因爲動畫知識點涉及的太多而教程詳細程度使人髮指,你們能夠收藏起來慢慢查看。另外總結的教程中每種動畫都提供了動畫示例,你們能夠結合源碼細細品味。(上面總結的系列教程,大多數都是借用前人總結的教程,選用的都是針對每種動畫網上流傳的最詳細全面的教程,在梳理中對部分錯誤也進行了更正。)oop

那今天的任務是什麼呢?接下來主要經過粗略的介紹來說解每種動畫在開發中都適用在哪一種場景。

視圖動畫(View 動畫)

自從有了屬性動畫,View 動畫的處境就很是淒涼,但有時咱們須要的僅僅就是簡易的動畫效果,那咱們使用 View 動畫起來就十分便捷。

View 動畫的一個特色就是,他的動畫僅僅是動的 View 的繪製地方,View 真正的位置並無一塊兒動畫。

View 通常會用做直接做用頁面中的 View 上,實現基本的動畫效果:平移、旋轉、縮放、透明度、或前幾者的交集:

view_animation_base

除了這幾種用法還有幾種特殊的使用場景:

    1. 給 PopupWindow 設置顯示隱藏的動畫效果:

你們能夠對比一下默認動畫和設置後的動畫效果對比:

 
默認效果

 

 
自定義效果
    1. 給 Activity 設置頁面跳轉、退出動畫效果:

Activity 過場動畫效果能夠經過不少方式設置,而使用 View 動畫實現的方式就是藉助設置
overridePendingTransition(int enterAnim, int exitAnim) 方法。跟在 startActivity() 或 finish() 後面,在頁面轉換時就顯示上面方法設置的切換動畫效果。

效果對比:

 
默認效果

 

 
自定義效果
    1. 給 ViewGroup 設置子控件的進場動畫效果:

就是經過給 ViewGroup 控件設置一條 android:layoutAnimation="@anim/anim_layout" 的屬性。而 anim_layout 就是 ViewGroup 中子控件在第一次顯示時的進場動畫效果。

效果以下:

 

 
默認效果

 

 
自定義效果

 

LayoutAnimation 適用於全部的 ViewGroup ,天然也包含 ListView、RecyclerView 等控件。上面說過 LayoutAnimation 提供的是進場動畫效果,因此只在 ViewGroup 第一次加載子 View 時顯示一次,因此列表控件的 item 加載動畫咱們通常不使用它,咱們會使用 列表 專門的 Item 加載動畫, 好比 recyclerView.setItemAnimator() 等。

幀動畫

 
動畫書

幀動畫這個很好理解,其實就和看的動畫片同樣,每一幀表明一個畫面動做,當快速逐幀顯示時,速度到達人眼沒法分辨每一幀時,就達到了動畫的效果。

在使用中,先要準備好每一幀的素材圖片:

 
幀動畫素材圖

而後播放出來就成了動畫的效果:

 
demo2.gif

 

要提及幀動畫的使用場景,在開發中使用的真是少之又少,通常會有兩種:

  • 設備的開關機動畫
  • 「複雜」 的動畫效果,看似不可能完成的動畫

之因此說開機動畫是幀動畫。是由於通常開機動畫是經過 system/media/bootanimation.zip 這個壓縮包,bootanimation 裏面主要包含一個 desc.txt 以及 N 個文件夾。而文件夾裏面放着的就是開機動畫的圖片資源。decs.txt 的做用就是指導系統如何去執行開機動畫。
desc.txt 編寫規範,例如開機動畫須要用到 2 個文件夾,分別是 folder1 和 folder2,開機的時候,先把 folder1 裏面的圖片都播放一遍,而後再循環播放 folder2 裏面的文件,直到進入系統。

而在開發中,開機動畫咱們通常涉及不到的。而經常使用到的是,當咱們須要一些比較複雜的圖片動畫顯示效果時,其餘動畫又實現不了,這時咱們能夠考慮幀動畫,但要注意防止 OOM。
其實真正用到幀動畫時,更多的時候咱們還不如使用 GIF 圖片代替,如今幾個主流圖片加載框架都支持 GIF 圖片,同時也能控制 GIF 的播放時機。

屬性動畫

屬性動畫所提供的功能和 View 動畫十分類似。但二者在實現原理上徹底不一樣,而相對 View 動畫來講,屬性動畫要強大的許多。這裏咱們先對二者作個對比:

View 動畫/視圖動畫:

  1. View 動畫只能爲 View 添加動畫效果,且不能監聽 View 相關屬性的變化過程。
  2. View 動畫提供的動畫能力較爲單一,目前只支持幀動畫、縮放動畫、位移動畫、旋轉動畫、透明度動畫以及這些動畫的集合動畫。
  3. View動畫改變的是 View 的繪製效果,View 的真正位置和相關屬性並不會改變,這也就形成了點擊事件的觸發區域是動畫前的位置而不是動畫後的位置的緣由。

屬性動畫

  1. 屬性動畫做用對象不侷限在 View 上,而是任何提供了 Getter 和 Setter 方法的對象的屬性上。
  2. 屬性動畫沒有直接改變 View 狀態的能力,而是經過動態改變 View 相關屬性的方式來改變 View 的顯示效果。
  3. 屬性動畫使用更方便,能夠用更簡潔的代碼實現相關的動畫效果。
  4. 屬性動畫上手難度較高,對於 propertyName 須要本身去挖掘,或者本身經過 Wrapper 的方式去自定義 propertyName。
  5. 屬性動畫是 Android3.0 以上系統提供的能力,在 3.0 如下需導入 nineoldandroids 三方庫解決兼容性問題。

那屬性動畫的使用場景有哪些呢?

  • 基本上視圖動畫做用在 View 上的動畫效果,屬性動畫均可以實現;
  • 在自定義 View 時,須要實現一些複雜的動畫效果,或對 View 的一些特殊屬性值進行動畫變動時,視圖動畫沒法實現時;
  • 另外,屬性動畫你也能夠用在非動畫場景,好比,你在自定義 View 須要一個有必定規律(根據特定差值器變化)且可監聽的數值變化器,這個時候藉助屬性動畫是再合適不過了。

屬性動畫是功能更強大、實現方式更優雅的動畫解決方案,在爲自定義 View 設置動效上有着很是強大的表現能力,能夠實現 View 動畫實現不了的更加炫酷的動畫效果。詳細的屬性動畫介紹能夠去查看 《Android 動畫詳盡教程》系列。

這裏盜一張前段時間有位網友實現的靈動的紅鯉魚效果,具體的實現也用到了很多屬性動畫的原理。

 
靈動的紅鯉魚

觸摸反饋動畫(Ripple Effect)

所謂觸摸反饋動畫就是一種點擊效果,做用在可點擊的 View 上時,當有點擊事件時會有漣漪般的反饋效果,使用在 按鈕 上是再好不過了。

Ripple 波紋效果有兩種:

//有邊界
?android:attr/selectableItemBackground
//無邊界 (要求API21以上)
?android:attr/selectableItemBackgroundBorderless

效果分別爲:

 
有邊界效果

 

 
無邊界效果

使用也很是簡單,只要將上面兩種效果設置爲控件的背景或者前景就行了,同時須要給控件設置點擊事件、或把控件設置爲可點擊 android:clickable="true"

揭露動畫(Reveal Effect)

揭露動畫在系統中很常見,就是相似波紋的效果, 從某一個點向四周展開或者從四周向某一點聚合起來。

  • 能夠用在 Activity 裏面的 View 動畫效果,用來揭露某個隱藏 View 的顯示;*
  • 也可使用在 Activity 跳轉過渡動畫中。

以下圖使用時的一些效果:

 
顯示隱藏View揭露動畫

若是加上些 View 動畫效果,結合後成這樣:

 
與基礎動畫效果結合

同時它還能夠和下面要說的轉場動畫結合成下面更酷炫的效果:

 
與轉場動畫結合

上面動畫效果是:先使用轉場動畫的共享元素轉場,而後再使用揭露動畫顯示 View。

轉場動畫 & 共享元素(Activity 切換動畫)

轉場動畫聽名字就知道它的使用場景了,轉場、轉場天然是用在場景轉換的時候:

  • 轉場效果咱們通常用在 Activity 切換時的動畫效果上;
  • 共享元素通常咱們使用在轉換的先後兩個頁面有共同元素[注1]時;
  • 同時也能夠在 Activity 佈局發生場景變化時,讓其中的 View 產生相應的過渡動畫。

共同元素[注1]:並不是限制指做用的兩個共享元素的狀態、大小、顯示位置徹底相同。而是指二者在頁面中要傳遞的內容相同,好比是從文章列表轉到文章詳情頁面時的相同標題、主圖等。若是共享元素的二者是不一樣的元素,一方面在顯示時共享元素在將結束轉場完成轉換時會有顯示的閃動,另外一方面,若是二者表達的是不一樣的元素,用戶也會感到很莫名。

話很少說,放上效果圖:

 
轉場效果

 

 
transition_animation.gif

視圖狀態動畫(Animate View State Changes)

所謂視圖狀態動畫,就是 View 在狀態改變時執行的動畫效果。和以前咱們經過 selector 選擇器給 Button 設置不一樣狀態下的背景效果是同樣同樣的。

固然,它的使用場景也是特定的:

  • 當 View 的狀態改變時,但願此時顯示的效果和靜態效果有所區分,即顯示效果也作出相應的改變,好比 Z 軸擡高,大小改變、或其餘動畫效果等。

放上一個按鈕被點擊後設置的視圖狀態動畫:

 
demo7.gif

矢量圖動畫(Vector 動畫)

不知道你們如今在開發中,在圖標顯示上是否是還在切各類尺寸的 .png 圖片適配。如今我但是一直在使用 svg 圖標(在開發中是經過轉換成 Vector 再使用,如今 AS 中導入,能夠自動完成轉換,轉換不成功的再用上面網址轉換),svg 圖標的好處自不用說了。那矢量圖動畫有是怎麼回事呢?

VectorDrawable 通常是以 <vector> 爲根標籤訂義的 XML 文件,<vector>、<group>、<clip-path>、<path> 元素都有各自能夠播放動畫的屬性。具體怎麼生成具備動畫效果的圖標,能夠在系列教程中查看。

咱們能夠在如下場景使用:

  • 具備動態變換效果的圖標;
  • 也能夠用在須要特定動畫效果的 VectorDrawable 圖片上。
 
image

 

 
奔跑的圖釘

約束佈局實現的關鍵幀動畫(ConstraintSet 動畫)

這個動畫就比較新了,甚至連官方都沒有提供完整的文檔。這是經過 ConstraintLayout 實現的一種關鍵幀動畫。

關鍵幀動畫:(百度百科)任何動畫要表現運動或變化,至少先後要給出兩個不一樣的關鍵狀態,而中間狀態的變化和銜接電腦能夠自動完成,在 Flash 中,表示關鍵狀態的幀動畫叫作關鍵幀動畫
所謂關鍵幀動畫,就是給須要動畫效果的屬性,準備一組與時間相關的值,這些值都是在動畫序列中比較關鍵的幀中提取出來的,而其餘時間幀中的值,能夠用這些關鍵值,採用特定的插值方法計算獲得,從而達到比較流暢的動畫效果。

而 ConstraintSet 動畫既然實現的是關鍵幀動畫,那至少須要兩個關鍵幀,而對於 ConstraintSet 來講每次須要的兩個關鍵幀就是兩種佈局狀態,而兩種佈局狀態的轉變過程 ConstraintSet 會生成必定的動畫過渡。

那使用場景根據約束動畫的說明也比較明顯了,就是同一個佈局須要從新調整佈局內部 View 位置時使用。

 
約束佈局動畫

更詳細的動畫介紹

這裏介紹的只是對 Android 各個種類的動畫進行了一個簡單的介紹,若是你要更加詳細更加全面的查看 Android 各個動畫的系列教程,能夠到本文章同系列文章教程進行查看:

Android 動畫詳盡教程:https://github.com/OCNYang/Android-Animation-Set

本篇教程終於完了,這時我又想起了文章開頭那個大胸弟,我想他此刻確定在家正洋洋得意的啃着大西瓜。很少說了,如此炎熱的天氣,我也要去啃個西瓜撫慰一下狂躁的心。

相關文章
相關標籤/搜索