直接上代码 ,不懂可以看代码注释。估计就会看明白大概的思路了。
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 库,主要是用到它里面的一些运动函数,让粒子动起来更感人一些,仅此而已。