自定義簡易聲音波紋VIEW

已經有好久沒有寫我的文章了,想自己已經快脫離這個行業(yè)了,現(xiàn)在想起來也是挺逗的瓢对,也是自己偷懶吧。

最近項目中有一些自定義的view需要自己做了胰苏,所以我就攬下了一個任務硕蛹。就是聲音采集的時候的動畫。當然這種動畫在網上有好多種硕并,我就想記錄一下思路法焰,以免自己給忘記了。

效果圖

沒有聲音
有聲音的時候的跳動

初始化代碼

參數(shù)設置


核心代碼

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;

? ? }

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市缭受,隨后出現(xiàn)的幾起案子胁澳,更是在濱河造成了極大的恐慌,老刑警劉巖米者,帶你破解...
    沈念sama閱讀 216,919評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件韭畸,死亡現(xiàn)場離奇詭異宇智,居然都是意外死亡,警方通過查閱死者的電腦和手機胰丁,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,567評論 3 392
  • 文/潘曉璐 我一進店門随橘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人锦庸,你說我怎么就攤上這事机蔗。” “怎么了甘萧?”我有些...
    開封第一講書人閱讀 163,316評論 0 353
  • 文/不壞的土叔 我叫張陵萝嘁,是天一觀的道長。 經常有香客問我扬卷,道長牙言,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,294評論 1 292
  • 正文 為了忘掉前任怪得,我火速辦了婚禮咱枉,結果婚禮上,老公的妹妹穿的比我還像新娘徒恋。我一直安慰自己蚕断,他們只是感情好,可當我...
    茶點故事閱讀 67,318評論 6 390
  • 文/花漫 我一把揭開白布入挣。 她就那樣靜靜地躺著亿乳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪财岔。 梳的紋絲不亂的頭發(fā)上风皿,一...
    開封第一講書人閱讀 51,245評論 1 299
  • 那天,我揣著相機與錄音匠璧,去河邊找鬼桐款。 笑死,一個胖子當著我的面吹牛夷恍,可吹牛的內容都是我干的魔眨。 我是一名探鬼主播,決...
    沈念sama閱讀 40,120評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼酿雪,長吁一口氣:“原來是場噩夢啊……” “哼遏暴!你這毒婦竟也來了?” 一聲冷哼從身側響起指黎,我...
    開封第一講書人閱讀 38,964評論 0 275
  • 序言:老撾萬榮一對情侶失蹤朋凉,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后醋安,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體杂彭,經...
    沈念sama閱讀 45,376評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡墓毒,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,592評論 2 333
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了亲怠。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片所计。...
    茶點故事閱讀 39,764評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖团秽,靈堂內的尸體忽然破棺而出主胧,到底是詐尸還是另有隱情,我是刑警寧澤习勤,帶...
    沈念sama閱讀 35,460評論 5 344
  • 正文 年R本政府宣布踪栋,位于F島的核電站,受9級特大地震影響图毕,放射性物質發(fā)生泄漏己英。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,070評論 3 327
  • 文/蒙蒙 一吴旋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧厢破,春花似錦荣瑟、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,697評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至见坑,卻和暖如春嚷掠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荞驴。 一陣腳步聲響...
    開封第一講書人閱讀 32,846評論 1 269
  • 我被黑心中介騙來泰國打工不皆, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人熊楼。 一個月前我還...
    沈念sama閱讀 47,819評論 2 370
  • 正文 我出身青樓霹娄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親鲫骗。 傳聞我的和親對象是個殘疾皇子犬耻,可洞房花燭夜當晚...
    茶點故事閱讀 44,665評論 2 354

推薦閱讀更多精彩內容

  • 從今天開始算起,除了六一放假执泰,端午節(jié)放假枕磁,本學期孩子們在校的時間還有20天的時間,6月26日期末考試术吝,7月初孩子們...
    瑤花琪樹Ms趙閱讀 453評論 1 0
  • 這是一本寫給成人看的童話書计济。 作家安東尼·德·圣·叭孜克蘇佩里的一生充滿神奇色彩。除了寫作之外峭咒,他飛行員的身份...
    特立獨行貓一只閱讀 300評論 0 2
  • 我知道我自己是行動力弱的人税弃,想法很多,但是就是行動不起來凑队。而自己的舊有的模式在限制著我则果。我已經陷在負面的情緒里有兩...
    小寶媽_b9af閱讀 192評論 0 0