Android實戰簡易教程-第六十三槍（動畫實現唱片播放介面）

標籤：android   動畫   唱片播放   

對於Android動畫的使用，唱片播放是十分經典的一例，我們通過實現唱片播放效果來對Android動畫進行學習，具有很高的趣味性和實用性。

1.首先我們定義一下布局檔案-pan_layout.xml:

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/layout_pan"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_centerHorizontal="true"    android:layout_centerVertical="true"    android:layout_marginTop="30dp"    android:gravity="center"    android:orientation="vertical" >    <FrameLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:src="@drawable/game_title" />        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:text="歌曲"            android:textColor="@color/white"            android:textSize="20sp" />    </FrameLayout>    <FrameLayout        android:layout_width="260dp"        android:layout_height="wrap_content" >        <ImageView            android:id="@+id/imageView1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:src="@drawable/game_disc" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:src="@drawable/game_disc_light" />        <ImageButton            android:id="@+id/btn_play_start"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center"            android:background="@drawable/play_button_icon" />        <ImageView            android:id="@+id/imageView2"            android:layout_width="50sp"            android:layout_height="140sp"            android:layout_gravity="right"            android:src="@drawable/index_pin" /><!-- 撥杆 -->    </FrameLayout></LinearLayout>

這裡我們廣泛使用了FrameLayout布局，可以進行嵌套。

2.定義動畫檔案，這裡我們共使用了三個動畫問價

a.rotate.xml(中間碟片的旋轉動畫)

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" ><!-- 一次2400毫秒，重複3次 -->    <rotate        android:duration="2400"        android:fromDegrees="0"        android:pivotX="50%"        android:pivotY="50%"        android:repeatCount="3"        android:toDegrees="359" /></set>

b.rotate_45.xml(撥杆進入碟片動畫):

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <rotate        android:duration="300"        android:fromDegrees="0"        android:pivotX="45%"        android:pivotY="10%"        android:repeatCount="0"        android:toDegrees="20" /></set>

c.rotate_d_45.xml(撥杆離開碟片動畫):

<?xml version="1.0" encoding="utf-8"?><set xmlns:android="http://schemas.android.com/apk/res/android" >    <rotate        android:duration="300"        android:fromDegrees="20"        android:pivotX="45%"        android:pivotY="10%"        android:repeatCount="0"        android:toDegrees="0" /></set>

3.MainActivity.java:

package com.yayun.guessmusic.ui;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.animation.Animation;import android.view.animation.Animation.AnimationListener;import android.view.animation.AnimationUtils;import android.view.animation.LinearInterpolator;import android.widget.ImageButton;import android.widget.ImageView;import com.yayun.guessmusic.R;public class MainActivity extends Activity {// 唱片相關動畫private Animation mPanAnim;private LinearInterpolator mPanLin;//動畫勻速播放private Animation mBarInAnim;private LinearInterpolator mBarInLin;//動畫勻速播放private Animation mBarOutAnim;private LinearInterpolator mBarOutLin;//動畫勻速播放// 唱片控制項private ImageView mViewPan;// 撥杆控制項private ImageView mViewPanBar;// Play 按鍵事件private ImageButton mBtnPlayStart;// 當前動畫是否正在運行private boolean mIsRunning = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);mBtnPlayStart = (ImageButton)findViewById(R.id.btn_play_start);mBtnPlayStart.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View arg0) {handlePlayButton();}});mViewPanBar = (ImageView)findViewById(R.id.imageView2);mPanLin = new LinearInterpolator();mPanAnim.setInterpolator(mPanLin);mPanAnim.setAnimationListener(new AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {            // 撥杆開始動畫            mViewPanBar.startAnimation(mBarOutAnim);            }            @Override            public void onAnimationRepeat(Animation animation) {            }        });mBarInAnim = AnimationUtils.loadAnimation(this, R.anim.rotate_45);mBarInLin = new LinearInterpolator();mBarInAnim.setFillAfter(true);mBarInAnim.setInterpolator(mBarInLin);mBarInAnim.setAnimationListener(new AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {            // 唱片動畫                        mViewPan.startAnimation(mPanAnim);                        }            @Override            public void onAnimationRepeat(Animation animation) {            }        });mBarOutAnim = AnimationUtils.loadAnimation(this, R.anim.rotate_d_45);mBarOutLin = new LinearInterpolator();mBarOutAnim.setFillAfter(true);mBarOutAnim.setInterpolator(mBarOutLin);mBarOutAnim.setAnimationListener(new AnimationListener() {            @Override            public void onAnimationStart(Animation animation) {            }            @Override            public void onAnimationEnd(Animation animation) {            // 整套動畫播放完畢            mIsRunning = false;            mBtnPlayStart.setVisibility(View.VISIBLE);            }            @Override            public void onAnimationRepeat(Animation animation) {                        }        });}    /**     * 處理圓盤中間的播放按鈕，就是開始播放音樂     */private void handlePlayButton() {if (mViewPanBar != null) {if (!mIsRunning) {mIsRunning = true;// 撥杆進入動畫，開始按鈕不可見mViewPanBar.startAnimation(mBarInAnim);mBtnPlayStart.setVisibility(View.INVISIBLE);}}}@Override    public void onPause() {        mViewPan.clearAnimation();                super.onPause();    }}

運行執行個體：

源碼下載

喜歡的朋友關注我！謝謝

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

Android實戰簡易教程-第六十三槍（動畫實現唱片播放介面）