最近接了一下新需求,就像录音的按钮…
之前在微信小程序上也写过->小程序录音及其动画
去年在android上也实现过….下面是去年实现的时候的代码
大概这样
把之前android写过的代码放上来吧,也是一个笔记…
/********************************************************************* * This file is part of seeyoutime project * Created by ys@yeshen.org on 2017/2/21. * Copyright (c) 2017 XingDian Co.,Ltd. - All Rights Reserved *********************************************************************/ /** * 短视频录制界面的开始录制按钮,有如下特性: * 1,放大 * 2,显示当前进度 */ class ProgressRecordView : View { private var diameter = 0F private var barPressWidth = 0F private var barPressColor = 0xFFFFFFFF.toInt() private var bgPressColor = 0xFFFFFFFF.toInt() private var bgWidth = diameter private var bgInnerWidth = 0F private var bgInnerColor = 0xFFFFFFFF.toInt() private var bgColor = 0xFFFFFFFF.toInt() private val pressPaint = Paint() private val pressBgPaint = Paint() private val pressBarBounds = RectF() private val bgPaint = Paint() private val bgInnerPaint = Paint() val minProgress = 0 val maxProgress = 360 var pressing = false var progress = 0 set(value) { field = value postInvalidate() } constructor(context: Context) : this(context, null) constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0) constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) { val array = context.obtainStyledAttributes(attrs, R.styleable.ProgressRecordView) //宽度都是指直径 barPressWidth = array.getDimension(R.styleable.ProgressRecordView_barPressWidth, barPressWidth) bgInnerWidth = array.getDimension(R.styleable.ProgressRecordView_bgInnerWidth, bgInnerWidth) bgWidth = array.getDimension(R.styleable.ProgressRecordView_bgWidth, bgWidth) barPressColor = array.getColor(R.styleable.ProgressRecordView_barPressColor, barPressColor) bgPressColor = array.getColor(R.styleable.ProgressRecordView_bgPressColor, bgPressColor) bgInnerColor = array.getColor(R.styleable.ProgressRecordView_bgInnerColor, bgInnerColor) bgColor = array.getColor(R.styleable.ProgressRecordView_bgColor, bgColor) array.recycle() } override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, widthMeasureSpec) //以宽度为准的正方形 } override fun onSizeChanged(w: Int, h: Int, oldWidth: Int, oldHeight: Int) { super.onSizeChanged(w, h, oldWidth, oldHeight) diameter = w.toFloat() //set-up bounds pressBarBounds.set(barPressWidth / 2, barPressWidth / 2, width - barPressWidth / 2, height - barPressWidth / 2) //set-up paint pressPaint.color = barPressColor pressPaint.isAntiAlias = true pressPaint.style = Paint.Style.STROKE pressPaint.strokeWidth = barPressWidth pressBgPaint.color = bgPressColor pressBgPaint.isAntiAlias = true pressBgPaint.style = Paint.Style.FILL bgPaint.color = bgColor bgPaint.isAntiAlias = true bgPaint.style = Paint.Style.FILL bgInnerPaint.color = bgInnerColor bgInnerPaint.isAntiAlias = true bgInnerPaint.style = Paint.Style.FILL } override fun onDraw(canvas: Canvas?) { super.onDraw(canvas) if (pressing) { canvas?.drawCircle(diameter / 2, diameter / 2, diameter / 2 - 1, pressBgPaint) canvas?.drawArc(pressBarBounds, -90F, progress.toFloat(), false, pressPaint) } else { canvas?.drawCircle(diameter / 2, diameter / 2, bgWidth / 2, bgPaint) canvas?.drawCircle(diameter / 2, diameter / 2, bgInnerWidth / 2, bgInnerPaint) } } }
values/attrs.xml
<?xml version="1.0" encoding="utf-8"?> <resources> ... <declare-styleable name="ProgressRecordView"> <attr name="barPressWidth" format="dimension" /> <attr name="bgInnerWidth" format="dimension" /> <attr name="bgWidth" format="dimension" /> <attr name="barPressColor" format="color" /> <attr name="bgPressColor" format="color" /> <attr name="bgInnerColor" format="color" /> <attr name="bgColor" format="color" /> </declare-styleable> </resources>
这样调用
<org.yeshen.seeyoutime.ProgressRecordView android:id="@+id/edit_video_record_btn" android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center_horizontal" android:layout_marginTop="70dp" app:barPressColor="@color/yellow.light" app:barPressWidth="5dp" app:bgColor="@color/white" app:bgInnerColor="@color/yellow.light" app:bgInnerWidth="90dp" app:bgPressColor="@color/white" app:bgWidth="100dp" />
mRecordBtn.setOnClickListener {} mRecordBtn.setOnTouchListener { _, event -> when (event.action) { MotionEvent.ACTION_DOWN -> { mRecordBtnHint.visibility = View.INVISIBLE (mRecordBtn.tag as? ValueAnimator)?.cancel() mRecordBtn.tag = ObjectAnimator.ofInt(mRecordBtn.minProgress, mRecordBtn.maxProgress).apply { duration = VideoControlView.SHORT_VIDEO_LENGTH addUpdateListener { animation -> mRecordBtn.pressing = true mRecordBtn.progress = animation.animatedValue as Int } addListener(object : AnimatorListenerAdapter() { override fun onAnimationEnd(animation: Animator) { mRecordBtn.tag = null mPlayerView?.stopRecord() } }) start() } mPlayerView?.record() } MotionEvent.ACTION_UP -> { (mRecordBtn.tag as? ValueAnimator)?.cancel() } } return@setOnTouchListener false } mRecordBtn.pressing = false mRecordBtn.progress = 0
文章来源: android录音的动画自定义View