鍍金池/ 教程/ Android/ alpha、scale、translate、rotate、set 的 xml 屬性及用法
聯(lián)合動畫的 XML 實現(xiàn)與使用示例
Interpolator 插值器
高級進階(二)
ObjectAnimator 基本使用
ValueAnimator 基本使用
alpha、scale、translate、rotate、set 的 xml 屬性及用法
PropertyValuesHolder 與 Keyframe
layoutAnimation 與 gridLayoutAnimation
自定義控件三部曲之動畫篇(十三)——實現(xiàn)ListView Item進入動畫
自定義控件三部曲之動畫篇(十二)——animateLayoutChanges與LayoutTransition
高級進階(一)
代碼生成 alpha、scale、translate、rotate、set 及插值器動畫
聯(lián)合動畫的代碼實現(xiàn)

alpha、scale、translate、rotate、set 的 xml 屬性及用法

一、概述

Android 的 animation 由四種類型組成:alpha、scale、translate、rotate,對應 android 官方文檔地址:《Animation Resources》

1、XML 配置文件中

alpha 漸變透明度動畫效果
scale 漸變尺寸伸縮動畫效果
translate 畫面轉換位置移動動畫效果
rotate 畫面轉移旋轉動畫效果

下面我們逐個講講每個標簽的屬性及用法。

2、動作文件存放位置

動作定義文件應該存放在 res/anim 文件夾下,訪問時采用 R.anim.XXX.xml 的方式,位置如圖:

http://wiki.jikexueyuan.com/project/android-animation/images/1.png" alt="" />

二、scale 標簽——調節(jié)尺寸

1、自有屬性

scale 標簽是縮放動畫,可以實現(xiàn)動態(tài)調控件尺寸的效果,有下面幾個屬性:

  • 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,做為起始點,如下圖中圖二所示

圖一 http://wiki.jikexueyuan.com/project/android-animation/images/1.gif" alt="" />

圖二 http://wiki.jikexueyuan.com/project/android-animation/images/2.png" alt="" />

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

圖一 http://wiki.jikexueyuan.com/project/android-animation/images/2.gif" alt="" />

圖二 http://wiki.jikexueyuan.com/project/android-animation/images/3.png" alt="" />

(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" />  

效果圖,及起始點坐標圖如下所示:

http://wiki.jikexueyuan.com/project/android-animation/images/3.gif" alt="" />

http://wiki.jikexueyuan.com/project/android-animation/images/4.png" alt="" />

2、從 Animation 類繼承的屬性

Animation 類是所有動畫(scale、alpha、translate、rotate)的基類,這里以 scale 標簽為例,講解一下,Animation 類所具有的屬性及意義。關于 Animation 類的官方文檔位置為:《Animation》

  • android:duration 動畫持續(xù)時間,以毫秒為單位
  • android:fillAfter 如果設置為 true,控件動畫結束時,將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設置為 true,控件動畫結束時,還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與 android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態(tài)
  • android:repeatCount 重復次數
  • android:repeatMode 重復類型,有 reverse 和 restart 兩個值,reverse 表示倒序回放,restart 表示重新放一遍,必須與 repeatCount 一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
  • android:interpolator 設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節(jié)中講解,后面會單獨列出一單講解。

對于 android:duration,就不再講解了,就是動畫的持續(xù)時長,以毫秒為單位,下面看看 android:fillAfter 和 android:fillBefore

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

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

http://wiki.jikexueyuan.com/project/android-animation/images/4.gif" alt="" />

(2)android:fillBefore 還原初始化狀態(tài)

<?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" http://wiki.jikexueyuan.com/project/android-animation/images/5.gif" alt="" />

android:fillEnable="true" http://wiki.jikexueyuan.com/project/android-animation/images/6.gif" alt="" />

上面順便列出了,當僅設定 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 http://wiki.jikexueyuan.com/project/android-animation/images/7.gif" alt="" />

androidRepeatMode 設為 reverse http://wiki.jikexueyuan.com/project/android-animation/images/8.gif" alt="" />

三、alpha 標簽——調節(jié)透明度

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>  

http://wiki.jikexueyuan.com/project/android-animation/images/9.gif" alt="" />

2、從 Animation 類繼承的屬性

  • android:duration 動畫持續(xù)時間,以毫秒為單位
  • android:fillAfter 如果設置為 true,控件動畫結束時,將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設置為 true,控件動畫結束時,還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與 android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態(tài)
  • android:repeatCount 重復次數
  • android:repeatMode 重復類型,有 reverse 和 restart 兩個值,reverse 表示倒序回放,restart 表示重新放一遍,必須與 repeatCount 一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
  • android:interpolator 設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節(jié)中講解,后面會單獨列出一單講解。

與 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 度 android:fromDegrees="0" android:toDegrees="-650" http://wiki.jikexueyuan.com/project/android-animation/images/10.gif" alt="" />

圍繞自身從 0 度順時針旋轉 650 度 android:fromDegrees="0" android:toDegrees="650" http://wiki.jikexueyuan.com/project/android-animation/images/11.gif" alt="" />

2、從 Animation 類繼承的屬性

  • android:duration 動畫持續(xù)時間,以毫秒為單位
  • android:fillAfter 如果設置為 true,控件動畫結束時,將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設置為 true,控件動畫結束時,還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與 android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態(tài)
  • android:repeatCount 重復次數
  • android:repeatMode 重復類型,有 reverse 和 restart 兩個值,reverse 表示倒序回放,restart 表示重新放一遍,必須與 repeatCount 一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
  • android:interpolator 設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節(jié)中講解,后面會單獨列出一單講解。

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

http://wiki.jikexueyuan.com/project/android-animation/images/12.gif" alt="" />

2、從 Animation 類繼承的屬性

  • android:duration 動畫持續(xù)時間,以毫秒為單位
  • android:fillAfter 如果設置為 true,控件動畫結束時,將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設置為 true,控件動畫結束時,還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與 android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態(tài)
  • android:repeatCount 重復次數
  • android:repeatMode 重復類型,有 reverse 和 restart 兩個值,reverse 表示倒序回放,restart 表示重新放一遍,必須與 repeatCount 一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
  • android:interpolator 設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節(jié)中講解,后面會單獨列出一單講解。

與 scale 標簽意義一樣,就不再綴述。

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

前面我們講解了各個標簽動畫的意義及用法,但他們都是獨立對控件起作用,假設我現(xiàn)在想上面的 textView 控件做一個動畫——從小到大,旋轉出場,而且透明度也要從 0 變成 1,即下面的這個效果,該怎么辦?

http://wiki.jikexueyuan.com/project/android-animation/images/13.gif" alt="" />

這就需要對指定的控件定義動作合集,Set 標簽就可以將幾個不同的動作定義成一個組;

屬性: set 標簽自已是沒有屬性的,他的屬性都是從 Animation 繼承而來,但當它們用于 Set 標簽時,就會對 Set 標簽下的所有子控件都產生作用。

屬性有:(從 Animation 類繼承的屬性)

  • android:duration 動畫持續(xù)時間,以毫秒為單位
  • android:fillAfter 如果設置為 true,控件動畫結束時,將保持動畫最后時的狀態(tài)
  • android:fillBefore 如果設置為 true,控件動畫結束時,還原到開始動畫前的狀態(tài)
  • android:fillEnabled 與 android:fillBefore 效果相同,都是在動畫結束時,將控件還原到初始化狀態(tài)
  • android:repeatCount 重復次數
  • android:repeatMode 重復類型,有 reverse 和 restart 兩個值,reverse 表示倒序回放,restart 表示重新放一遍,必須與 repeatCount 一起使用才能看到效果。因為這里的意義是重復的類型,即回放時的動作。
  • android:interpolator 設定插值器,其實就是指定的動作效果,比如彈跳效果等,不在這小節(jié)中講解,后面會單獨列出一單講解。

與 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 控件中的卻遲遲沒說,這一小節(jié),就以 scale 動畫為例,講述如何將定義好的 scle 動作添加到指定控件中。

先看最終效果圖:

http://wiki.jikexueyuan.com/project/android-animation/images/14.gif" alt="" />

1、新建工程、新建 scale 動畫文件(scaleanim.xml)

新建一個工程,并且在 res 文件夾下,新建一個 anim 文件夾,然后再新建一個 scaleanim.xml 文件,結構如圖所示:

http://wiki.jikexueyuan.com/project/android-animation/images/5.png" alt="" />

scaleanim.xml 的代碼為:(從 TextView 中心點,從 0 放大到 1.4 倍,反復一次,最后還原到初始化狀態(tài))

<?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 工程:是前六節(jié)動作代碼的集合,包含了前六小節(jié)里的所有代碼及動畫定義。

源碼下載地址:http://download.csdn.net/detail/harvic880925/8032579

請大家尊重原創(chuàng)者版權,轉載請標明出處:http://blog.csdn.net/harvic880925/article/details/39996643 謝謝!