实现星际尘埃效果

        今天写了个自定义View，实现了一下星际尘埃效果，简单说就是从中心点向外发散粒子，配上深色背景看起来就像是星际尘埃在扩散一样，实现的思路其实非常简单，就是自定义View加动画。

         后面有空准备再对代码进行一下封装，做出一个更加通用的DustView，可以期待。

        工程结构简单的不得了。

         其中Particle是单个粒子的数据定义

package com.openld.seniorui.testdust.particle

/**
 * author: lllddd
 * created on: 2022/11/8 20:17
 * description:粒子
 */
data class Particle(
    var x : Float,
    var y : Float,
    val radius : Float,
    val speed : Float,
    val sinTheta : Float,
    val cosTheta : Float
    ) {
}

        DustView是星际尘埃View

package com.openld.seniorui.testdust.view

import android.animation.ValueAnimator
import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.View
import android.view.animation.LinearInterpolator
import com.openld.seniorui.testdust.particle.Particle
import kotlin.math.cos
import kotlin.math.sin
import kotlin.math.sqrt
import kotlin.random.Random

/**
 * author: lllddd
 * created on: 2022/11/8 20:14
 * description:尘埃View
 */
class DustView @JvmOverloads constructor(
    context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {
    private var mPaint: Paint = Paint().apply {
        color = Color.WHITE
        style = Paint.Style.FILL_AND_STROKE
        isAntiAlias = true
    }

    private var mParticleList = mutableListOf<Particle>()

    private var mCenterX: Int = 0
    private var mCenterY: Int = 0

    private var mDustRadius: Int = 0

    private var mAnimator: ValueAnimator = ValueAnimator.ofInt(0, 100).apply {
        duration = 100000
        interpolator = LinearInterpolator()
        repeatCount = ValueAnimator.INFINITE
        addUpdateListener {
            updateParticles()
            invalidate()
        }
    }

    private fun updateParticles() {
        for (index in 0 until mParticleList.size) {
            val particle = mParticleList[index]

            particle.x += particle.speed * particle.cosTheta
            particle.y += particle.speed * particle.sinTheta

            val isOutBound =
                (particle.x - mCenterX) * (particle.x - mCenterX) + (particle.y - mCenterY) * (particle.y - mCenterY) > mDustRadius * mDustRadius
            if (isOutBound) {
                particle.x = mCenterX.toFloat()
                particle.y = mCenterY.toFloat()
            }
        }
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)

        mCenterX = measuredWidth / 2
        mCenterY = measuredHeight / 2

        mDustRadius = sqrt((mCenterX * mCenterX + mCenterY * mCenterY).toDouble()).toInt()
    }

    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)

        for (index in 0 until mParticleList.size) {
            val particle = mParticleList[index]
            canvas!!.drawCircle(particle.x, particle.y, particle.radius, mPaint)
        }
    }

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)

        for (index in 0 until 2000) {
            val random = Random.Default

            val x = mCenterX
            val y = mCenterY
            val radius = 3.0F
            val speed = 1.0F + 2.0F * random.nextFloat()

            val randomAngle = random.nextInt(360)
            val sinTheta = sin(randomAngle * Math.PI / 180)
            val cosTheta = cos(randomAngle * Math.PI / 180)

            val particle = Particle(
                x.toFloat(), y.toFloat(), radius, speed, sinTheta.toFloat(), cosTheta.toFloat()
            )
            mParticleList.add(particle)
        }

        mAnimator.start()
    }
}

        调用的页面是TestDustActivity

package com.openld.seniorui.testdust

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

class TestDustActivity : AppCompatActivity() {
    private lateinit var mDustView: DustView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_dust)

        mDustView = findViewById(R.id.dust_view)
    }
}

        布局简单得我都不想贴了

<?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"
    android:background="#333355"
    tools:context=".testdust.TestDustActivity">

    <com.openld.seniorui.testdust.view.DustView
        android:id="@+id/dust_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

        其实在对粒子初始化的时候可以尝试增加一些起始坐标约束，做出灵活多变的效果，比如下面

         中间放张图片或者头像肯定很棒！！！

        大家也可发挥想象，达到抛砖引玉的效果。