android 自定义view 动画效果,Android自定义view----音乐播放动画
先給大家看一下效果，因為我也不知道這個東西具體叫什么，標題上面寫的是"音樂播放動畫"，可能描述的不太準確。
效果圖.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)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 某班学生有50人会c语言的有40人,《离
- 下一篇： android点击事件的优先级,andr