mo.js实现粒子效果：创建爆炸与烟雾动画
【免费下载链接】mojs The motion graphics toolbelt for the web 
项目地址: https://gitcode.com/gh_mirrors/mo/mojs
你是否曾为网页添加动态效果时感到束手无策？想要实现惊艳的爆炸、烟雾或粒子动画，却被复杂的数学计算和Canvas API吓退？本文将带你使用mo.js（The motion graphics toolbelt for the web）轻松创建专业级粒子效果，无需深厚的动画编程基础。读完本文，你将掌握如何用简洁代码实现爆炸碎片飞溅、烟雾扩散等动态效果，让你的网页瞬间生动起来。
认识mo.js粒子系统核心组件
mo.js的粒子效果主要依赖两个核心类：Burst（爆发）和ShapeSwirl（形状漩涡）。这两个模块协同工作，能够创建从中心点向外扩散的粒子动画效果。
Burst类：粒子爆发的控制中心
Burst类负责管理粒子的整体行为，定义了粒子数量、扩散角度、半径等关键参数。其核心代码位于src/burst.babel.js，主要属性包括：
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| count | 数字 | 粒子数量 | 5 |
| degree | 数字 | 扩散角度（度） | 360 |
| radius | 对象 | 扩散半径（支持关键帧动画） | { 0: 50 } |
| radiusX | 数字 | X轴方向半径 | null |
| radiusY | 数字 | Y轴方向半径 | null |
Burst类通过_renderSwirls()方法创建粒子群，并使用_addBurstProperties()计算每个粒子的初始位置和运动轨迹。
ShapeSwirl类：粒子运动的轨迹引擎
ShapeSwirl类定义了单个粒子的运动轨迹和形态，支持正弦曲线运动路径，使粒子动画更加自然流畅。其核心代码位于src/shape-swirl.babel.js，主要属性包括：
| 属性 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| swirlSize | 数字 | 漩涡大小 | 10 |
| swirlFrequency | 数字 | 漩涡频率 | 3 |
| pathScale | 数字 | 路径缩放比例 | 1 |
| direction | 数字 | 运动方向（1或-1） | 1 |
该类通过_calcSwirlXY()方法计算粒子在不同时间点的位置，结合正弦函数创建平滑的曲线运动轨迹。
快速开始：实现你的第一个爆炸效果
要使用mo.js创建粒子效果，首先需要引入库文件。建议使用国内CDN确保访问速度：
<script src="https://cdn.bootcdn.net/ajax/libs/mo-js/0.288.2/mo.min.js"></script>
下面是一个基本的爆炸效果实现，点击页面任意位置即可触发：
<!DOCTYPE html>
<html>
<head>
<title>mo.js爆炸效果示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/mo-js/0.288.2/mo.min.js"></script>
<style>
body { margin: 0; height: 100vh; background: #1a1a1a; }
</style>
</head>
<body>
<script>
// 创建爆发粒子效果
const createBurst = (x, y) => {
// 初始化Burst实例
const burst = new mojs.Burst({
left: x, top: y, // 爆发中心点坐标
count: 20, // 粒子数量
radius: { 0: 100 }, // 从0到100px的半径变化
degree: 360, // 360度全方位扩散
angle: 0, // 初始角度
// 粒子样式
fill: [ '#FF6B6B', '#4ECDC4', '#FFD166', '#06D6A0', '#118AB2' ],
radius: 10,
duration: 1500, // 动画持续时间（毫秒）
// 粒子运动效果
swirlSize: 15,
swirlFrequency: 2,
// 缓动函数，使动画更自然
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
});
// 触发动画
burst.play();
};
// 点击页面任意位置触发爆炸效果
document.addEventListener('click', (e) => {
createBurst(e.clientX, e.clientY);
});
</script>
</body>
</html>
这段代码创建了一个彩色的圆形爆炸效果，粒子会从点击位置向四周扩散，并带有自然的曲线运动轨迹。
定制高级粒子效果
通过调整Burst和ShapeSwirl的参数，可以创建各种独特的粒子效果。下面我们将学习如何定制不同类型的粒子动画。
调整粒子外观与行为
修改粒子的基本属性可以显著改变效果的视觉表现：
const firework = new mojs.Burst({
left: x, top: y,
count: 30,
radius: { 0: 150 },
degree: 180, // 半圆扩散
angle: -90, // 向上扩散
// 粒子外观
shape: 'circle', // 圆形粒子
fill: '#FF9F1C', // 橙黄色
radius: { 5: 0 }, // 粒子从5px缩小到0
opacity: { 1: 0 }, // 从不透明到透明
// 运动参数
swirlSize: 10,
swirlFrequency: 3,
direction: -1, // 逆时针方向
duration: 2000,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
});
这段代码创建了类似烟花的效果，粒子从点击位置向上呈半圆形扩散，逐渐缩小并消失。
创建烟雾效果
通过调整粒子的透明度、大小和运动参数，可以模拟烟雾效果：
const smoke = new mojs.Burst({
left: x, top: y,
count: 15,
radius: { 0: 80 },
degree: 360,
// 烟雾粒子特性
shape: 'circle',
fill: 'none',
stroke: '#cccccc',
strokeWidth: { 3: 0 },
opacity: { 0.8: 0 },
radius: { 10: 30 }, // 粒子从10px扩大到30px
// 缓慢上升的运动
y: { 0: -50 }, // 向上移动
pathScale: 0.5,
swirlSize: 5,
swirlFrequency: 1,
duration: 3000,
easing: mojs.easing.bezier(0.2, 1, 0.3, 1)
});
这个配置创建了一个灰色的烟雾效果，粒子会缓慢上升并扩散，同时逐渐变得透明。
组合多个效果
通过创建多个Burst实例并按顺序播放，可以实现更复杂的动画序列：
// 创建爆炸效果组合
const explosion = () => {
// 主爆炸
const main = new mojs.Burst({/* 主爆炸参数 */});
// 火花效果
const sparks = new mojs.Burst({/* 火花参数 */});
// 烟雾效果
const smoke = new mojs.Burst({/* 烟雾参数 */});
// 按顺序播放
main.play();
sparks.play();
// 延迟100ms播放烟雾效果
setTimeout(() => smoke.play(), 100);
};
深入理解粒子运动原理
mo.js的粒子系统基于数学函数和物理模拟来创建自然的运动效果。理解这些原理可以帮助你创建更真实、更具吸引力的动画。
粒子路径计算
在src/shape-swirl.babel.js中，_calcSwirlXY()方法负责计算粒子在每个时间点的位置：
_calcSwirlXY(proc) {
var p = this._props,
rotate = this._posData.rotate + p.degreeShift,
point = h.getRadialPoint({
rotate: (p.isSwirl) ? rotate + this._getSwirl(proc) : rotate,
radius: proc * this._posData.radius * p.pathScale,
center: {
x: this._posData.x.start,
y: this._posData.y.start,
},
});
// 设置粒子位置...
}
这段代码使用极坐标计算粒子位置，结合_getSwirl()方法返回的正弦函数值，创建螺旋运动轨迹：
_getSwirl(proc) {
var p = this._props;
return p.direction * p.swirlSize * Math.sin(p.swirlFrequency * proc);
}
性能优化
当创建大量粒子或复杂动画时，可能会遇到性能问题。以下是一些优化建议：
- 控制粒子数量：在保持视觉效果的同时，尽量减少粒子数量
- 使用简单形状：复杂形状需要更多计算资源
- 限制同时播放的动画数量
- 使用CSS硬件加速：确保动画元素使用
transform和opacity属性
实际应用场景
mo.js粒子效果可以应用于多种场景，提升用户体验：
交互反馈
为按钮点击、表单提交等用户操作添加粒子效果，提供即时视觉反馈：
// 为按钮添加点击效果
document.querySelector('button').addEventListener('click', (e) => {
const btn = e.currentTarget;
const rect = btn.getBoundingClientRect();
// 在按钮中心创建波纹效果
const ripple = new mojs.Burst({
left: rect.left + rect.width/2,
top: rect.top + rect.height/2,
count: 8,
radius: { 0: rect.width/2 },
degree: 360,
fill: 'none',
stroke: '#2196F3',
strokeWidth: { 2: 0 },
duration: 800
});
ripple.play();
});
页面过渡效果
在页面加载、切换或元素出现时使用粒子效果，增强页面的动态感：
// 页面加载完成后创建欢迎效果
window.addEventListener('load', () => {
const welcomeBurst = new mojs.Burst({
left: window.innerWidth/2,
top: window.innerHeight/2,
count: 40,
radius: { 0: 200 },
degree: 360,
fill: ['#FF6B6B', '#4ECDC4', '#FFD166', '#06D6A0', '#118AB2'],
radius: { 3: 0 },
duration: 1500,
easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
});
welcomeBurst.play();
});
数据可视化
将粒子效果与数据结合，创建动态数据可视化效果，如数据点爆炸、数值变化动画等。
总结与进阶学习
通过本文，你已经掌握了使用mo.js创建基本粒子效果的方法。要进一步提升技能，可以：
- 查阅官方文档和示例：README.md
- 研究源代码，深入理解粒子系统原理：src/mojs.babel.js
- 尝试组合不同的粒子参数，创建独特效果
- 学习高级动画技术，如时间线控制、事件触发等
mo.js提供了强大而灵活的粒子动画系统，通过创意和实践，你可以为网页添加令人惊艳的动态效果。现在就开始尝试，让你的网页动起来吧！
如果你有任何问题或创建了有趣的效果，欢迎在评论区分享交流。别忘了点赞和收藏本文，以便日后参考！
【免费下载链接】mojs The motion graphics toolbelt for the web 项目地址: https://gitcode.com/gh_mirrors/mo/mojs
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
