dat.gui实现可调节参数的粒子泡泡纠缠吸引动画效果代码-html代码-BFW代码库

dat.gui实现可调节参数的粒子泡泡纠缠吸引动画效果代码

代码语言：html

所属分类：动画

代码描述：dat.gui实现可调节参数的粒子泡泡纠缠吸引动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

</head>

<body>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script>
        var Molecules = {};
  (function(j, q) {
      var n = window.Molecules || {},
          b, d, k = {
              x: 0,
              y: 0
          },
          i = [],
          h = ~~((innerWidth + innerHeight) / 30),
          e = 60;
      var m = {
          light: {
              r: 0,
              g: 0,
              b: 0
          },
          transparent: {
              r: 0,
              g: 0,
              b: 0
          }
      };
      var a = 0.0008,
          f = 0.2,
          g = true,
          p = false,
          c = "#ffffff";
      var o = function() {
          this.attraction = 0.0008;
          this.friction = 0.2;
          this.light = true, this.transparent = false;
          this.color = "#ffffff";
          this.changeAttraction = function(r) {
              a = r
          };
          this.changeFriction = function(r) {
              f = r
          };
          this.enableLight = function(r) {
              g = r
          };
          this.enableTransparency = function(r) {
              p = r
          };
          this.changeColor = function(r) {
              c = r
          };
          this.deleteAll = function(r) {
              i = []
          }
      };
      n.init = function() {
          var t = new o();
          var s = new dat.GUI();
          s.add(t, "attraction").min(0.0005).max(0.005).onChange(t.changeAttraction);
          s.add(t, "friction").min(0.1).max(0.9).onChange(t.changeFriction);
          s.add(t, "light").onChange(t.enableLight);
          s.add(t, "transparent").onChange(t.enableTransparency);
          s.addColor(t, "color").onChange(t.changeColor);
          s.add(t, "deleteAll");
          var r = document.querySelector("body");
          b = document.createElement("canvas");
          b.width = innerWidth;
          b.height = innerHeight;
          b.style.position = "absolute";
          b.style.top = 0;
          b.style.bottom = 0;
          b.style.left = 0;
          b.style.right = 0;
          b.style.zIndex = -1;
          b.style.cursor = "pointer";
          b.style.background = "-webkit-radial-gradient(#0067c7, #002649)";
          b.style.background = "-moz-radial-gradient(#0067c7, #002649)";
          b.style.background = "-ms-radial-gradient(#0067c7, #002649)";
          b.style.background = "-o-radial-gradient(#0067c7, #002649)";
          b.style.background = "radial-gradient(#0067c7, #002649)";
          r.appendChild(b);
          if (!!(n.gotSupport())) {
              d = b.getContext("2d");
              if ("ontouchstart" in window) {
                  b.addEventListener("touchstart", n.onTouchStart, false)
              } else {
                  b.addEventListener("mousedown", n.onMouseDown, false)
              }
              window.onresize = l;
              n.createMolecules()
          } else {
              console.error("Sorry, your browser doesn't support canvas.")
          }
      };
      n.gotSupport = function() {
          return b.getContext && b.getContext("2d")
      };

      function l() {
          b.width = window.innerWidth;
          b.height = window.innerHeight
      }
      n.onMouseDown = function(r) {
          r.preventDefault();
          k.x = r.pageX - b.offsetLeft;
          k.y = r.pageY - b.offsetTop;
          n.addMolecule()
      };
      n.onTouchStart = function(r) {
          r.preventDefault();
          var t = r.changedTouches;
          for (var s = 0; s < t.length; s++) {
              k.x = t[s].pageX - b.offsetLeft;
              k.y = t[s].pageY - b.offsetTop;
              n.addMolecule()
          }
      };
      n.clear = function() {
          d.clearRect(0, 0, b.width, b.height);
       .........完整代码请登录后点击上方下载按钮下载查看