您的当前位置：首页正文

Canvas实现炫丽的粒子运动效果

2020-11-27 来源：星星旅游

本文主要介绍和大家介绍Canvas 实现炫丽的粒子运动效果（粒子生成文字），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

直接上代码，不懂可以看代码注释。估计就会看明白大概的思路了。

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas 实现炫丽的粒子运动效果-云库前端</title>
<style>
* {
 margin: 0;
 padding: 0;
}
html,
body {
 width: 100%;
 height: 100%;
}
canvas {
 display: block;
 background: #000;
}
body::-webkit-scrollbar{
 display: none;
}
.operator-box{
 position: fixed;
 top: 0;
 left: 50%;
 border: 1px solid #fff;
 background: rgba(255,255,255,0.5);
 padding: 20px 10px;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}
.back-type,.back-animate{
 margin-right: 20px;
}
.flex-box{
 display: flex;
 justify-content: center;
 align-items: center;
}
#input-text{
 line-height: 35px;
 width: 260px;
 height: 35px;
 background: rgba(0, 0, 0,0.7);
 color: #fff;
 font-size: 16px;
 border: none;
 outline: none;
 text-indent: 12px;
 box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
}
#input-text::placeholder{
 color: #ccc;
 line-height: 55px;
 height: 55px;
}
select{
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 border: none;
 padding: 0px 20px 0px 6px;
 height: 35px;
 color: #fff;
 text-align: left;
 background: rgba(0, 0, 0,0.7) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAICAYAAAAx8TU7AAAAOUlEQ…R4gPgWEIMAiOYBCS4C8ZDAIrBq4gigNkztQEFMi6AuQHESAPMeXiEMiWfpAAAAAElFTkSuQmCC) no-repeat 190px 12px;
 background-size: 5px 8px;
 box-shadow: inset 0 0 12px 1px rgba(0,0,0,0.7);
}
</style>
</head>
<body>
<p class="operator-box">
<p class="flex-box">
 <p class="back-type">散开类型：
 <select name="" id="selectType">
 <option value="back">归位</option>
 <option value="auto">随机</option>
 </select>
 </p>
 <p class="back-animate">散开效果（对归位有效）：
 <select class="back-dynamics" id="selectDynamics">
 <option value="spring">dynamics.spring</option>
 <option value="bounce">dynamics.bounce</option>
 <option value="forceWithGravity">dynamics.forceWithGravity</option>
 <option value="gravity">dynamics.gravity</option>
 <option value="easeInOut">dynamics.easeInOut</option>
 <option value="easeIn">dynamics.easeIn</option>
 <option value="easeOut">dynamics.easeOut</option>
 <option value="linear">dynamics.linear</option>
 </select>
 </p>
 <p class="input-box"><input type="text" placeholder="输入汉字后回车" id="input-text"></p>
</p>
</p>
<script src="dynamics.min.js"></script>
<script src="index.js"></script>
<script>
var iCircle = new Circle();
</script>
</body>
</html>

HTML 代码不多，只要是几个操作元素。这里一看就明白。不费过多口舌。我们来看看本文的主角 JavaScript 代码，不过，在看代码前，我们不妨先听听实现这个效果的思路：

首先，我们得先生成一堆群众演员（粒子）；
把每个粒子的相关参数挂到自身的一些属性上，因为第个粒子都会有自己的运动轨迹；
接着得让它们各自运动起来。运动有两种（自由运动和生成文字的运动）；

JavaScript 代码中使用了三个 Canvas 画布，this.iCanvas（主场）、this.iCanvasCalculate（用来计算文字宽度）、this.iCanvasPixel（用于画出文字，并从中得到文字对应的像素点的位置坐标）。

this.iCanvasCalculate 和 this.iCanvasPixel 这两个无需在页面中显示出来，只是辅助作用。

下面就献上棒棒的 JS 实现代码

看了代码估计也只是心里炫了一下，也没有让你想把这个东西做出来的欲望，为此我知道必需得让你眼睛心服口服才行。在线 DEMO：动感的粒子示例。

人无完人，代码也一样。看起来运行顺畅的代码也或多或少有一些瑕疵，日前这个效果还只支持中文。英文的话，我得再努力一把，不管怎么样，英文后面肯定是会加入来的，只是时间问题了。还有代码中用于标记是否可再次执行生成文字的属性：this.isPlay ，还是一点瑕疵，this.isPlay 的状态更改没有准确的在粒子归位的那一瞬间更改，而是提前更改了状态。但这个状态不会影响本例子效果的完整实现。

这个例子中用到了 dynamics.js 库，主要是用到它里面的一些运动函数，让粒子动起来更感人一些，仅此而已。