自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法...
前言:這幾天做客戶回訪,感觸很大,用戶只要是留反饋信息,總是一種恨鐵不成鋼的心態,想用你的app,卻是因為你的技術問題,讓他們不得不放棄,而你一個回訪電話卻讓他們盡釋前嫌,當最后把手機號留給他們以便隨時溝通的時候,總會發來一條條的鼓勵短信,讓我不自主的開始內疚。哎,多么可愛的用戶,多么無耐的現實。
?
相關文章:
《Android自定義控件三部曲文章索引》:http://blog.csdn.net/harvic880925/article/details/50995268
?
?
一、概述
Android的animation由四種類型組成:alpha、scale、translate、rotate,對應android官方文檔地址:《Animation Resources》
1、XML配置文件中
| alpha | 漸變透明度動畫效果 |
| scale | 漸變尺寸伸縮動畫效果 |
| translate | 畫面轉換位置移動動畫效果 |
| rotate | 畫面轉移旋轉動畫效果 |
?
下面我們逐個講講每個標簽的屬性及用法。
2、動作文件存放位置
動作定義文件應該存放在res/anim文件夾下,訪問時采用R.anim.XXX.xml的方式,位置如圖:
二、scale標簽——調節尺寸
1、自有屬性
scale標簽是縮放動畫,可以實現動態調控件尺寸的效果,有下面幾個屬性:
- android:fromXScale ? ?起始的X方向上相對自身的縮放比例,浮點值,比如1.0代表自身無變化,0.5代表起始時縮小一倍,2.0代表放大一倍;
- android:toXScale ? ? ? ?結尾的X方向上相對自身的縮放比例,浮點值;
- android:fromYScale ? ?起始的Y方向上相對自身的縮放比例,浮點值,
- android:toYScale ? ? ? ?結尾的Y方向上相對自身的縮放比例,浮點值;
- android:pivotX ? ? ? ? ? ?縮放起點X軸坐標,可以是數值、百分數、百分數p 三種樣式,比如 50、50%、50%p,當為數值時,表示在當前View的左上角,即原點處加上50px,做為起始縮放點;如果是50%,表示在當前控件的左上角加上自己寬度的50%做為起始點;如果是50%p,那么就是表示在當前的左上角加上父控件寬度的50%做為起始點x軸坐標。(具體意義,后面會舉例演示)
- android:pivotY ? ? ? ? ??縮放起點Y軸坐標,取值及意義跟android:pivotX一樣。
下面看一個實例,當scale里的屬性這樣設置時,效果會怎樣呢:
[html] view plaincopy(1)、pivotX取值數值時(50)
這個控件,寬度和高度都是從0放大到1.4倍,起始點坐標在控件左上角(坐標原點),向x軸正方向和y軸正方向都加上50像素;
根據pivotX,pivotY的意義,控件的左上角即為控件的坐標原點,這里的起始點是在控件的原點的基礎上向X軸和Y軸各加上50px,做為起始點,如下圖中圖二所示
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖一 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖二
? ??
(2)、pivotX取值百分數時(50%)
下面再看看當pivotX、pivotY取百分數的時候,起始點又在哪里?
上面我們講了,pivotX的值,當取50%時,表示在原點坐標的基礎上加上的自己寬度的50%,看看效果:
[html] view plaincopy縮放位置大小仍然從0-1.4,只改變pivotX和pivotY;起始點位置如下圖中圖二所示:
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖一 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖二
? ?
(3)、pivotX取值50%p時
前面說過,當取值在百分數后面加上一個字母p,就表示,取值的基數是父控件,即在原點的基礎上增加的值是父標簽的百分值。
效果圖,及起始點坐標圖如下所示:
? ? ? ??
2、從Animation類繼承的屬性
Animation類是所有動畫(scale、alpha、translate、rotate)的基類,這里以scale標簽為例,講解一下,Animation類所具有的屬性及意義。關于Animation類的官方文檔位置為:《Animation》
- android:duration ? ? ? ?動畫持續時間,以毫秒為單位?
- android:fillAfter ? ? ? ? ?如果設置為true,控件動畫結束時,將保持動畫最后時的狀態
- android:fillBefore ? ? ? 如果設置為true,控件動畫結束時,還原到開始動畫前的狀態
- android:fillEnabled ? ?與android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態
- android:repeatCount 重復次數
- android:repeatMode 重復類型,有reverse和restart兩個值,reverse表示倒序回放,restart表示重新放一遍,必須與repeatCount一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
- android:interpolator ?設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節中講解,后面會單獨列出一單講解。
對于android:duration,就不再講解了,就是動畫的持續時長,以毫秒為單位,下面看看android:fillAfter和android:fillBefore
(1)android:fillAfter:保持動畫結束的狀態
[html] view plaincopy
(2)android:fillBefore ?還原初始化狀態
[html] view plaincopy ? ? ? ? ? ? ? ? android:fillBefore="true" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:fillEnable="true"
? ?
上面順便列出了,當僅設定fillEanble為true時的效果,這兩個的標簽的效果完全相同。
(3)、android:repeatMode="restart /reverse" ?設定回放類型
[html] view plaincopy ? ? ? ? androidRepeatMode設為restart ? ? ? ? ? ? ? ? ? ? ??androidRepeatMode設為reverse
? ? ? ?
三、alpha標簽——調節透明度
1、自身屬性
- android:fromAlpha ? 動畫開始的透明度,從0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
- android:toAlpha ? ? ? 動畫結束時的透明度,也是從0.0 --1.0 ,0.0表示全透明,1.0表示完全不透明
使用示例:
[html] view plaincopy
2、從Animation類繼承的屬性
- android:duration?? ? ? ?動畫持續時間,以毫秒為單位?
- android:fillAfter?? ? ? ? ?如果設置為true,控件動畫結束時,將保持動畫最后時的狀態
- android:fillBefore ??? ? 如果設置為true,控件動畫結束時,還原到開始動畫前的狀態
- android:fillEnabled?? ?與android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態
- android:repeatCount?重復次數
- android:repeatMode 重復類型,有reverse和restart兩個值,reverse表示倒序回放,restart表示重新放一遍,必須與repeatCount一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
- android:interpolator??設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節中講解,后面會單獨列出一單講解。
與scale標簽意義一樣,就不再綴述。
四、rotate標簽——旋轉
1、自身屬性
- android:fromDegrees ? ? 開始旋轉的角度位置,正值代表順時針方向度數,負值代碼逆時針方向度數
- android:toDegrees ? ? ? ? 結束時旋轉到的角度位置,正值代表順時針方向度數,負值代碼逆時針方向度數
- android:pivotX ? ? ? ? ? ? ? 縮放起點X軸坐標,可以是數值、百分數、百分數p 三種樣式,比如 50、50%、50%p,具體意義已在scale標簽中講述,這里就不再重講
- android:pivotY ? ? ? ? ? ? ? 縮放起點Y軸坐標,可以是數值、百分數、百分數p 三種樣式,比如 50、50%、50%p
圍繞自身從0度逆時針旋轉650度 ? ? ? ? ? ? ? ? ? ? ? ? ? ?圍繞自身從0度順時針旋轉650度
android:fromDegrees="0" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? android:fromDegrees="0"
android:toDegrees="-650" ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?android:toDegrees="650"
? ? ?
2、從Animation類繼承的屬性
- android:duration?? ? ? ?動畫持續時間,以毫秒為單位?
- android:fillAfter?? ? ? ? ?如果設置為true,控件動畫結束時,將保持動畫最后時的狀態
- android:fillBefore ??? ? 如果設置為true,控件動畫結束時,還原到開始動畫前的狀態
- android:fillEnabled?? ?與android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態
- android:repeatCount?重復次數
- android:repeatMode 重復類型,有reverse和restart兩個值,reverse表示倒序回放,restart表示重新放一遍,必須與repeatCount一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
- android:interpolator??設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節中講解,后面會單獨列出一單講解。
與scale標簽意義一樣,就不再綴述。
五、translate標簽 —— 平移
1、自身屬性
- android:fromXDelta ? ? 起始點X軸坐標,可以是數值、百分數、百分數p 三種樣式,比如 50、50%、50%p,具體意義已在scale標簽中講述,這里就不再重講
- android:fromYDelta ? ?起始點Y軸從標,可以是數值、百分數、百分數p 三種樣式;
- android:toXDelta ? ? ? ? 結束點X軸坐標
- android:toYDelta ? ? ? ?結束點Y軸坐標
2、從Animation類繼承的屬性
- android:duration?? ? ? ?動畫持續時間,以毫秒為單位?
- android:fillAfter?? ? ? ? ?如果設置為true,控件動畫結束時,將保持動畫最后時的狀態
- android:fillBefore ??? ? 如果設置為true,控件動畫結束時,還原到開始動畫前的狀態
- android:fillEnabled?? ?與android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態
- android:repeatCount?重復次數
- android:repeatMode 重復類型,有reverse和restart兩個值,reverse表示倒序回放,restart表示重新放一遍,必須與repeatCount一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
- android:interpolator??設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節中講解,后面會單獨列出一單講解。
與scale標簽意義一樣,就不再綴述。
六、set標簽——定義動作合集
前面我們講解了各個標簽動畫的意義及用法,但他們都是獨立對控件起作用,假設我現在想上面的textView控件做一個動畫——從小到大,旋轉出場,而且透明度也要從0變成1,即下面的這個效果,該怎么辦?
這就需要對指定的控件定義動作合集,Set標簽就可以將幾個不同的動作定義成一個組;
屬性:
set標簽自已是沒有屬性的,他的屬性都是從Animation繼承而來,但當它們用于Set標簽時,就會對Set標簽下的所有子控件都產生作用。
屬性有:(從Animation類繼承的屬性)
- android:duration?? ? ? ?動畫持續時間,以毫秒為單位?
- android:fillAfter?? ? ? ? ?如果設置為true,控件動畫結束時,將保持動畫最后時的狀態
- android:fillBefore ??? ? 如果設置為true,控件動畫結束時,還原到開始動畫前的狀態
- android:fillEnabled?? ?與android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態
- android:repeatCount?重復次數
- android:repeatMode 重復類型,有reverse和restart兩個值,reverse表示倒序回放,restart表示重新放一遍,必須與repeatCount一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
- android:interpolator??設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節中講解,后面會單獨列出一單講解。
與scale標簽意義一樣,就不再綴述。
上面這個效果,所對應的XML代碼為:
[html] view plaincopy七、實例——如何將動畫XML文件應用于控件中
上面我僅僅是列出了每個標簽及其屬性的意義及應用之后的效果演示,但上面是如何將定義動畫的xml應用到textView控件中的卻遲遲沒說,這一小節,就以scale動畫為例,講述如何將定義好的scle動作添加到指定控件中。
先看最終效果圖:
1、新建工程、新建scale動畫文件(scaleanim.xml)
新建一個工程,并且在res文件夾下,新建一個anim文件夾,然后再新建一個scaleanim.xml文件,結構如圖所示:
scaleanim.xml的代碼為:(從TextView中心點,從0放大到1.4倍,反復一次,最后還原到初始化狀態)
[html] view plaincopy2、XML布局文件
[html] view plaincopy3、JAVA代碼
[java] view plaincopy(1)通過scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim);從XML文件中獲取動畫
(2)利用startAnimation將動畫傳遞給指定控件顯示。
至此,本文就結束了,下篇將講述有關插值器的相關屬性及意義。
?
下面就是源碼下載了,源碼中包含兩部分內容:
1、Harvic_animation_demo工程:是第七部分的實例源碼;
2、tryAlpha_xml工程:是前六節動作代碼的集合,包含了前六小節里的所有代碼及動畫定義。
?
源碼下載地址:http://download.csdn.net/detail/harvic880925/8032579
請大家尊重原創者版權,轉載請標明出處:http://blog.csdn.net/harvic880925/article/details/39996643 謝謝!
轉載于:https://www.cnblogs.com/Free-Thinker/p/6214300.html
總結
以上是生活随笔為你收集整理的自定义控件三部曲之动画篇(一)——alpha、scale、translate、rotate、set的xml属性及用法...的全部內容,希望文章能夠幫你解決所遇到的問題。