先給大家看一下效果，因為我也不知道這個東西具體叫什么，標題上面寫的是"音樂播放動畫"，可能描述的不太準確。

效果圖.gif

前言

最近項目中做了一個音頻播放的功能，播放條上需要一個如上圖的效果。一開始為了趕時間，就用幀動畫實現(xiàn)的，但是效果看起來沒那么絲滑。今天沒啥事，就抽時間用自定義view的方式了一下。看上圖的對比，自定義view的實現(xiàn)效果是不是像德芙一樣絲滑。

優(yōu)勢

自定義view實現(xiàn)的方式比起幀動畫的方式，有以下幾個優(yōu)勢。

1.視覺效果更佳。

2.幀動畫需要不同幀的圖片，而自定義view的方式使用paint畫出來的，更剩資源。

3.可變化性強，可以通過屬性來改變指針的顏色、寬高比、指針個數(shù)，從而應(yīng)用到更多場景。

4.使用方便，就像使用TextView、Button等。

怎么使用

使用非常簡單，就像普通的控件一樣，在xml配置屬性，然后在Activity里，調(diào)用start()、stop()來控制開始與暫停。

android:id="@+id/voise_playint_icon"

android:layout_width="40dp"

android:layout_height="40dp"

android:layout_below="@+id/btn_stop"

android:layout_marginLeft="300dp"

android:layout_marginTop="50dp"

android:background="#CCCCCC"

android:padding="5dp"

voisePlayingIconAttr:color="#FF6565"

voisePlayingIconAttr:pointer_num="4"

voisePlayingIconAttr:pointer_width="5" />

//開始

voisePlayingIcon.start();

//停止

voisePlayingIcon.stop();

實現(xiàn)步驟

- 思路

1.自定義view,在畫布上依次畫幾個不同高度的矩形。

2.開啟一個子線程，在這個子線程中寫一個死循環(huán)，來模擬正弦函數(shù)的過程，x軸方向取值范圍是0到正無窮。然后去Y軸的絕對值，那么Y軸的取值范圍就是0到1。

3.利用上一步y(tǒng)軸取值來乘以控件高度，改變每個小舉行的高度。

4.刷新畫布。

5.這樣就達到了想要的效果，并且小矩形的高度變化速度，是符合正弦變化速率的。

代碼實現(xiàn)

代碼不是很多，這里直接貼出代碼，具體講解看代碼中的注釋。

public class VoisePlayingIcon extends View {

//畫筆

private Paint paint;

//跳動指針的集合

private List pointers;

//跳動指針的數(shù)量

private int pointerNum;

//邏輯坐標 原點

private float basePointX;

private float basePointY;

//指針間的間隙 默認5dp

private float pointerPadding;

//每個指針的寬度 默認3dp

private float pointerWidth;

//指針的顏色

private int pointerColor = Color.RED;

//控制開始/停止

private boolean isPlaying = false;

//子線程

private Thread myThread;

//指針波動速率

private int pointerSpeed;

public VoisePlayingIcon(Context context) {

super(context);

init();

}

public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

//取出自定義屬性

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);

pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);

pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);//指針的數(shù)量，默認為4

pointerWidth = DensityUtils.dp2px(getContext(),

ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));//指針的寬度，默認5dp

pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);

init();

}

public VoisePlayingIcon(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.voisePlayingIconAttr);

pointerColor = ta.getColor(R.styleable.voisePlayingIconAttr_color, Color.RED);

pointerNum = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_num, 4);

pointerWidth = DensityUtils.dp2px(getContext(), ta.getFloat(R.styleable.voisePlayingIconAttr_pointer_width, 5f));

pointerSpeed = ta.getInt(R.styleable.voisePlayingIconAttr_pointer_speed, 40);

init();

}

/**

* 初始化畫筆與指針的集合

*/

private void init() {

paint = new Paint();

paint.setAntiAlias(true);

paint.setColor(pointerColor);

pointers = new ArrayList<>();

}

/**

* 在onLayout中做一些，寬高方面的初始化

*

* @param changed

* @param left

* @param top

* @param right

* @param bottom

*/

@Override

protected void onLayout(boolean changed, int left, int top, int right, int bottom) {

super.onLayout(changed, left, top, right, bottom);

//獲取邏輯原點的，也就是畫布左下角的坐標。這里減去了paddingBottom的距離

basePointY = getHeight() - getPaddingBottom();

Random random = new Random();

if (pointers != null)

pointers.clear();

for (int i = 0; i < pointerNum; i++) {

//創(chuàng)建指針對象，利用0~1的隨機數(shù) 乘以 可繪制區(qū)域的高度。作為每個指針的初始高度。

pointers.add(new Pointer((float) (0.1 * (random.nextInt(10) + 1) * (getHeight() - getPaddingBottom() - getPaddingTop()))));

}

//計算每個指針之間的間隔 總寬度 - 左右兩邊的padding - 所有指針占去的寬度 然后再除以間隔的數(shù)量

pointerPadding = (getWidth() - getPaddingLeft() - getPaddingRight() - pointerWidth * pointerNum) / (pointerNum - 1);

}

/**

* 開始繪畫

*

* @param canvas

*/

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//將x坐標移動到邏輯原點，也就是左下角

basePointX = 0f + getPaddingLeft();

//循環(huán)繪制每一個指針。

for (int i = 0; i < pointers.size(); i++) {

//繪制指針，也就是繪制矩形

canvas.drawRect(basePointX,

basePointY - pointers.get(i).getHeight(),

basePointX + pointerWidth,

basePointY,

paint);

basePointX += (pointerPadding + pointerWidth);

}

}

/**

* 開始播放

*/

public void start() {

if (!isPlaying) {

if (myThread == null) {//開啟子線程

myThread = new Thread(new MyRunnable());

myThread.start();

}

isPlaying = true;//控制子線程中的循環(huán)

}

}

/**

* 停止子線程，并刷新畫布

*/

public void stop() {

isPlaying = false;

invalidate();

}

/**

* 處理子線程發(fā)出來的指令，然后刷新布局

*/

private Handler myHandler = new Handler() {

@Override

public void handleMessage(Message msg) {

super.handleMessage(msg);

invalidate();

}

};

/**

* 子線程，循環(huán)改變每個指針的高度

*/

public class MyRunnable implements Runnable {

@Override

public void run() {

for (float i = 0; i < Integer.MAX_VALUE; ) {//創(chuàng)建一個死循環(huán)，每循環(huán)一次i+0.1

try {

for (int j = 0; j < pointers.size(); j++) { //循環(huán)改變每個指針高度

float rate = (float) Math.abs(Math.sin(i + j));//利用正弦有規(guī)律的獲取0~1的數(shù)。

pointers.get(j).setHeight((basePointY - getPaddingTop()) * rate); //rate 乘以 可繪制高度，來改變每個指針的高度

}

Thread.sleep(pointerSpeed);//休眠一下下，可自行調(diào)節(jié)

if (isPlaying) { //控制開始/暫停

myHandler.sendEmptyMessage(0);

i += 0.1;

}

} catch (InterruptedException e) {

e.printStackTrace();

}

}

}

}

/**

* 指針類

*/

public class Pointer {

private float height;

public Pointer(float height) {

this.height = height;

}

public float getHeight() {

return height;

}

public void setHeight(float height) {

this.height = height;

}

}

}

自定義屬性如下：

這樣的效果可以用在音樂播放的播放條，同樣也可以當作一個Loading來使用。

希望該文對大家有一定幫助。如有疑問，歡迎交流。

總結(jié)

以上是生活随笔為你收集整理的android 自定义view 动画效果,Android自定义view----音乐播放动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。