android 自定义水波纹控件

最新推荐文章于 2024-08-25 03:29:01 发布

Wanghaha.

最新推荐文章于 2024-08-25 03:29:01 发布

阅读量600

点赞数

分类专栏：自定义View 文章标签： android

本文链接：https://blog.csdn.net/m0_46582892/article/details/127908749

版权

自定义View 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文将详细介绍如何在Android平台上创建一个自定义的水波纹效果控件，包括实现过程中的关键步骤和技术要点，帮助开发者打造独特的交互体验。

摘要由CSDN通过智能技术生成

import android.animation.ObjectAnimator
import android.animation.ValueAnimator
import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.RectF
import android.util.AttributeSet
import android.util.Property
import android.view.View
import android.view.animation.LinearInterpolator
import kotlin.math.min

/**
 * 水波纹控件
 */
class WaterView : View {

    private var mWidth = 0

    private var mHeight = 0

    private val mPaint: Paint by lazy {
        Paint().apply {
            isAntiAlias = true
            strokeWidth = dp2px(2.5f)
            style = Paint.Style.STROKE
            color = Color.parseColor("#FD6B6B")
        }
    }

    //水波纹的大小
    private lateinit var mRect: RectF

    //圆圈数量
    private val circleCount = 10

    //存储圆半径的大小
    private var circleRadius: FloatArray = FloatArray(circleCount)

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet?) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        mWidth = w
        mHeight = h
        mRect = RectF(0f, 0f, min(mWidth, mHeight) * 1.2f, min(mWidth, mHeight) * 1.2f)
        setWaveColor("#00D26C")
        startAnimation()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
           val avgAlpha=  255 / (mRect.height() / 2f)
            repeat(circleCount) {
            if (circleRadius[it] > 0) {
                mPaint.alpha = 255 - (avgAlpha * circleRadius[it]).toInt()
                canvas?.drawCircle(mWidth / 2f, mHeight / 2f, circleRadius[it], mPaint)
            }
        }
    }

    private fun dp2px(dpValue: Float): Float {
        val scale = context.resources.displayMetrics.density
        return (dpValue * scale + 0.5f)
    }

    /**
     * 当前圆的半径
     */
    private var currentCircleRadius = 0f

    private var animation:ObjectAnimator?  = null

    /**
     * 开始动画
     */
    @SuppressLint("WrongConstant")
    fun startAnimation() {
        if(animation?.isRunning == true){
            stopAnimation()
        }

        animation = ObjectAnimator.ofFloat(this, property, 0f, mRect.height() / 2f).apply {
            addUpdateListener {
                val avgSzie = (mRect.height() / 2f) / circleCount //平均大小
                repeat(circleCount) {
                    val radius = currentCircleRadius - (it * avgSzie)
                    if(radius > 0){
                        circleRadius[it] = radius
                    }else if(circleRadius[it] > 0){
                        circleRadius[it] = mRect.height()/2f + radius
                    }

                    if(circleRadius[it] > mRect.height()){
                        circleRadius[it] = 0f
                    }
                }
                invalidate()
            }
            repeatCount = ValueAnimator.INFINITE;//无限循环
            repeatMode = ValueAnimator.INFINITE;//
        }
        animation?.duration = 6000
        animation?.interpolator = LinearInterpolator()
        animation?.start()
    }

    /**
     * 停止动画
     */
    fun stopAnimation(){
        animation?.removeAllListeners()
        animation?.cancel()
    }

    /**
     * 设置波浪颜色
     */
    fun setWaveColor(color:String){
        mPaint.color = Color.parseColor(color)
    }

    /**
     * 自定义属性动画值
     */
    private var property = object : Property<WaterView, Float>(Float::class.java, "currentCircleRadius") {

            override fun get(waterView: WaterView): Float {
                return waterView.currentCircleRadius
            }

            override fun set(waterView: WaterView, value: Float) {
                waterView.currentCircleRadius = value
            }
    }
}

效果图：