Android 的 animation 由四種類型組成:alpha、scale、translate、rotate,對應 android 官方文檔地址:《Animation Resources》
alpha | 漸變透明度動畫效果 |
---|---|
scale | 漸變尺寸伸縮動畫效果 |
translate | 畫面轉換位置移動動畫效果 |
rotate | 畫面轉移旋轉動畫效果 |
下面我們逐個講講每個標簽的屬性及用法。
動作定義文件應該存放在 res/anim 文件夾下,訪問時采用 R.anim.XXX.xml 的方式,位置如圖:
http://wiki.jikexueyuan.com/project/android-animation/images/1.png" alt="" />
scale 標簽是縮放動畫,可以實現(xiàn)動態(tài)調控件尺寸的效果,有下面幾個屬性:
下面看一個實例,當 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="" />
Animation 類是所有動畫(scale、alpha、translate、rotate)的基類,這里以 scale 標簽為例,講解一下,Animation 類所具有的屬性及意義。關于 Animation 類的官方文檔位置為:《Animation》
對于 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="" />
<?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="" />
與 scale 標簽意義一樣,就不再綴述。
<?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="" />
與 scale 標簽意義一樣,就不再綴述。
<?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="" />
與 scale 標簽意義一樣,就不再綴述。
前面我們講解了各個標簽動畫的意義及用法,但他們都是獨立對控件起作用,假設我現(xiàn)在想上面的 textView 控件做一個動畫——從小到大,旋轉出場,而且透明度也要從 0 變成 1,即下面的這個效果,該怎么辦?
http://wiki.jikexueyuan.com/project/android-animation/images/13.gif" alt="" />
這就需要對指定的控件定義動作合集,Set 標簽就可以將幾個不同的動作定義成一個組;
屬性: set 標簽自已是沒有屬性的,他的屬性都是從 Animation 繼承而來,但當它們用于 Set 標簽時,就會對 Set 標簽下的所有子控件都產生作用。
屬性有:(從 Animation 類繼承的屬性)
與 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 應用到 textView 控件中的卻遲遲沒說,這一小節(jié),就以 scale 動畫為例,講述如何將定義好的 scle 動作添加到指定控件中。
先看最終效果圖:
http://wiki.jikexueyuan.com/project/android-animation/images/14.gif" alt="" />
新建一個工程,并且在 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"
/>
<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>
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 謝謝!