1 喜欢

【Canvas动画】LOGO粒子效果

admin
admin
2020-12-07 02:08:23 阅读 641

参考链接

https://juejin.cn/post/6844903442188615687

效果展示

爱前端_例子效果DEMO.png

在线预览

粒子效果

参考代码

import Logo from '../img/firefox.png' const mycan = document.getElementById('mycan') const ctx = mycan.getContext('2d') const IW = mycan.width = window.innerWidth const IH = mycan.height = window.innerHeight /** * * @param {图片地址} src */ function loadImg(src) { return new Promise((resolve, reject) => { let img = new Image() img.onload = () => resolve(img) img.onerror = reject img.src = src }) } /** * * @param {参数执行当前帧所进行的时间} t * @param {初始值} b * @param {位移值} c * @param {持续时间} d */ function easeInOutExpo(t, b, c, d) { t /= d/2 if (t < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b t-- return c/2 * (-Math.pow(2, -10 * t) + 2) + b } /** * * @param {Image对象} img */ function getParticles(img) { const cols = 100 const rows = 100 let w = Math.min(500, IW - 20) let h = ~~(w * (img.height / img.width)) let sx = (IW - w) / 2 let sy = (IH - h) / 2 let particles = [] let s_w = w / cols let s_h = h / rows ctx.drawImage(img, 0, 0, w, h) for (let i = 0; i < cols; i++) { for (let j = 0; j < rows; j++) { let x = ~~(i * s_w) let y = ~~(j * s_h) const [r, g, b, a] = ctx.getImageData(x, y, 1, 1).data if (a > 0) { particles.push({ delay: Math.random() * 10000, x: x + sx + (Math.random() - 0.5) * 10, y: y + sy + (Math.random() - 0.5) * 10, color: `rgba(${r}, ${g}, ${b}, ${a})` }) } } } return particles } /** * * @param {例子数组} particles * @param {初始X坐标} sx * @param {初始Y坐标} sy * @param {持续时间} duration */ function play(particles, sx, sy, duration) { let id = null function draw(t) { if (t > duration) { cancelAnimationFrame(id) return } ctx.clearRect(0, 0, IW, IH) particles.forEach(({x, y, color, delay}) => { let dx = easeInOutExpo(t, sx, x - sx, duration - delay) let dy = easeInOutExpo(t, sy, y - sy, duration - delay) ctx.fillStyle = color ctx.fillRect(dx, dy, 1, 1) }) id = requestAnimationFrame(draw) } id = requestAnimationFrame(draw) } async function init() { let img = await loadImg(Logo) let particles = getParticles(img) play(particles, IW / 2, IH, 10000) } init()

关于作者
admin
admin
admin@ifront.net
 获得点赞 43
 文章阅读量 42826