相關文章:
《Android自定義控件三部曲文章索引》:http://blog.csdn.net/harvic880925/article/details/50995268
Android的animation由四種類型組成:alpha、scale、translate、rotate,對應android官方文檔地址:《Animation Resources》
alpha | 漸變透明度動畫效果 |
scale | 漸變尺寸伸縮動畫效果 |
translate | 畫面轉換位置移動動畫效果 |
rotate | 畫面轉移旋轉動畫效果 |
下面我們逐個講講每個標簽的屬性及用法。
動作定義文件應該存放在res/anim文件夾下,訪問時采用R.anim.XXX.xml的方式,位置如圖:
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 plain copy PRint?<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50" android:pivotY="50" android:duration="700" />(1)、pivotX取值數值時(50)
這個控件,寬度和高度都是從0放大到1.4倍,起始點坐標在控件左上角(坐標原點),向x軸正方向和y軸正方向都加上50像素;根據pivotX,pivotY的意義,控件的左上角即為控件的坐標原點,這里的起始點是在控件的原點的基礎上向X軸和Y軸各加上50px,做為起始點,如下圖中圖二所示
圖一 圖二
![]()
(2)、pivotX取值百分數時(50%)下面再看看當pivotX、pivotY取百分數的時候,起始點又在哪里?
上面我們講了,pivotX的值,當取50%時,表示在原點坐標的基礎上加上的自己寬度的50%,看看效果:
[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%” android:duration=“700” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="700" />縮放位置大小仍然從0-1.4,只改變pivotX和pivotY;起始點位置如下圖中圖二所示:圖一 圖二
前面說過,當取值在百分數后面加上一個字母p,就表示,取值的基數是父控件,即在原點的基礎上增加的值是父標簽的百分值。[html] view plain copy print?
![]()
(3)、pivotX取值50%p時
<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%p” android:pivotY=“50%p” android:duration=“700” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%p" android:pivotY="50%p" android:duration="700" />效果圖,及起始點坐標圖如下所示:
![]()
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 plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%” android:duration=“700” android:fillAfter=“true” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="700" android:fillAfter="true" />(2)android:fillBefore 還原初始化狀態
[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%” android:duration=“700” android:fillBefore=“true” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="700" android:fillBefore="true" /> android:fillBefore=”true” android:fillEnable=”true”
![]()
上面順便列出了,當僅設定fillEanble為true時的效果,這兩個的標簽的效果完全相同。
(3)、android:repeatMode=”restart /reverse” 設定回放類型
[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%” android:duration=“700” android:fillBefore=“true” android:repeatCount=“1” android:repeatMode=“restart” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="700" android:fillBefore="true" android:repeatCount="1" android:repeatMode="restart"/> 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 plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <alpha xmlns:android=“http://schemas.android.com/apk/res/android” android:fromAlpha=“1.0” android:toAlpha=“0.1” android:duration=“3000” android:fillBefore=“true”> </alpha>
<?xml version="1.0" encoding="utf-8"?><alpha xmlns:android="http://schemas.android.com/apk/res/android" android:fromAlpha="1.0" android:toAlpha="0.1" android:duration="3000" android:fillBefore="true"></alpha>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[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <rotate xmlns:android=“http://schemas.android.com/apk/res/android” android:fromDegrees=“0” android:toDegrees=“-650” android:pivotX=“50%” android:pivotY=“50%” android:duration=“3000” android:fillAfter=“true”> </rotate>
<?xml version="1.0" encoding="utf-8"?><rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:toDegrees="-650" android:pivotX="50%" android:pivotY="50%" android:duration="3000" android:fillAfter="true"></rotate>圍繞自身從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軸坐標[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <translate xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXDelta=“0” android:toXDelta=“-80” android:fromYDelta=“0” android:toYDelta=“-80” android:duration=“2000” android:fillBefore=“true”> </translate>
<?xml version="1.0" encoding="utf-8"?><translate xmlns:android="http://schemas.android.com/apk/res/android" android:fromXDelta="0" android:toXDelta="-80" android:fromYDelta="0" android:toYDelta="-80" android:duration="2000" android:fillBefore="true"></translate>
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 plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <set xmlns:android=“http://schemas.android.com/apk/res/android” android:duration=“3000” android:fillAfter=“true”> <alpha android:fromAlpha=“0.0” android:toAlpha=“1.0”/> <scale android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%”/> <rotate android:fromDegrees=“0” android:toDegrees=“720” android:pivotX=“50%” android:pivotY=“50%”/> </set>
<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" android:duration="3000" android:fillAfter="true"> <alpha android:fromAlpha="0.0" android:toAlpha="1.0"/> <scale android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%"/> <rotate android:fromDegrees="0" android:toDegrees="720" android:pivotX="50%" android:pivotY="50%"/></set>七、實例——如何將動畫XML文件應用于控件中
上面我僅僅是列出了每個標簽及其屬性的意義及應用之后的效果演示,但上面是如何將定義動畫的xml應用到textView控件中的卻遲遲沒說,這一小節,就以scale動畫為例,講述如何將定義好的scle動作添加到指定控件中。
先看最終效果圖:
1、新建工程、新建scale動畫文件(scaleanim.xml)
新建一個工程,并且在res文件夾下,新建一個anim文件夾,然后再新建一個scaleanim.xml文件,結構如圖所示:
scaleanim.xml的代碼為:(從TextView中心點,從0放大到1.4倍,反復一次,最后還原到初始化狀態)
[html] view plain copy print?<?xml version=“1.0” encoding=“utf-8”?> <scale xmlns:android=“http://schemas.android.com/apk/res/android” android:fromXScale=“0.0” android:toXScale=“1.4” android:fromYScale=“0.0” android:toYScale=“1.4” android:pivotX=“50%” android:pivotY=“50%” android:duration=“700” android:fillBefore=“true” android:repeatCount=“1” android:repeatMode=“restart” />
<?xml version="1.0" encoding="utf-8"?><scale xmlns:android="http://schemas.android.com/apk/res/android" android:fromXScale="0.0" android:toXScale="1.4" android:fromYScale="0.0" android:toYScale="1.4" android:pivotX="50%" android:pivotY="50%" android:duration="700" android:fillBefore="true" android:repeatCount="1" android:repeatMode="restart"/>2、XML布局文件
[html] view plain copy print?<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:tools=“http://schemas.android.com/tools” android:layout_width=“match_parent” android:layout_height=“match_parent” android:orientation=“vertical” tools:context=“com.harvic.animation_demo.MainActivity” > <Button android:id=“@+id/btn_animation” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:layout_margin=“10d
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.harvic.animation_demo.MainActivity" > <Button android:id="@+id/btn_animation" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dip" android:text="scale animation"/> <TextView android:id="@+id/tv" android:layout_width="100dip" android:layout_height="200dip" android:background="#ff00ff" android:text="@string/hello_world" android:layout_gravity="center_horizontal"/></LinearLayout>3、java代碼
[java] view plain copy print?public class MainActivity extends Activity { Button scaleBtn ; Animation scaleAnimation; TextView tv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim); scaleBtn = (Button)findViewById(R.id.btn_animation); tv =(TextView)findViewById(R.id.tv); scaleBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub tv.startAnimation(scaleAnimation); } }); } }
public class MainActivity extends Activity { Button scaleBtn ; Animation scaleAnimation; TextView tv; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); scaleAnimation = AnimationUtils.loadAnimation(this, R.anim.scaleanim); scaleBtn = (Button)findViewById(R.id.btn_animation); tv =(TextView)findViewById(R.id.tv); scaleBtn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { // TODO Auto-generated method stub tv.startAnimation(scaleAnimation); } }); }}(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 謝謝!
新聞熱點
疑難解答