已經有好久沒有寫我的文章了,想自己已經快脫離這個行業(yè)了,現(xiàn)在想起來也是挺逗的瓢对,也是自己偷懶吧。
最近項目中有一些自定義的view需要自己做了胰苏,所以我就攬下了一個任務硕蛹。就是聲音采集的時候的動畫。當然這種動畫在網上有好多種硕并,我就想記錄一下思路法焰,以免自己給忘記了。
效果圖
初始化代碼
核心代碼
kotlin代碼:
private fun drawSegment(canvas: Canvas?) {
for (item in -(size /2)..(size /2)) {
var actionX =interval * item +centerX
? ? ? ? var moveY = moveY()
canvas!!.save()
canvas!!.drawLine(
actionX.toFloat(),
? ? ? ? ? ? ? ? (centerY - moveY).toFloat(),
? ? ? ? ? ? ? ? actionX.toFloat(),
? ? ? ? ? ? ? ? (centerY + moveY).toFloat(),
? ? ? ? ? ? ? ? paint
? ? ? ? )
canvas!!.restore()
}
if (range !=0)
postInvalidateDelayed(100L)
}
java代碼:
private void drawSegment(Canvas canvas) {
for (int i = -size /2; i
int actionX =interval * i +centerX;
? ? ? ? int moveY = moveY();
? ? ? ? canvas.save();
? ? ? ? canvas.drawLine(
actionX,
? ? ? ? ? ? ? ? (centerY - moveY),
? ? ? ? ? ? ? ? actionX,
? ? ? ? ? ? ? ? (centerY + moveY),
? ? ? ? ? ? ? ? paint
? ? ? ? );
? ? ? ? canvas.restore();
? ? }
if (range !=0)
postInvalidateDelayed(100L);
}
畫指定的條目線倔毙,size是初始定義的條目數(shù)量埃仪,從中心擴散條目,這樣布局會平均一點陕赃。效果可以看效果圖卵蛉。
波紋跳動核心代碼:
kotlin代碼:
private fun moveY(): Int {
if (range ==0) {
range =1
? ? }
var rand = Random().nextInt(range)
if (rand ==0) {
rand =1
? ? }
var moveY = Random().nextInt(rand)
if (moveY ==0) {
moveY =1
? ? }
return moveY
}
java代碼:
private int moveY() {
if (range ==0) {
range =1;
? ? }
int rand =new Random().nextInt(range);
? ? if (rand ==0) {
rand =1;
? ? }
int moveY =new Random().nextInt(rand);
? ? if (moveY ==0) {
moveY =1;
? ? }
return moveY;
}
通過幅度range來計算變化的大小moveY。這個是條目的高度么库,通過變化高度來實現(xiàn)跳動的視覺效果傻丝。而moveY就是通過range的兩次隨機數(shù)來獲取的。代碼很清楚诉儒。
這樣就完成了非常簡單的語音波動VIEW葡缰,代碼非常簡單。當然也留了一個坑忱反,哈哈泛释!
完整的代碼
kotlin代碼:
class RecordingKtView : View {
private var paint: Paint? = Paint(Paint.ANTI_ALIAS_FLAG)
/**
* 跳動的條目熟練
*/
? ? private var size =36
? ? /**
* 中心x
*/
? ? private var centerX =0
? ? /**
* 中心y
*/
? ? private var centerY =0
? ? /**
* 間隔長度
*/
? ? private var interval =0
? ? /**
* 跳動幅度
*/
? ? var range: Int =0
? ? //初始化數(shù)據(jù)
? ? constructor(context: Context?) :super(context)
constructor(context: Context?, attrs: AttributeSet?) :super(context, attrs)
constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) :super(context, attrs, defStyleAttr)
init {
paint!!.color = Color.GREEN
? ? ? ? paint!!.strokeWidth =5f
? ? ? ? paint!!.strokeCap = Paint.Cap.ROUND
? ? }
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
centerX = w /2
? ? ? ? centerY = h /2
? ? ? ? interval = w /size
? ? }
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
drawSegment(canvas)
}
private fun drawSegment(canvas: Canvas?) {
for (itemin -(size /2)..(size /2)) {
var actionX =interval * item +centerX
? ? ? ? ? ? var moveY = moveY()
canvas!!.save()
canvas!!.drawLine(
actionX.toFloat(),
? ? ? ? ? ? ? ? ? ? (centerY - moveY).toFloat(),
? ? ? ? ? ? ? ? ? ? actionX.toFloat(),
? ? ? ? ? ? ? ? ? ? (centerY + moveY).toFloat(),
? ? ? ? ? ? ? ? ? ? paint
? ? ? ? ? ? )
canvas!!.restore()
}
if (range !=0)
postInvalidateDelayed(100L)
}
private fun moveY(): Int {
if (range ==0) {
range =1
? ? ? ? }
var rand = Random().nextInt(range)
if (rand ==0) {
rand =1
? ? ? ? }
var moveY = Random().nextInt(rand)
if (moveY ==0) {
moveY =1
? ? ? ? }
return moveY
}
}
java代碼:
public class RecordingView extends View {
private Paint paint;
? ? /**
* 條目數(shù)量
*/
? ? private int size =36;
? ? /**
* 屏幕中心x
*/
? ? private int centerX =0;
? ? /**
* 屏幕中心y
*/
? ? private int centerY =0;
? ? /**
* 間隔長度
*/
? ? private int interval =0;
? ? /**
* 跳動幅度
*/
? ? private int range =0;
? ? public RecordingView(Context context) {
super(context);
? ? ? ? init();
? ? }
public RecordingView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
? ? ? ? init();
? ? }
public RecordingView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
? ? ? ? init();
? ? }
private void init() {
paint =new Paint(Paint.ANTI_ALIAS_FLAG);
? ? ? ? paint.setColor(Color.GREEN);
? ? }
/**
* 改變跳的幅度
? ? * @param sing
? ? */
? ? public void setRange(int sing) {
this.range = sing;
? ? }
@Override
? ? protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
? ? ? ? centerX = w /2;
? ? ? ? centerY = h /2;
? ? ? ? interval = w /size;
? ? }
@Override
? ? protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
? ? ? ? drawSegment(canvas);
? ? }
private void drawSegment(Canvas canvas) {
for (int i = -size /2; i
int actionX =interval * i +centerX;
? ? ? ? ? ? int moveY = moveY();
? ? ? ? ? ? canvas.save();
? ? ? ? ? ? canvas.drawLine(
actionX,
? ? ? ? ? ? ? ? ? ? (centerY - moveY),
? ? ? ? ? ? ? ? ? ? actionX,
? ? ? ? ? ? ? ? ? ? (centerY + moveY),
? ? ? ? ? ? ? ? ? ? paint
? ? ? ? ? ? );
? ? ? ? ? ? canvas.restore();
? ? ? ? }
if (range !=0)
postInvalidateDelayed(100L);
? ? }
private int moveY() {
if (range ==0) {
range =1;
? ? ? ? }
int rand =new Random().nextInt(range);
? ? ? ? if (rand ==0) {
rand =1;
? ? ? ? }
int moveY =new Random().nextInt(rand);
? ? ? ? if (moveY ==0) {
moveY =1;
? ? ? ? }
return moveY;
? ? }
}