Android实战简易教程<六十三>（动画实现唱片播放界面）

对于Android动画的使用，唱片播放是十分经典的一例，我们通过实现唱片播放效果来对Android动画进行学习，具有很高的趣味性和实用性。

1.首先我们定义一下布局文件-pan_layout.xml:

[html] view
plaincopy

<?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(中间盘片的旋转动画)

[html] view
plaincopy

<?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(拨杆进入盘片动画):

[html] view
plaincopy

<?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(拨杆离开盘片动画):

[html] view
plaincopy

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

[java] view
plaincopy

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;  

      

    @Override  

    protected 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() {  

              

            @Override  

            public 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();  

    }  

      

}  

运行实例：



源码下载

喜欢的朋友关注我！谢谢