SOURCE

class Particle {
    constructor({
        x = 0, y = 0,
        tx = 0, ty = 0,
        vx = 0, vy = 0,
        radius = 2, color = '#F00000'
    }) {
        // 当前坐标
        this.x = x
        this.y = y
        // 目标点坐标
        this.tx = tx
        this.ty = ty
        // 速度
        this.vx = vx
        this.vy = vy
        this.radius = radius
        this.color = color
    }
    draw(ctx) {
        ctx.save()
        ctx.translate(this.x, this.y)
        ctx.fillStyle = this.color
        // ctx.fillRect(0, 0, this.radius * 2, this.radius * 2)
        ctx.beginPath()
        ctx.arc(0, 0, this.radius, 0, (Math.PI * 2), true)
        ctx.closePath()
        ctx.fill()
        ctx.restore()
        return this
    }

}

// 传入粒子对象绘制动画帧，并接受一个动画结束的回调
function drawFrame(particles, finished) {
    drawFrame.timer = window.requestAnimationFrame(() => {
        drawFrame(particles, finished)
    })
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    // 缓动系数
    const easing = 0.08
    const finishedParticles = particles.filter(particle => {
        // 当前坐标和目标点之间的距离
        const dx = particle.tx - particle.x
        const dy = particle.ty - particle.y
        // 速度
        let vx = dx * easing
        let vy = dy * easing

        // 当距离小于0.1表示粒子已完成动画
        if (Math.abs(dx) < 0.1 && Math.abs(dy) < 0.1) {
            particle.finished = true
            particle.x = particle.tx
            particle.y = particle.ty
        } else {
            particle.x += vx
            particle.y += vy
        }
        particle.draw(ctx)
        return particle.finished
    })

    if (finishedParticles.length === particles.length) {
        window.cancelAnimationFrame(drawFrame.timer)
        finished && finished(particles)
    }
};


// 获取目标对象的像素点，space 用于稀释像素点，值越大返回的像素点越少
function getPixels({ target, space = 5, callback }) {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const viewWidth = window.innerWidth
    const viewHeight = window.innerHeight

    canvas.width = viewWidth
    canvas.height = viewHeight

    if (typeof target === 'string') {
        // 绘制文字
        ctx.font = '150px bold'
        ctx.fillStyle = '#fff'
        ctx.textBaseline = 'middle'
        ctx.textAlign = 'center'
        ctx.fillText(target, viewWidth / 2, (viewHeight) / 2)
    } else {
        // 绘制图片
        ctx.drawImage(target, (viewWidth - target.width) / 2, (viewHeight - target.height) / 2, target.width, target.height)
    }

    // 获取像素数据
    const { data, width, height } = ctx.getImageData(0, 0, viewWidth, viewHeight)
    const pixeles = []
    // 遍历像素数据，用space减少取到的像素数据
    for (let x = 0; x < width; x += space) {
        for (let y = 0; y < height; y += space) {
            const pos = (y * width + x) * 4 // 每个像素点由 rgba 四个值组成，所以需要乘以4才能得到正确的位置
            // 只提取 rgba 中透明度大于0.5的像素，imageData 里 aplha 128等于 rgba 中 alpha 的 0.5
            if (data[pos + 3] > 128) {
                const pixele = { x, y, rgba: [data[pos], data[pos + 1], data[pos + 2], data[pos + 3]] }
                pixeles.push(callback ? callback(pixele) : pixele)
            }
        }
    }

    return pixeles
}

// 创建粒子
function createParticles({ target, radius, space }) {
    return getPixels({
        target,
        space,
        callback({ x, y, rgba }) {
            return new Particle({
                radius,
                x: Math.random() * (50 + window.innerWidth) - 50,
                y: Math.random() * (50 + window.innerHeight) - 50,
                tx: x,
                ty: y,
                color: `rgba(${rgba})`
            })
        }
    })
}

function broken(particles, init, finished) {
    const bounce = -0.4
    const floor = canvas.height - 5
    let gravity = 0

    function frame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        broken.timer = requestAnimationFrame(frame)
        const finishedParticles = particles.filter(particle => {

            if (!particle._init) {
                const { vx, vy, gravity: gravityValue } = init()
                particle.vx = vx
                particle.vy = vy
                gravity = gravityValue
                particle._init = true
            }

            particle.vy += gravity

            particle.y += particle.vy
            particle.x += particle.vx

            if (particle.y >= floor) {
                particle.y = floor
                particle.vy *= bounce
                particle.brokenFinished = true
            } else {
                particle.brokenFinished = false
            }

            particle.draw(ctx)

            return particle.brokenFinished
        })

        if (finishedParticles.length === particles.length) {
            cancelAnimationFrame(broken.timer)
            finished && finished()
            console.log('end')
        }
    }
    frame()
}

const effect = {
    ejection() {
        return {
            vx: Math.random() * 10 - 5,
            vy: Math.random() * -14 - 7,
            gravity: 0.2,
        }
    },
    sink() {
        return {
            vx: 0,
            vy: Math.random() * 5,
            gravity: 0.2
        }
    },
    dispersed() {
        return {
            vx: Math.random() * 10 - 5,
            vy: Math.random() * 10 - 5,
            gravity: 0
        }
    }

}

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')

canvas.width = window.innerWidth
canvas.height = window.innerHeight

drawFrame(
    createParticles({
        target: "\ud83d\udc33",
        radius: 3,
        space: 8
    }),
    particles => {
        broken(particles, effect.ejection)
    }
)


document.body.addEventListener('click', event => {
    const effectName = event.target.getAttribute('data-effect')
    if (effectName && effect[effectName]) {
        cancelAnimationFrame(drawFrame.timer)
        cancelAnimationFrame(broken.timer)
        drawFrame(
            createParticles({
                target: "\ud83d\udc33",
                radius: 3,
                space: 8
            }),
            particles => {
                broken(particles, effect[effectName])
            }
        )
    }
})

<canvas id="canvas"></canvas>

<div style="position:absolute;bottom: 0; left: 0;">
    <button data-effect="ejection">弹射</button>
    <button data-effect="sink">下沉</button>
    <button data-effect="dispersed">分散</button>
</div>

html, body {
    width: 100%;
    height: 100%;
    background-color: #000;
    overflow: hidden;
}