2018-04-19—幀動畫和補間動畫使用

今天先給大家看一下效果哈哈:


幀動畫效果
補間動畫效果

這個就是我們今天要學習的東西,第一個是幀動畫,第二個是補間動畫。

幀動畫這個名字大家應該都比較熟悉,但是補間動畫應該就不太清楚了,沒關系,等會兒講到的時候我們再給大家詳細介紹,首先我們來看一下幀動畫:



一、幀動畫

幀動畫顧名思義,就是把一幀一幀的播放,我們把幾張圖片放進去,讓他依次展示出來,這個就是幀動畫的效果了。接下啦我們來看一下如何實現(xiàn)的:

在實現(xiàn)功能之前,我們先做一下準備工作,給activity.xml和activity.java文件進行設置(為了了功能講解方便):

activity.xml文件


MainActivity.java文件設置

好了,接下啦我們進入正題,首先開始幀動畫功能實現(xiàn):

幀動畫實現(xiàn)有兩種方法:java代碼實現(xiàn)和xml文件實現(xiàn),我們先來看java代碼實現(xiàn):

1.java代碼實現(xiàn):

我們的思路是這樣的:首先創(chuàng)建幀布局對應的類(AnimationDrawable),然后進行相關屬性添加,最后把它加入到img中。


我們調(diào)用了addFrame方法來給ad添加圖片,第一個參數(shù)是我們圖片的id,第二個參數(shù)duration是我們要讓他顯示多少毫秒。

setOneShot是我們是否讓他只跑一次,我們選擇false,讓他循環(huán)跑。

最后我們在點擊事件中調(diào)用了ad.start方法,然他動起來,現(xiàn)在我們來看一看效果吧:


幀動畫效果

2.用.xml實現(xiàn):


我們在drawable下創(chuàng)建了一個叫做frame_anim的xml文件,然后外標簽寫為animation-list,里面的item,drawable屬性添加圖片,duration是顯示時間。


我們這次不new AnimationDrawable,而是通過getDrawable獲取我們剛才創(chuàng)建的xml文件。

效果就不展示了,跟java的一樣。

這個很簡答,大家應該可以接受,下面我們來看一下補間動畫:


二、補間動畫

首先說一下補間動畫是個什么意思,我們的動畫不可能只是有圖片的來回切換構成動畫,我們同樣也可以通過對圖片進行平移、旋轉、縮放、透明度漸變等操作,來實現(xiàn)一個簡單的動畫效果,下面我們一次來看一下這些效果實現(xiàn)。

1.平移。

平移對應的類是TranslateAnimation。


TranslateAnimation類構造方法

我們注意到他有四個構造方法,我們一般常用的是最后兩個,我們就看第三個吧:

它對應的參數(shù)從左到右分別是:

? ? ? ? ? ? ? ? ? ? ? ? 動畫x軸起始位置相對默認位置偏移量,動畫x軸結束位置相對默認位置偏移量,

? ? ? ? ? ? ? ? ? ? ? ? 動畫y軸起始位置相對默認位置偏移量,動畫y軸結束位置相對默認位置偏移量。

我簡單解釋一下,大家都知道m(xù)argin吧,我們的x軸相對偏移就可以理解為marginStart,二y軸相對偏移就可以理解為marginTop,無論是起始還是結束位置都是這樣的。

現(xiàn)在我們來設置數(shù)值:


很明顯我們只讓它從默認位置向右移動的100,

別忘了點擊事件中啟動,我們通過ImageView的startAnimation方法來啟動。


平移效果

2.縮放

還是同樣的圖片,我們來進行縮放操作:

縮放對應的類是ScaleAnimation

ScaleAnimation類

我們注意到它的構造方法參數(shù)也是很多額,我們只看最后一個。

它對應的參數(shù)分別是:

????????????動畫播放前x軸比例,動畫播放后x軸比例,

????????????動畫播放前y軸比例,動畫播放后y軸比例,

????????????x軸縮放軸點坐標模式,x縮放軸點相對值,

????????????y軸縮放軸點坐標模式,y軸縮放點相對值。

這里面的參數(shù)除了5和7參數(shù),其他的都是一個比例值,這么來說吧,我們?nèi)绻付?,那他就是默認位置的最左邊緣或者最上邊緣(看是x還是y了),如果我們指定0.5f,那就是默認位置的一半長度的位置,如果指定1,那就是最右邊緣(或左下邊緣),如果大于1也同樣能理解了,2就是默認x(或y)長度的2倍的位置。它相對的就是默認的位置比例。

我們來給他添加參數(shù):


我們設置的是從默認位置的中心出發(fā),然后從0.5倍放大到1倍,這個TO_SELF屬性是我們相對自己,他還有一個屬性是TO_PARENT——相對父布局。

我們看一下效果:


縮放

3.旋轉

相信學完了平移和縮放之后,大家都知道這個補間動畫是個什么意思了,而且一般是怎么操作了,我們現(xiàn)在來看一下旋轉。

它對應的類是RotateAnimation:


RotateAnimation類

我們發(fā)現(xiàn)這個參數(shù)也不少啊,我們還是看這個最長的,它對應的參數(shù)分別是:

1.2.都是角度,用1減2就是旋轉的角度,默認順時針,值是正的就是順時針,負的就是逆時針。

3.x旋轉軸點類型4.x軸點

5.y旋轉軸點類型6.y軸點

這個4和6軸點跟縮放是一樣的,還是相對默認位置的比例。

我們還是讓他旋轉點為默認位置中心,然后逆時針旋轉90度,我們來看一下效果:


旋轉

4.透明度(漸變)

他對應的類是AlphaAnimation:


AlphaAnimation類

他還是比較好弄的,構造方法很簡單,我們看一下第二個:

第一個是動畫開始前透明度,第二個是動畫結束后透明度。這兩個參數(shù)都是從-1到1,對應完全透明到不透明。直接上代碼,+效果了:



關于Animation還有一些其他通用的方法:

setFillAfter(Boolean):視圖結束后保持結束位置,說白了就是旋轉后還是轉后的位置,平移后還時平移后的位置,縮放后還是縮放后的比例。

setFillBefore(Boolean):同上正好相反,如果這兩個方法都不操作,他默認before的方法為true。

setRepeatCount(int):視圖重復次數(shù),注意是重復次數(shù),不是變換次數(shù)。


三、組合

上面我們學了補間動畫,他分別有平移、縮放、旋轉和漸變效果,我們同樣可以把他們組合起來,讓他們同時變換 ,這里直接用.xml實現(xiàn)了(上面的四種同樣可以用.xml實現(xiàn)):

1.我們在res目錄下創(chuàng)建名為anim的系統(tǒng)目錄,

2然后在里面創(chuàng)建.xml文件


anim目錄下的anim_set.xml文件

我們看到我們里面添加了兩個標簽,分別是translate和alpha,這個大家應該都能看懂了,是平移和漸變。里面的一些屬性跟我們剛才構造方法中的一模一樣,

注意我們在set標簽里添加的一些屬性,duration效果時間,fillAfter保持結束視圖。


我們通過AnimationUtils的loadAnimation方法來獲取剛才的.xml文件。


這是平移加漸變的效果,至于一開始的例子和其他的效果,大家自由組合吧哈哈(悄悄說一下,白色方塊旋轉的那個補間動畫,用到了handler哦)。

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

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

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