本文小編為大家詳細介紹“Android視圖動畫怎么實現(xiàn)”,內容詳細,步驟清晰,細節(jié)處理妥當,希望這篇“Android視圖動畫怎么實現(xiàn)”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來學習新知識吧。
成都創(chuàng)新互聯(lián)公司從2013年開始,是專業(yè)互聯(lián)網技術服務公司,擁有項目網站設計、做網站網站策劃,項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命,1280元金平做網站,已為上家服務,為金平各地企業(yè)和個人服務,聯(lián)系電話:18982081108
視圖動畫主要有兩種:
一、Tween Animation
譯為“補間動畫”
1、scale
譯為“規(guī)模、比例”,是對View進行特定范圍的縮放
2、alpha
通過改變View的透明度實現(xiàn)View隱現(xiàn)的效果
3、translate
譯為"轉移",是對View進行位置的移動
4、rotate
譯為“旋轉”,是讓View圍繞特定的點進行旋轉
PS:所有View的移動、隱藏、旋轉僅僅是看到的動畫效果,實際View的位置/大小/比例并沒有發(fā)生本質上的改變(比如說View的位置通過動畫進行移動后你注冊的點擊事件還是需要點擊到View的原始位置才可以被觸發(fā))。
二、Frame Animation
譯為逐幀動畫
這個比較容易理解就是將多個具有特定連貫動作的圖片在短時間內進行快速的切換達到動畫的效果,本質上所有的動畫效果都是這種思想。
動畫文件要存放在res/anim文件夾下,訪問時采用R.anim.XXX的方式。默認是沒有這個文件夾的需要手動創(chuàng)建(右鍵res目錄-->New-->Android Resource Directory-->確定。)
image
動畫文件的創(chuàng)建方式為:右鍵anim
文件夾選擇new,然后點擊Animation Resource file,選擇動畫類型即可創(chuàng)建。
image
輸入后會自動提示動畫名稱,然后輸入名稱,確定即可。
image
這個動畫參數(shù)相對來說比較多, 就我個人而言在學習這個動畫的時候花費時間是最長的。
這個動畫主要是實現(xiàn)View的縮放,首先要想,要實現(xiàn)一個縮放的動畫首先要確定什么參數(shù)/信息(好比說想切割一張?zhí)囟ù笮〉募垙堃_定寬和高一樣),那么第一個就是要確定要圍繞哪個點(pivot)進行縮放。
還需要知道在動畫開始(from)時View的大小(比例),以及動畫結束(to)時View要處于的大小(比例)。就是要確定以下六個參數(shù)才可以完成一次縮放動畫。
X則指定控件的寬度,Y則指定控件的高度,值越大則控件所占位置越大。
Android坐標從左上角開始算起。
image
其中fromXScale
、toXScale
、fromYScale
、toYScale
使用浮點類型,1.0表使原始大小,0.5則是縮放一半,1.5則是擴大原大小的一半。舉例:原View寬高100、150,1.0:(100,150),0.5:(50,75),1.5:(150,225)。也可以使用精確值(DP/PX)。
pivotX
、pivotY
有三種表使方法,第一是采用像素值,第二則是較自身的百分比,第三則是較父View的百分比。
為了方便觀察,使用兩個同等位置和大小不同顏色的View來進行觀察。動畫的播放代碼在最下文已給出。
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="播放動畫" android:id="@+id/btnOpenAnimation" /> <TextView android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" android:layout_gravity="center" android:background="#03A9F4"/> <TextView android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" android:id="@+id/txtAnimation" android:layout_gravity="center" android:background="#FF00"/></RelativeLayout>
示例1:使用像素值確定Pivot點
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.5" android:toXScale="1.0" android:duration="3000" android:fromYScale="0.5" android:toYScale="1.0" android:pivotX="200" android:pivotY="200"></scale>
這里我們分別設置了pivotX
和pivotY
為200(px),這個是從View本身來算起的,View的左上角為(0,0)點,然后X軸坐標向右,Y則向下分別走200像素,最終得到了箭頭指向的點(Pivot),那么開始點確定了。
再看其它參數(shù),fromXScale
指定的是在動畫開始時X坐標也就是寬度的大小(這里是按照比例計算的),0.5則代表View原始寬度的一半,fromYScale
則是高度了。
既然是向特定的比例進行縮放,僅僅確定開始的大小是不夠的,還要確定在動畫播放到最后所要達到的大小,所以就有了toXScale
和toYScale
,這兩個則是指定在動畫播放完成后View所處的大小。
這里我們是從View的0.5縮放到1.0,也就是從原始View的一半經過3秒(duration
用來控制動畫時長,1000為1秒。)后變成原始View的大小也就是1.0。
image
image
示例2:百分比Pivot
使用百分比確定Pivot也很簡單,那么Pivot的位置就是:以View的左上角即(0,0)點為基礎加上View特定的寬高百分比。
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.0" android:duration="5000" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="70%" android:pivotY="70%"></scale>
image
image
示例3:父View百分比Pivot
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.0" android:duration="5000" android:fromYScale="0.0" android:toYScale="1.0" android:pivotX="50%p" android:pivotY="50%p"></scale>
這個計算和上邊那個其實是一樣的,只是基于的點不同而已,上邊是基于自身來算起,那么這個則是基于View的父布局來計算的。那么Pivot的位置就是:以View的左上角即(0,0)點為基礎加上父View特定的寬高百分比。
image
image
這個可以說就非常簡單了,主要是實現(xiàn)顏色的過度效果,fromAlpha
則是動畫開始的透明度,toAlpha
則是在動畫最后顯示的透明度。0.0代表完全透明1.0則是View的原色。
<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="0.0" android:duration="3000" android:toAlpha="1.0"></alpha>
image
首先要想完成旋轉要確定那些參數(shù)?肯定要確定旋轉要圍繞的點也就是pivot
,這個在scale
動畫也用到了,用法都一樣,不在多說。這里出現(xiàn)了名為degrees
也就是角度的概念,也就是以特定點(pivot
)為中心從多少度(fromDegrees
),旋轉到多少度(toDegrees
)。以下示例是從0轉到360度,正好一圈。
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="360" android:pivotY="50%" android:pivotX="50%" android:duration="3000"></rotate>
image
說白了就是移動View的位置,就是從一個點移動到另一個點,最重要的就是確定兩個點,那么則需要確定兩對X,Y坐標了。
以下參數(shù)的使用方式和在最上邊提到的pivot
是一樣的都可以使用精確值和百分比。
<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="10%" android:toXDelta="70%" android:fromYDelta="0%" android:toYDelta="70%" android:duration="3000"></translate>
其中黑色線條框住的是View的原始位置,黃色框住的是View動畫開始時的位置,紫色線條則是整個View的70%的占比,最后集中到的點就是View要移動到的最終的位置也就是結束點。
image
如何理解Set
(集合動畫),其實很簡單,比如現(xiàn)在有一個需求,我們既要旋轉又要有漸漸出現(xiàn)的效果,那么就要使用set
了,說白了就是將多個動畫組合起來。只要把上邊幾個都學會了,使用這個set
簡直so easy。
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0" ></alpha> <rotate android:pivotX="50%" android:pivotY="50%" android:fromDegrees="0" android:toDegrees="180" ></rotate></set>
image
上邊所展示的都是通過xml文件寫的動畫,都是靜態(tài)寫好了的。那么想要動態(tài)的創(chuàng)建動畫對象又該如何?其實很簡單,通過代碼的方式創(chuàng)建動畫它們的名稱和使用xml文件創(chuàng)建時名稱都是對應的,提供的構造函數(shù)也都是必備的參數(shù)值。
//創(chuàng)建Alpha動畫var alpha = AlphaAnimation(0.0F, 1.0F) alpha.duration = 3000this.txtAnimation.startAnimation(alpha)//創(chuàng)建Rotate動畫var rotate = RotateAnimation(0F, 360F, Animation.RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F)//創(chuàng)建Scale動畫var scale = ScaleAnimation(0F, 1F, 0F, 1F, Animation.RELATIVE_TO_SELF, 50F, Animation.RELATIVE_TO_SELF, 50F)//創(chuàng)建translate動畫var translate = TranslateAnimation( Animation.RELATIVE_TO_SELF, 10F, Animation.RELATIVE_TO_SELF, 80F, Animation.RELATIVE_TO_SELF, 0F, Animation.RELATIVE_TO_SELF, 70F )//創(chuàng)建Set動畫var set = AnimationSet(this, null) set.duration = 3000set.addAnimation(alpha) set.addAnimation(rotate)
以上所有的動畫對象都是從Animation類繼承來的,所有有一些公共的屬性也會繼承過來。
image
//加載動畫this.btnOpenAnimation.setOnClickListener { var animation = AnimationUtils.loadAnimation(this, R.anim.translate_anim) this.txtAnimation.startAnimation(animation) }
這個是Drawable形式的動畫,存放在drawable文件夾中,使用animation-list
節(jié)點來表示。圖片素材是提前準備好的。自己動手嘗試下馬上就會理解了。
<?xml version="1.0" encoding="utf-8"?><animation-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:duration="100" android:drawable="@drawable/a001"></item> <item android:duration="100" android:drawable="@drawable/a002"></item> <item android:duration="100" android:drawable="@drawable/a003"></item> <item android:duration="100" android:drawable="@drawable/a004"></item> <item android:duration="100" android:drawable="@drawable/a005"></item> <item android:duration="100" android:drawable="@drawable/a006"></item> <item android:duration="100" android:drawable="@drawable/a007"></item> <item android:duration="100" android:drawable="@drawable/a008"></item> <item android:duration="100" android:drawable="@drawable/a009"></item> <item android:duration="100" android:drawable="@drawable/a010"></item> <item android:duration="100" android:drawable="@drawable/a011"></item> <item android:duration="100" android:drawable="@drawable/a012"></item> <item android:duration="100" android:drawable="@drawable/a013"></item> <item android:duration="100" android:drawable="@drawable/a014"></item> <item android:duration="100" android:drawable="@drawable/a015"></item> <item android:duration="100" android:drawable="@drawable/a016"></item> <item android:duration="100" android:drawable="@drawable/a017"></item> <item android:duration="100" android:drawable="@drawable/a018"></item></animation-list>
這里我們給一個TextView設置了background
屬性。
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_width="match_parent" android:layout_height="wrap_content" android:text="播放動畫" android:id="@+id/btnOpenAnimation" /> <TextView android:layout_width="300dp" android:layout_height="300dp" android:layout_centerInParent="true" android:id="@+id/txtAnimation" android:background="@drawable/anim_refresh" android:layout_gravity="center" /></RelativeLayout>
具體調用
var animationDrawable = this.txtAnimation.background as AnimationDrawable animationDrawable.start()
顯示效果
讀到這里,這篇“Android視圖動畫怎么實現(xiàn)”文章已經介紹完畢,想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會,如果想了解更多相關內容的文章,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
文章題目:Android視圖動畫怎么實現(xiàn)
網址分享:http://muchs.cn/article38/ipghsp.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供微信小程序、品牌網站制作、企業(yè)網站制作、域名注冊、網站改版、商城網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)