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.........完整代码请登录后点击上方下载按钮下载查看