自定义实现乘风破浪的小船

        我在昨天的文章中实现了波纹荡漾的效果,这个效果太千篇一律了,今天试着发散一下,实现一个玻璃球中的水波荡漾效果,其次只有水波荡漾怎么够呢,必须给大家来一艘乘风破浪的帆船吧。这就安排。

 

 

        如果你没看昨天的文章请先去看看,不然这里怕一头雾水。

        首先说下思路,这里重点来了。

1.实现水波局限在玻璃球(圆形)中荡漾效果

        我第一下就想到了clipPath(),那你在WaveView的onDraw()之中去clipPath()一个圆形行不行呢,这里当然是可以的。

        但是这么做我发现了一个,因为水波荡漾要结合属性动画实现,会频繁调用invalidate()重新绘制,那就会频繁触发onDraw(),那其中的clipPath()方法也会频繁被触发,这个方法实际上是切割画布的,开销很大。运行的时候画面会时不时闪动一下,当然不符合预期。

        于是,我目前的思路是自定义一个CircleLinearLayout(继承自LinearLayout),在其中clipPath()并把裁剪后的Canvas分发给子View去绘制。这样的话既能裁切出圆形,又能保证频繁的WaveView刷新不会频繁触发clipPath()。

        这里暂时没想到在WaveView本身中怎样更优雅地切出圆形,如果大家有思路欢迎交流学习

2.实现帆船乘风破浪效果

        要实现帆船乘风破浪效果太简单了,你就drawBitmap()画一艘帆船吧,计算下位置让其初始位置位于波浪上方,然后还是利用属性动画去设置帆船上下移动,无限循环,那最终结合波浪的翻涌效果,就实现了乘风破浪的帆船。

        因为今天的效果都是基于昨天的波浪效果实现的,因此代码也很简单。

自定义实现乘风破浪的小船_第1张图片

         相比昨天只多了一个CircleLinearLayout

package com.openld.seniorui.testwave

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.graphics.Path
import android.util.AttributeSet
import android.widget.LinearLayout

/**
 * author: lllddd
 * created on: 2022/8/2 14:12
 * description:圆形的线性布局
 */
class CircleLinearLayout @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null
) : LinearLayout(context, attrs) {
    private var mWidth = 0;
    private var mHeight = 0;

    private var mPaint = Paint().apply {
        isAntiAlias = true
        strokeWidth = 5F
        color = Color.parseColor("#6495ed")
        style = Paint.Style.STROKE
    }

    private var mCirclePath = Path()

    override fun dispatchDraw(canvas: Canvas?) {
        mWidth = measuredWidth
        mHeight = measuredHeight

        canvas!!.save()

        mCirclePath.addCircle(
            (mWidth shr 1).toFloat(),
            (mHeight shr 1).toFloat(),
            (mWidth shr 1).coerceAtMost(mHeight shr 1).toFloat(),
            Path.Direction.CCW
        )
        canvas.clipPath(mCirclePath)

        canvas.drawCircle(
            (mWidth shr 1).toFloat(),
            (mHeight shr 1).toFloat(),
            (mWidth shr 1).coerceAtMost(mHeight shr 1).toFloat() - 5F,
            mPaint
        )

        super.dispatchDraw(canvas)
        canvas.restore()
    }
}

        然后在调用的页面布局里,WaveView肯定要套在CircleLinearLayout里面




    

        

    


        页面调用的地方依旧简单得我都不想贴了

package com.openld.seniorui.testwave

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

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

        于是大功告成!!!

完整工程要的自取

你可能感兴趣的:(Android,帆船,乘风破浪,自定义View)