自定義控制元件三部曲之動畫篇（一）——alpha、scale、translate、rotate、set的xml屬性及用法

阿新 • • 發佈：2019-01-14

前言：這幾天做客戶回訪，感觸很大，使用者只要是留反饋資訊，總是一種恨鐵不成鋼的心態，想用你的app，卻是因為你的技術問題，讓他們不得不放棄，而你一個回訪電話卻讓他們盡釋前嫌，當最後把手機號留給他們以便隨時溝通的時候，總會發來一條條的鼓勵簡訊，讓我不自主的開始內疚。哎，多麼可愛的使用者，多麼無耐的現實。

相關文章：

一、概述

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裡的屬性這樣設定時，效果會怎樣呢：

<?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%，看看效果：

<?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;起始點位置如下圖中圖二所示：

圖一圖二

（3）、pivotX取值50%p時

前面說過，當取值在百分數後面加上一個字母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" />

效果圖，及起始點座標圖如下所示：

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:保持動畫結束的狀態

<?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 還原初始化狀態

<?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" 設定回放型別

<?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表示完全不透明

使用示例：

<?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

<?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軸座標

<?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程式碼為：

<?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倍，反覆一次，最後還原到初始化狀態）

<?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佈局檔案

<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程式碼

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工程：是前六節動作程式碼的集合，包含了前六小節裡的所有程式碼及動畫定義。

自定義控制元件三部曲之動畫篇（一）——alpha、scale、translate、rotate、set的xml屬性及用法

一、概述

1、XML配置檔案中

2、動作檔案存放位置

二、scale標籤——調節尺寸

1、自有屬性

2、從Animation類繼承的屬性

(1)android:fillAfter:保持動畫結束的狀態

（2）android:fillBefore 還原初始化狀態

（3）、android:repeatMode="restart /reverse" 設定回放型別

三、alpha標籤——調節透明度

1、自身屬性

2、從Animation類繼承的屬性

四、rotate標籤——旋轉

1、自身屬性

2、從Animation類繼承的屬性

五、translate標籤 —— 平移

1、自身屬性

2、從Animation類繼承的屬性

六、set標籤——定義動作合集

屬性：

七、例項——如何將動畫XML檔案應用於控制元件中

1、新建工程、新建scale動畫檔案（scaleanim.xml）

2、XML佈局檔案

3、JAVA程式碼

相關推薦