H5炫酷特效系列4——炫酷粒子变化特效

本文链接：https://blog.csdn.net/zhongguohaoshaonian/article/details/76377073

这个示例虽然没有相对比较实用的特性，但是表现出来的效果确实非常震撼眼球。先上效果图，让各位同胞感受一下：
这里写图片描述

特效的表现感很强，有兴趣的读者可以仔细学习一下下面的代码，尝试着理解其中的逻辑。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>炫酷粒子变换特效</title>
  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .container {
      width: 100％;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: #000000;
    }
  </style>
</head>

<body>
  <div id="container" class="container"></div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    var RENDERER = {
      PARTICLE_COUNT: 1500,
      PARTICLE_RADIUS: 1,
      MAX_ROTATION_ANGLE: Math.PI / 60,
      TRANSLATION_COUNT: 500,

      init: function(strategy) {
    
        this.setParameters(strategy);
        this.createParticles();
        this.setupFigure();
        this.reconstructMethod();
        this.bindEvent();
        this.drawFigure();
      },