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

来源：互联网发布：过期域名编辑：程序博客网时间：2024/05/16 14:20

对于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();  
    }  
      
}  

运行实例：

源码下载

喜欢的朋友关注我！谢谢

0 0