自定义View实现波浪荡漾效果

OpenLD

已于 2022-08-01 22:33:23 修改

阅读量686

点赞数 1

分类专栏： Android 文章标签：自定义View 水波纹

于 2022-08-01 22:32:21 首次发布

本文链接：https://blog.csdn.net/ldld1717/article/details/126102227

版权

Android 专栏收录该内容

124 篇文章 6 订阅

订阅专栏

本文介绍如何利用Path的贝塞尔曲线方法、属性动画和颜色叠加模式创建动态波浪效果。通过绘制多个不同参数的波形并设置动画，实现了视觉上的水波荡漾效果。代码示例中展示了自定义View的实现，包括波浪的绘制、动画配置以及颜色处理，最终在Android应用中展示了一个波光粼粼的波浪视图。

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

之前看到一些app中有波浪效果，很早就想自己实现下，但是都没时间做。今天有机会写一下，真的不难。这里涉及到Path的知识，贝塞尔曲线的知识，以及属性动画。这三者用好就能实现我们想要的效果。

wave

静态也给大家截两张图感受下。

下面划重点，简单捋一捋实现的思路。

1.使用Path的rQuadTo()方法，或者quadTo()方法可以很容易的绘制出二阶贝塞尔曲线。如果你还不知道这两个方法怎么用请自行学习，自己可以在onDraw()中拿Canvas画一画用一下这两个方法，也可以看注释，只要知道这两个方法的用法就好。贝塞尔曲线是什么也请自行学习，看下哔哩哔哩上的视频有个基本的认识即可。

2.你可以先试着画一个类似正弦波的前半段，之后再画出后半段。那这样一个类似正弦的完整的波形就画好了。然后重复画出这些波形，最终要得到一个水平方向延伸出屏幕的长长的波纹，屏幕左边之外要延伸出至少一个波长，右侧类似也要延伸出去一些，这样你动画移动的时候才能连贯不中断。

3.之后让Path在在属性动画的控制下横向向右偏移一个波长，记得这里使用线性加速器，无限循环。那运行一下就会得到一个看似水波的波纹动起来了。这时还没有水的感觉，那你就让Path连接好波纹的下方区域，使得其成为一个封闭的形状并进行完整的颜色填充，记得用蓝色哦。

4.一个波纹没有层次感，那简单，类似写法的波纹你给它来上三个，改改颜色、波长，动画持续时间以及波峰、波谷的位置，放在一起，再次运行一下不就有三个波纹在一起动了吗。

5.什么，你嫌三条水波融合的不协调相互覆盖，那你给画笔加上Xfermode好了，使用Mode.MULTIPLE模式就大功告成了，之后就快乐地荡荡荡荡荡荡漾吧。

下面贴一下自定义View的核心代码，真的是太简单了！！！

package com.openld.seniorui.testwave

import android.animation.ObjectAnimator
import android.animation.ValueAnimator
import android.content.Context
import android.graphics.*
import android.util.AttributeSet
import android.view.View
import android.view.animation.LinearInterpolator

/**
 * author: lllddd
 * created on: 2022/8/1 21:34
 * description:波浪View
 */
class WaveView @JvmOverloads constructor(
    context: Context?,
    attrs: AttributeSet? = null,
    defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    // View宽高
    private var mWidth = 0
    private var mHeight = 0

    // 第一个波浪的起点x y坐标
    private var mWaveBaseY1 = 0
    private var mWaveBaseX1 = 0

    // 第二个波浪的起点x y坐标
    private var mWaveBaseY2 = 0
    private var mWaveBaseX2 = 0

    // 第三个波浪的起点x y坐标
    private var mWaveBaseY3 = 0
    private var mWaveBaseX3 = 0

    // 波浪画笔
    private val mWavePaint1 = Paint()
    private val mWavePaint2 = Paint()
    private val mWavePaint3 = Paint()

    // 波浪Path
    private val mWavePath1 = Path()
    private val mWavePath2 = Path()
    private val mWavePath3 = Path()

    // 用于动画移动波浪以达到动效的作用，x轴偏移
    private var xOffset1 = -WAVE_LENGTH_1.toFloat()
    private var xOffset2 = -WAVE_LENGTH_2.toFloat()
    private var xOffset3 = -WAVE_LENGTH_2.toFloat()

    /**
     * 设置第一个波浪的x偏移
     *
     * @param xOffset x偏移
     */
    fun setXOffset1(xOffset: Float) {
        xOffset1 = xOffset
        invalidate()
    }

    /**
     * 设置第二个波浪的x偏移
     *
     * @param xOffset x偏移
     */
    fun setXOffset2(xOffset: Float) {
        xOffset2 = xOffset
        invalidate()
    }

    /**
     * 设置第三个波浪的x偏移
     *
     * @param xOffset x偏移
     */
    fun setXOffset3(xOffset: Float) {
        xOffset3 = xOffset
        invalidate()
    }

    private fun configAnimators() {
        val animator1 = ObjectAnimator.ofFloat(this, "xOffset1", 0f, 1f * WAVE_LENGTH_1)
        animator1.duration = 2600
        animator1.repeatCount = ValueAnimator.INFINITE
        animator1.interpolator = LinearInterpolator()

        val animator2 = ObjectAnimator.ofFloat(this, "xOffset2", 0f, 1f * WAVE_LENGTH_2)
        animator2.duration = 3200
        animator2.repeatCount = ValueAnimator.INFINITE
        animator2.interpolator = LinearInterpolator()

        val animator3 = ObjectAnimator.ofFloat(this, "xOffset3", 0f, 1f * WAVE_LENGTH_3)
        animator3.duration = 4000
        animator3.repeatCount = ValueAnimator.INFINITE
        animator3.interpolator = LinearInterpolator()

        animator1.start()
        animator2.start()
        animator3.start()
    }

    /**
     * 初始化画笔
     */
    private fun initPaints() {
        mWavePaint1.color = Color.parseColor("#6495ed")
        mWavePaint1.strokeWidth = 3f
        mWavePaint1.isAntiAlias = true
        mWavePaint1.xfermode = PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)
        mWavePaint1.style = Paint.Style.FILL_AND_STROKE

        mWavePaint2.color = Color.parseColor("#00bfff")
        mWavePaint2.strokeWidth = 3f
        mWavePaint2.isAntiAlias = true
        mWavePaint2.xfermode = PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)
        mWavePaint2.style = Paint.Style.FILL_AND_STROKE

        mWavePaint3.color = Color.parseColor("#87ceeb")
        mWavePaint3.strokeWidth = 3f
        mWavePaint3.isAntiAlias = true
        mWavePaint3.xfermode = PorterDuffXfermode(PorterDuff.Mode.MULTIPLY)
        mWavePaint3.style = Paint.Style.FILL_AND_STROKE
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        mWidth = measuredWidth
        mHeight = measuredHeight

        // 初始化曲线起始坐标
        mWaveBaseX1 = -WAVE_LENGTH_1
        mWaveBaseY1 = mHeight shr 1

        mWaveBaseX2 = -WAVE_LENGTH_2
        mWaveBaseY2 = mHeight shr 1

        mWaveBaseX3 = -WAVE_LENGTH_3
        mWaveBaseY3 = mHeight shr 1
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        drawWave1(canvas)
        drawWave2(canvas)
        drawWave3(canvas)
    }

    private fun drawWave3(canvas: Canvas) {
        mWavePath3.reset()
        mWavePath3.moveTo(mWaveBaseX3 + xOffset3, mWaveBaseY3.toFloat())

        // 画上方曲线
        var i: Int = 0
        while (i <= mWidth + WAVE_LENGTH_3) {
            mWavePath3.rQuadTo(
                QUARTER_WAVE_LENGTH_3.toFloat(),
                -170f,
                HALF_WAVE_LENGTH_3.toFloat(),
                0f
            )
            mWavePath3.rQuadTo(
                QUARTER_WAVE_LENGTH_3.toFloat(),
                170f,
                HALF_WAVE_LENGTH_3.toFloat(),
                0f
            )
            i += WAVE_LENGTH_3
        }

        // 连接下方成封闭形状
        mWavePath3.lineTo((mWaveBaseX3 + i * WAVE_LENGTH_3).toFloat(), mHeight.toFloat())
        mWavePath3.lineTo(mWaveBaseX3.toFloat(), mHeight.toFloat())
        mWavePath3.close()

        canvas.drawPath(mWavePath3, mWavePaint3)
    }

    private fun drawWave2(canvas: Canvas) {
        mWavePath2.reset()
        mWavePath2.moveTo(mWaveBaseX2 + xOffset2, mWaveBaseY2.toFloat())

        // 画上方曲线
        var i: Int = 0
        while (i <= mWidth + WAVE_LENGTH_2) {
            mWavePath2.rQuadTo(
                QUARTER_WAVE_LENGTH_2.toFloat(),
                -120f,
                HALF_WAVE_LENGTH_2.toFloat(),
                0f
            )
            mWavePath2.rQuadTo(
                QUARTER_WAVE_LENGTH_2.toFloat(),
                120f,
                HALF_WAVE_LENGTH_2.toFloat(),
                0f
            )
            i += WAVE_LENGTH_2
        }

        // 连接下方成封闭形状
        mWavePath2.lineTo((mWaveBaseX2 + i * WAVE_LENGTH_2).toFloat(), mHeight.toFloat())
        mWavePath2.lineTo(mWaveBaseX2.toFloat(), mHeight.toFloat())
        mWavePath2.close()

        canvas.drawPath(mWavePath2, mWavePaint2)
    }

    private fun drawWave1(canvas: Canvas) {
        mWavePath1.reset()
        mWavePath1.moveTo(mWaveBaseX1 + xOffset1, mWaveBaseY1.toFloat())

        // 画上方曲线
        var i: Int = 0
        while (i <= mWidth + WAVE_LENGTH_1) {
            mWavePath1.rQuadTo(
                QUARTER_WAVE_LENGTH_1.toFloat(),
                -200f,
                HALF_WAVE_LENGTH_1.toFloat(),
                0f
            )
            mWavePath1.rQuadTo(
                QUARTER_WAVE_LENGTH_1.toFloat(),
                200f,
                HALF_WAVE_LENGTH_1.toFloat(),
                0f
            )
            i += WAVE_LENGTH_1
        }

        // 连接下方成封闭形状
        mWavePath1.lineTo((mWaveBaseX1 + i * WAVE_LENGTH_1).toFloat(), mHeight.toFloat())
        mWavePath1.lineTo(mWaveBaseX1.toFloat(), mHeight.toFloat())
        mWavePath1.close()

        canvas.drawPath(mWavePath1, mWavePaint1)
    }

    companion object {
        // 波浪一：波长、半波长、四分之一波长
        private const val WAVE_LENGTH_1 = 1500
        private const val HALF_WAVE_LENGTH_1 = WAVE_LENGTH_1 shr 1
        private const val QUARTER_WAVE_LENGTH_1 = HALF_WAVE_LENGTH_1 shr 1

        // 波浪二：波长、半波长、四分之一波长
        private const val WAVE_LENGTH_2 = 2000
        private const val HALF_WAVE_LENGTH_2 = WAVE_LENGTH_2 shr 1
        private const val QUARTER_WAVE_LENGTH_2 = HALF_WAVE_LENGTH_2 shr 1

        // 波浪三：波长、半波长、四分之一波长
        private const val WAVE_LENGTH_3 = 3200
        private const val HALF_WAVE_LENGTH_3 = WAVE_LENGTH_3 shr 1
        private const val QUARTER_WAVE_LENGTH_3 = HALF_WAVE_LENGTH_3 shr 1
    }

    init {
        initPaints()
    }

    override fun onFinishInflate() {
        super.onFinishInflate()
        configAnimators()
    }
}

由于此处时间仓促，没有对该自定义波纹View做很好的封装，目的仅仅是使用Path、贝赛尔曲线、属性动画来实现效果，如果有需要可以再对该View封装一下，方便下次复用。此外你要是有空自己加上一艘小帆船随浪荡漾那岂不美哉。这里也是属性动画的用法，可以自由发挥！！！

调用的页面太简单了，就这样，打完收工睡觉！！！

package com.openld.seniorui.testwave

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.openld.seniorui.R

class TestWaveActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_test_wave)
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".testwave.TestWaveActivity">

    <com.openld.seniorui.testwave.WaveView
        android:id="@+id/wave_view"
        android:layout_width="match_parent"
        android:layout_height="120dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>