這裡我們實作一個簡單的逐幀動畫,即一組圖檔快速輪換的動畫效果。
動畫的布局檔案:(這個xml檔案在AS2.2隻能放在drawable目錄下,低版本或許可以放在anim目錄)
<span style="font-size:14px;"><pre name="code" class="java"><?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false"> <strong><span style="color:#cc0000;"><!-- onshot 是否隻輪詢一次--></span>
<span style="color:#cc0000;"> <!-- 每個Item代表一幀,即一張圖檔。 duration 每幀的持續時間--></span></strong>
<item android:drawable="@drawable/order_loading_1" android:duration="150" />
<item android:drawable="@drawable/order_loading_2" android:duration="150" />
<item android:drawable="@drawable/order_loading_3" android:duration="150" />
<item android:drawable="@drawable/order_loading_4" android:duration="150" />
</animation-list></span>
頁面的布局檔案:(使用ImageView作為動畫載體)
<span style="font-size:14px;"> <ImageView
android:visibility="gone"
android:layout_centerInParent="true"
android:layout_marginBottom="50dp"
android:id="@+id/img_loading"
android:layout_width="145dp"
android:layout_height="138dp" /></span>
代碼實作:
<span style="font-size:14px;"> /**
* 初始化動畫
*/
private void initAnim() {
imgLoading.setBackgroundResource(R.drawable.order_loading);
animLoading = (AnimationDrawable) imgLoading.getBackground();
}</span>
<span style="font-size:14px;"><pre name="code" class="java"> // 展示 并開始動畫
animLoading.start();
// 結束動畫
if (animLoading.isRunning()) {
animLoading.stop();
}</span>
注意:在這裡釋放動畫圖檔資源會報錯,圖檔資源已釋放。自帶的回收機制會自動進行回收。
下面繼續實作簡單的屬性動畫,并帶聲音。
動畫的布局檔案:
<div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?></span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"><set xmlns:android="http://schemas.android.com/apk/res/android"></span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> <translate</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:duration="400"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:fromXDelta="0"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:fromYDelta="0"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:toXDelta="0"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:toYDelta="-580" /></span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> <scale android:duration="400"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:fromXScale="1"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:fromYScale="1"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:pivotX="50%"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:pivotY="50%"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:toXScale="1.3"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:toYScale="1.3" /></span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"></set></span></div>
頁面的布局檔案:(使用ImageView作為動畫載體)
<div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> <ImageView</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:id="@+id/rocket"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:layout_width="wrap_content"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:layout_height="wrap_content"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:layout_alignParentBottom="true"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:layout_centerHorizontal="true"</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> android:src="@drawable/rocket"/></span></div>
代碼實作:
<span style="font-size:14px;"> ImageView rocket;//火箭</span>
<span style="font-size:14px;"> SoundPool soundPool;// 聲音</span>
<span style="font-size:14px;"> /**
* 初始化動畫
*/
private void initAnim() {</span><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"><span style="white-space:pre"> </span> Animation animation = AnimationUtils.loadAnimation(getActivity(), R.anim.rocket_anim);</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> animation.setAnimationListener(new Animation.AnimationListener() {</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> @Override</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> public void onAnimationStart(Animation animation) {</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> rocket.setVisibility(View.VISIBLE);</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> // 播放音效</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> soundPool.play(1, 1, 1, 0, 0, 1);</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> }</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> @Override</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> public void onAnimationEnd(Animation animation) {</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> rocket.setVisibility(View.GONE);</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> }</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> @Override</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> public void onAnimationRepeat(Animation animation) {</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> }</span></div><div yne-bulb-block="paragraph" style="white-space: pre-wrap; line-height: 1.5;"><span style="font-size:14px;"> });</span></div><span style="font-size:14px;"> }</span>
<span style="font-size:14px;"> //配置火箭聲音
private void loadSound() {
soundPool = new SoundPool(2, AudioManager.STREAM_SYSTEM, 5);
soundPool.load(getActivity(), R.raw.rocket, 1);
}
</span>
<span style="font-size:14px;"> // 開始動畫
rocket.startAnimation(animation);
</span>
注意:将聲音檔案放在raw檔案下