Canvas鼠标点击长按粒子动画特效
鼠标点击的粒子爆炸效果，Canvas 玩起来真有意思。
Canvas 的粒子动画实现思路挺简单但效果蛮惊艳：点击或长按后，粒子从鼠标位置散开，带点烟花的感觉。每个粒子有自己的速度、颜色、透明度啥的，跑起来有活力。
交互逻辑全靠jQuery在撑场子，比如用mousedown加setTimeout实现“长按”，再调用触发函数去生成粒子。整个动画刷新也用的是requestAnimationFrame，不卡顿，响应也快。
样式层面，CSS主要用来定位 Canvas、控制层级，偶尔加点过渡。要注意的是 Canvas 别盖到别的元素上，z-index记得。
如果你在做登录页动效、节日活动、或产品页，加上这类粒子动画，视觉上会加分不少。不过要注意性能，粒子数量别放太多，小心浏览器风扇飞起来哦～
嗯，如果你对 Canvas 粒子还不熟，可以看看 HTML5 炫酷粒子特效 Canvas 动画 那篇文章，讲得也挺细。
你想玩交互动效，不妨把这个资源拆一拆，看清楚每一段逻辑，照着改，挺适合练手的。
文件大小：97.48KB
评论区