Android中的動畫(XML方式)實踐(逐幀動畫與補間動畫)

Android提供了三種類型動畫:一開始的傳統動畫(包含兩種類型:逐幀動畫補間動畫(View動畫))和Android3.0 之后出現的

屬性動畫

逐幀動畫:基于單元格的動畫,每一幀顯示一個不同的drawable。一幀一幀的順序播放。

補間動畫:補間動畫應用于view,通過對其位置,大小,旋轉和透明度的改變,讓view動起來。

屬性動畫:屬性動畫幾乎可以讓應用程序中任何對象動起來。所有補間動畫的內容,都可以通過屬性動畫實現。

下面逐一介紹:

注:這篇文章偏重于以xml方式實現相應動畫效果。

逐幀動畫

逐幀動畫(Frame-by-frame Animations)從字面上理解就是一幀一幀的播放圖片,類似卡通動畫。

目標:

實現如下圖效果:

loading

步驟:

1.在res/drawable目錄下新建loading_frame.xml文件:

loading_frame.xml

根節點是animation-list,內部由一到多個<item>節點組成,

oneshot屬性表示是否只播放一次(true:一次;false:循環播放).

item節點聲明是一個動畫幀,其中 android:drawable屬性定義要顯示的圖像,android:druation代表此幀持續的時間,毫秒為單位。

注:在AndroidStudio中強制規定帶animation-list節點xml文件必須放在res/drawable文件下(eclipse(ADT)貌似支持任意放res/drawable和res/anim)在androidStudio中若放在res/anim下會報錯:

錯誤提示:1
錯誤提示:2

2.新建頁面布局activity_frame.xml:如上圖布局很簡單 上面一個imageview,下面兩個button,都水平居中(相對于parent)。

? ?設置imageView背景為loading_frame: android:background="@drawable/loading_frame" ?這里就不貼代碼了。

3.新建FrameActivity

frameActivity主要邏輯代碼

當然為了避免animationDrawable帶來的內存泄露,建議在onDestroy方法中做如下操作:

onDestroy()

注意:

幀數比較多的動畫不建議用逐幀動畫實現,其一會顯得卡頓,其二容易引起OOM

補間動畫

補間動畫(Tween Animation):支持通過對View的內容進行一系列的圖形變換來實現動畫效果。使用補間動畫進行改變透明度、縮放、旋轉、平移等操作比通過手動重繪Canvas達到相似效果要消耗更少的資源,在實現上也更加簡便。

補間動畫類型對應

補間動畫使用XML語言來定義時,其XML文件被放在項目的res/anim/目錄下。

由于相關的屬性有點多,在這先把它們公用的屬性做一下說明,然后再對每個分類下的特定屬性在做對應動畫效果時,進行描述。

屬性對應方法及描述

在上面圖表中可以看到第二行有一個interpolator屬性,表示動畫所采用的插值器。插值器影響動畫的播放速度。可以不指定,默認為加速減速插值器(@android:anim/accelerate_decelerate_interpolator")。

常用9種插值器

當然安卓也支持自定義插值器,具體網上有許多相關博客教程,可自行搜索,這里先不作介紹。

說了這么多,都好像背書的趕腳了。下面我們來玩玩吧

漸變

1.在res/anim/目錄下新建view_alpha.xml

view_alpha.xml

(從頭播放重復一次)

這里有兩個屬性是alpha獨有的:

android:fromAlpha-動畫開始時操作對象的alpha值

android:toAlpha-動畫終止時操作對象的alpha值

2.在對應view上應用動畫

start_alpha

3.看一下運行結果:

漸變—效果圖

由于默認android:fillBefore為true,所以動畫運行結束時會回到初始狀態

縮放

1.在res/anim/目錄下新建view_scale.xml

view_scale.xml

(反向播放重復兩次,保持最后狀態)

屬性:

android:fromXScale-動畫起始時,X軸坐標的伸縮尺寸。(0.0表示收縮到沒有。1.0表示正常沒伸縮。>1.0表示放大。<1.0表示收縮。)

android:toXScale-動畫結束時X軸坐標的伸縮尺寸

android:fromYScale-動畫起始時Y軸坐標的伸縮尺寸

android:toYScale-動畫結束時Y軸坐標的伸縮尺寸

android:pivotX-縮放動畫作用點在X軸方向上的位置。(android:pivotX=”50”表示絕對定位,相對于零點偏移50 ? –>Animation.ABSOLUTE ?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?android:pivotX=”50%”表示相對控件本身 ? ?–>Animation.RELATE_TO_SELF

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?android:pivotX=”50%p”表示相對控件的父控件 ?–>Animation.RELATE_TO_PARENT)

android:pivotY-縮放動畫作用點在Y軸方向上的位置(同上pivotX)


2.應用動畫:

start-scale

3.運行結果:

縮放-效果圖

旋轉

1.在res/anim/目錄下新建view_rotate.xml

view_rotate.xml

(運行過程:先向相反的方向改變一點,然后在加速播放至超出結束值一點,然后在緩慢回到結束值)

屬性:

android:fromDegrees-動畫起始的角度(可正可負)

android:toDegrees-動畫終止的角度(可正可負)

android:pivotX-旋轉作用點在X軸方向上的位置

android:pivotY-旋轉作用點在Y軸方向上的位置

2.應用動畫

start-rotate

3.運行結果

旋轉-效果圖

平移

1.在res/anim/目錄下新建view_translate.xml:

view-translate.xml

(運行過程:先向相反的方向改變一點,然后在加速播放至超出結束值一點,然后在緩慢回到結束值)

屬性:

android:fromXDelta-平移動畫起始位置X軸坐標 (android:fromXDelta=”50”表示絕對定位,相對于零點偏移50 ? –>Animation.ABSOLUTE

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:fromXDelta=”50%”表示相對控件本身 –>Animation.RELATE_TO_SELF

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?android:fromXDelta=”50%p”表示相對控件的父控件–>Animation.RELATE_TO_PARENT)

android:toXDelta-平移動畫結束位置X軸坐標

android:fromYDelta-平移動畫起始位置Y軸坐標

android:toYDelta-平移動畫結束位置Y軸坐標

2.應用

start-translate

3.運行結果

平移-效果圖

組合

1.在res/anim/目錄下新建view_set.xml:

view_set.xml

屬性:

android:shareInterpolator-是否對子動畫設置相同的插值器

先來推測一下運行過程:前1.5秒執行漸變,然后圖片以自身中心為旋轉軸心,從60度轉到325度,耗時1.8s。

2.應用

start-set

3.運行效果:

組合-效果圖

額。。。跟當初推測的不一致。它一開始就轉了60度然后再漸變,再轉到325度。也就是說吧<rotate>的初始狀態給先執行了,因為默認的fillBefore屬性為true。好吧,在<rotate>中設置fillBefore為false,再試一次:

view_set.xml 修改后代碼段

再看看運行效果---

組合-效果圖-1


沒有發生任何變化!!!!

是不是fillBefore失效了???看看源碼,進去Animation類中,有一個mFillEabled變量(主要看上面注釋):

mFillEnabled

想到有個屬性android:fillEnabled 與fillBefore是否被忽略有關,fillEnabled默認值是false(這時fillBefore設置為false失效)。

那將android:fillEnabled設為true試試:

view_set.xml 再次修改后代碼段

看看效果:

組合-效果圖-終

OK ?要的就是這種效果(是不是很有朦朧美,哈哈)。


LayoutAnimation(View動畫特殊使用場景

? LayoutAnimation作用于ViewGroup,可控制其子元素的出場效果。經常看到有些listview,它每個item都以動畫的形式出現。這里我們也來實現一個類似的功能吧!

1.為子元素指定入場動畫(在res/anim下新建anim_layout_item.xml)

anim_layout_item.xml

2.定義layoutAnimtion-res/anim下新建anim_layout.xml

anim_layout.xml

屬性:

android:delay - 先從字面意思理解就是延遲,具體什么意思 通過下面實現 再看

android:animationOrder - 動畫順序 有三種選項 :normal,reverse,random ?具體各自有什么效果 通過下面實現 再看

android:animation 指定子元素具體動畫

3.為listview指定android:layoutAnimation屬性:

布局文件-lsitview片段

看看運行結果:

delay-0-效果圖

貌似沒什么效果。那將anim_layout.xml中修改一下---android:delay="1",

delay-1-效果圖

從上面兩圖可以看到,當delay=0時,各item同時出現在頁面中,當delay=1時,各item是依次以設定的動畫方式出現,細心一點看,幾乎當上一個item到達最左部時(完成入場動畫),下一個item開始進入視圖播放入場動畫。所以delay應該指的是子元素的入場延遲。具體來說,第一個子元素延遲500ms*1(anim_layout_item.xml中設置duration=500,即子元素入場動畫周期為500ms)才開始播放入場動畫,第2個子元素延遲500ms*1*2播放入場動畫,以此類推。我們再來驗證一下,將delay設置為0.5,推測應該出現的效果為:上一個item大概到達中間位置時,下一個item開始入場:

delay-0.5-效果圖

delay的作用大概搞清楚了,下面來看看animationOrder的三個選項:normal 上面幾個圖都是設為這個選項的,下面就只用看其他兩種選項下的運行效果。

android:animationOrder="reverse"
android:animationOrder="random"

從上面幾個動圖的效果對比可以看到

android:animationOrder屬性是用來表示子元素動畫的順序的。默認即為normal:順序顯示,排在前面item先開始入場;reverse:倒序;random:隨機。

當然view動畫還可用于實現activity的切換效果等場景(5.0后,geogle推出的新的轉場動畫,還支持共享元素)。這里就不一一介紹了。


還有屬性動畫沒有介紹,屬性動畫非常強大,可以通過它實現絢麗的效果。鑒于它的相關內容比較多,一時半會也說不完,下次有空再整理學習吧。


感謝:

https://developer.android.google.cn/guide/topics/graphics/view-animation.html

https://developer.android.google.cn/guide/topics/graphics/drawable-animation.html



最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,412評論 6 532
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,514評論 3 416
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,373評論 0 374
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,975評論 1 312
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,743評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,199評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,262評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,414評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,951評論 1 336
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,780評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,983評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,527評論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,218評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,649評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,889評論 1 286
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,673評論 3 391
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,967評論 2 374

推薦閱讀更多精彩內容