javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？-6ren

javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？

转载作者：行者123 更新时间：2023-11-28 14:34:20

好的，所以我有一个列表 nav 可以导航到带有旋转木马幻灯片的某个幻灯片，smoke.js 在访问该站点时加载并自动启动，这正是我想要的，但是当他们单击“主页”按钮以外的任何 nav 按钮，我需要它来结束烟雾动画，如果他们单击主页按钮返回主页幻灯片，我需要它来重新启动烟雾机。我该怎么做？

这里是 smoke.js 的代码笔 codepen :

var smokemachine = function(context, color) {
  color = color || [24, 46.8, 48.2]
  var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var lastframe;
  var currentparticles = []
  var pendingparticles = []

  var buffer = document.createElement('canvas'),
    bctx = buffer.getContext('2d')

  buffer.width = 20
  buffer.height = 20

  var opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 5, 7, 4, 4, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 17, 27, 41, 52, 56, 34, 23, 15, 11, 4, 9, 5, 1, 0, 0, 0, 0, 0, 0, 1, 45, 63, 57, 45, 78, 66, 52, 41, 34, 37, 23, 20, 0, 1, 0, 0, 0, 0, 1, 43, 62, 66, 64, 67, 115, 112, 114, 56, 58, 47, 33, 18, 12, 10, 0, 0, 0, 0, 39, 50, 63, 76, 87, 107, 105, 112, 128, 104, 69, 64, 29, 18, 21, 15, 0, 0, 0, 7, 42, 52, 85, 91, 103, 126, 153, 128, 124, 82, 57, 52, 52, 24, 1, 0, 0, 0, 2, 17, 41, 67, 84, 100, 122, 136, 159, 127, 78, 69, 60, 50, 47, 25, 7, 1, 0, 0, 0, 34, 33, 66, 82, 113, 138, 149, 168, 175, 82, 142, 133, 70, 62, 41, 25, 6, 0, 0, 0, 18, 39, 55, 113, 111, 137, 141, 139, 141, 128, 102, 130, 90, 96, 65, 37, 0, 0, 0, 2, 15, 27, 71, 104, 129, 129, 158, 140, 154, 146, 150, 131, 92, 100, 67, 26, 3, 0, 0, 0, 0, 46, 73, 104, 124, 145, 135, 122, 107, 120, 122, 101, 98, 96, 35, 38, 7, 2, 0, 0, 0, 50, 58, 91, 124, 127, 139, 118, 121, 177, 156, 88, 90, 88, 28, 43, 3, 0, 0, 0, 0, 30, 62, 68, 91, 83, 117, 89, 139, 139, 99, 105, 77, 32, 1, 1, 0, 0, 0, 0, 0, 16, 21, 8, 45, 101, 125, 118, 87, 110, 86, 64, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 28, 79, 79, 117, 122, 88, 84, 54, 46, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 6, 55, 61, 68, 71, 30, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 23, 25, 20, 12, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12, 9, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0]

  var data = bctx.createImageData(20, 20)
  var d = data.data

  for (var i = 0; i < d.length; i += 4) {
    d[i] = color[0]
    d[i + 1] = color[1]
    d[i + 2] = color[2]
    d[i + 3] = opacities[i / 4]
  }

  bctx.putImageData(data, 0, 0)

  var imagewidth = 20 * 5
  var imageheight = 20 * 5

  function particle(x, y, l) {
    this.x = x
    this.y = y
    this.age = 0
    this.vx = (Math.random() * 8 - 4) / 100
    this.startvy = -(Math.random() * 30 + 10) / 100
    this.vy = this.startvy
    this.scale = Math.random() * .5
    this.lifetime = Math.random() * l + l / 2
    this.finalscale = 5 + this.scale + Math.random()

    this.update = function(deltatime) {
      this.x += this.vx * deltatime
      this.y += this.vy * deltatime
      var frac = Math.pow((this.age) / this.lifetime, .5)
      this.vy = (1 - frac) * this.startvy
      this.age += deltatime
      this.scale = frac * this.finalscale
    }

    this.draw = function() {
      context.globalAlpha = (1 - Math.abs(1 - 2 * (this.age) / this.lifetime)) / 8
      var off = this.scale * imagewidth / 2
      var xmin = this.x - off
      var xmax = xmin + this.scale * imageheight
      var ymin = this.y - off
      var ymax = ymin + this.scale * imageheight
      context.drawImage(buffer, xmin, ymin, xmax - xmin, ymax - ymin)
    }
  }


  function addparticles(x, y, n, lifetime) {
    lifetime = lifetime || 4000
    n = n || 10
    if (n < 1) return Math.random() <= n && pendingparticles.push(new particle(x, y, lifetime));
    for (var i = 0; i < n; i++) {
      pendingparticles.push(new particle(x, y, lifetime))
    };
  }

  function updateanddrawparticles(deltatime) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    deltatime = deltatime || 16
    var newparticles = []
    currentparticles = currentparticles.concat(pendingparticles)
    pendingparticles = []

    currentparticles.forEach(function(p) {
      p.update(deltatime)
      if (p.age < p.lifetime) {
        p.draw()
        newparticles.push(p)
      }
    })
    currentparticles = newparticles
  }

  function frame(time) {
    if (running) {
      var deltat = time - lastframe
      lastframe = time;

      updateanddrawparticles(deltat)

      polyfillAnimFrame(frame)
    }
  }

  var running = false

  function start() {
    running = true
    polyfillAnimFrame(function(time) {
      lastframe = time
      polyfillAnimFrame(frame)
    })
  }

  function stop() {
    running = false
  }

  return {
    start: start,
    stop: stop,
    step: updateanddrawparticles,
    addsmoke: addparticles
  }

}



var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight

var party = smokemachine(ctx, [54, 16.8, 18.2])
party.start() // start animating

onmousemove = function(e) {
  var x = e.clientX
  var y = e.clientY
  var n = .5
  var t = Math.floor(Math.random() * 200) + 3800
  party.addsmoke(x, y, n, t)
}

setInterval(function() {
  party.addsmoke(innerWidth / 2, innerHeight, 1)
}, 100)

html,
body {
  position: absolute;
  margin: 0;
  width: 100%;
}

#hi {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}

#hi a {
  color: #fff;
  font-size: 80px;
  text-decoration: none;
  font-family: Lobster;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <ul>
      <li>
        <a href="#" class="current">
          <span data-text="Home" data-target="#carouselExampleIndicators" data-slide-to="0">Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="About" data-target="#carouselExampleIndicators" data- slide-to="1">About</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Chronic Menu" data-target="#carouselExampleIndicators" data-slide-to="2">Chronic Menu</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Strains" data-target="#carouselExampleIndicators" data- slide-to="3">Strains</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Gallery" data-target="#carouselExampleIndicators" data- slide-to="4">Gallery</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Reviews" data-target="#carouselExampleIndicators" data- slide-to="5">Reviews</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<canvas id="canvas" width="1777" height="898"></canvas>

最佳答案

如果您检查 documentation of the smoke.js plugin on GitHub ，您会看到有两种方法:start()(启动烟雾)和 stop()(停止烟雾)。因此，您要做的是在单击导航但不是主页时调用 party.stop()，如果是主页则调用 party.start()主页选项。

像这样(我的代码在顶部):

Notice: the .stop() method will stop the smoke but it want delete the existing smoke, it's more like a pause. It is unclear if you also want to remove the existing smoke, but if you need to do it, you can follow the instructions on this question to clean the canvas.

var navbaroptions = document.querySelectorAll("nav a");
for (var x = 0; x < navbaroptions.length; x++) {
  navbaroptions[x].addEventListener("click", function() {
    const canvas = document.querySelector("#canvas");
    if (this.id === "option-home") {
      party.start();
      canvas.removeAttribute("hidden");
    } else {
      party.stop();
      // hide the canvas
      canvas.setAttribute("hidden", true);
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
    }
  });
}

var smokemachine = function(context, color) {
  color = color || [24, 46.8, 48.2]
  var polyfillAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  var lastframe;
  var currentparticles = []
  var pendingparticles = []

  var buffer = document.createElement('canvas'),
    bctx = buffer.getContext('2d')

  buffer.width = 20
  buffer.height = 20

  var opacities = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 5, 5, 7, 4, 4, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 17, 27, 41, 52, 56, 34, 23, 15, 11, 4, 9, 5, 1, 0, 0, 0, 0, 0, 0, 1, 45, 63, 57, 45, 78, 66, 52, 41, 34, 37, 23, 20, 0, 1, 0, 0, 0, 0, 1, 43, 62, 66, 64, 67, 115, 112, 114, 56, 58, 47, 33, 18, 12, 10, 0, 0, 0, 0, 39, 50, 63, 76, 87, 107, 105, 112, 128, 104, 69, 64, 29, 18, 21, 15, 0, 0, 0, 7, 42, 52, 85, 91, 103, 126, 153, 128, 124, 82, 57, 52, 52, 24, 1, 0, 0, 0, 2, 17, 41, 67, 84, 100, 122, 136, 159, 127, 78, 69, 60, 50, 47, 25, 7, 1, 0, 0, 0, 34, 33, 66, 82, 113, 138, 149, 168, 175, 82, 142, 133, 70, 62, 41, 25, 6, 0, 0, 0, 18, 39, 55, 113, 111, 137, 141, 139, 141, 128, 102, 130, 90, 96, 65, 37, 0, 0, 0, 2, 15, 27, 71, 104, 129, 129, 158, 140, 154, 146, 150, 131, 92, 100, 67, 26, 3, 0, 0, 0, 0, 46, 73, 104, 124, 145, 135, 122, 107, 120, 122, 101, 98, 96, 35, 38, 7, 2, 0, 0, 0, 50, 58, 91, 124, 127, 139, 118, 121, 177, 156, 88, 90, 88, 28, 43, 3, 0, 0, 0, 0, 30, 62, 68, 91, 83, 117, 89, 139, 139, 99, 105, 77, 32, 1, 1, 0, 0, 0, 0, 0, 16, 21, 8, 45, 101, 125, 118, 87, 110, 86, 64, 39, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 28, 79, 79, 117, 122, 88, 84, 54, 46, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 6, 55, 61, 68, 71, 30, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 23, 25, 20, 12, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 12, 9, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 2, 2, 0, 0, 0, 0, 0, 0, 0, 0]

  var data = bctx.createImageData(20, 20)
  var d = data.data

  for (var i = 0; i < d.length; i += 4) {
    d[i] = color[0]
    d[i + 1] = color[1]
    d[i + 2] = color[2]
    d[i + 3] = opacities[i / 4]
  }

  bctx.putImageData(data, 0, 0)

  var imagewidth = 20 * 5
  var imageheight = 20 * 5

  function particle(x, y, l) {
    this.x = x
    this.y = y
    this.age = 0
    this.vx = (Math.random() * 8 - 4) / 100
    this.startvy = -(Math.random() * 30 + 10) / 100
    this.vy = this.startvy
    this.scale = Math.random() * .5
    this.lifetime = Math.random() * l + l / 2
    this.finalscale = 5 + this.scale + Math.random()

    this.update = function(deltatime) {
      this.x += this.vx * deltatime
      this.y += this.vy * deltatime
      var frac = Math.pow((this.age) / this.lifetime, .5)
      this.vy = (1 - frac) * this.startvy
      this.age += deltatime
      this.scale = frac * this.finalscale
    }

    this.draw = function() {
      context.globalAlpha = (1 - Math.abs(1 - 2 * (this.age) / this.lifetime)) / 8
      var off = this.scale * imagewidth / 2
      var xmin = this.x - off
      var xmax = xmin + this.scale * imageheight
      var ymin = this.y - off
      var ymax = ymin + this.scale * imageheight
      context.drawImage(buffer, xmin, ymin, xmax - xmin, ymax - ymin)
    }
  }


  function addparticles(x, y, n, lifetime) {
    lifetime = lifetime || 4000
    n = n || 10
    if (n < 1) return Math.random() <= n && pendingparticles.push(new particle(x, y, lifetime));
    for (var i = 0; i < n; i++) {
      pendingparticles.push(new particle(x, y, lifetime))
    };
  }

  function updateanddrawparticles(deltatime) {
    context.clearRect(0, 0, canvas.width, canvas.height);
    deltatime = deltatime || 16
    var newparticles = []
    currentparticles = currentparticles.concat(pendingparticles)
    pendingparticles = []

    currentparticles.forEach(function(p) {
      p.update(deltatime)
      if (p.age < p.lifetime) {
        p.draw()
        newparticles.push(p)
      }
    })
    currentparticles = newparticles
  }

  function frame(time) {
    if (running) {
      var deltat = time - lastframe
      lastframe = time;

      updateanddrawparticles(deltat)

      polyfillAnimFrame(frame)
    }
  }

  var running = false

  function start() {
    running = true
    polyfillAnimFrame(function(time) {
      lastframe = time
      polyfillAnimFrame(frame)
    })
  }

  function stop() {
    running = false
  }

  return {
    start: start,
    stop: stop,
    step: updateanddrawparticles,
    addsmoke: addparticles
  }

}


var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight

var party = smokemachine(ctx, [54, 16.8, 18.2])
party.start() // start animating

onmousemove = function(e) {
  var x = e.clientX
  var y = e.clientY
  var n = .5
  var t = Math.floor(Math.random() * 200) + 3800
  party.addsmoke(x, y, n, t)
}

setInterval(function() {
  party.addsmoke(innerWidth / 2, innerHeight, 1)
}, 100)

html,
body {
  position: absolute;
  margin: 0;
  width: 100%;
}

#hi {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
}

#hi a {
  color: #fff;
  font-size: 80px;
  text-decoration: none;
  font-family: Lobster;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />

<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <ul>
      <li>
        <a href="#" class="current" id="option-home">
          <span data-text="Home" data-target="#carouselExampleIndicators" data-slide-to="0">Home</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="About" data-target="#carouselExampleIndicators" data- slide-to="1">About</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Chronic Menu" data-target="#carouselExampleIndicators" data-slide-to="2">Chronic Menu</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Strains" data-target="#carouselExampleIndicators" data- slide-to="3">Strains</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Gallery" data-target="#carouselExampleIndicators" data- slide-to="4">Gallery</span>
        </a>
      </li>
      <li>
        <a href="#">
          <span data-text="Reviews" data-target="#carouselExampleIndicators" data- slide-to="5">Reviews</span>
        </a>
      </li>
    </ul>
  </div>
</nav>

<div style="margin-top:300px;position:absolute;"><a href="#">Link for testing</a></div>

<canvas id="canvas" width="1777" height="898" style="position:relative;"></canvas>

关于javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53713627/

文章推荐： css - 在 IE7 中，我包含的 div 不会扩展到该 div 的内容

文章推荐： css - 关闭和打开 CSS 属性会改变外观

文章推荐： javascript - 使用 jQuery 和 css 的下拉菜单

naming-conventions - 开始 -> 结束 |停止 |结束？
我正在编写一个类，我想知道哪一对方法更适合描述流程周期: start() -> stop() start() -> end() start() -> finish() 基本上这些方法将在执行任务之前和
android - 小部件类名称什么时候以 "View"结束，什么时候以 "Layout"结束？
对于 Android 小部件类名称是否应以“View”、“Layout”或两者都不结尾，是否存在模式或命名约定？最佳答案如果该类扩展了 View(或在其层次结构中扩展了 View)，那么它应该以“
VIM 高亮匹配开始/结束
我正在尝试找到一个插件，该插件将使用 Verilog 突出显示匹配的开始/结束语句。 VIM 让它与花括号/括号一起工作，但它不能与它的开始/结束一起工作。我希望 VIM 突出显示正确的开始到正确的结
matlab - 时间序列元胞数组中的数据总和(结束)
给出以下代码: % Generate some random data n = 10; A = cell(n, 1); for i=1:n A{i} = timeseries; A{i
javascript - 检测输入何时聚焦于开始/结束
我需要知道是否可以检测输入何时开始聚焦以及何时结束焦点 HTML 代码: JQuery 代码(仅示例我如何需要它): $('.datas').on('focusStart', alert("fo
Java，结束 JFrame
所以我一直在思考一款游戏的想法，一款需要穿越时空的游戏。因此，我编写了一个 JFrame 来显示螺旋的 .gif，但它并没有在对话框显示时结束，而是保留在后台。我可以解决这个问题吗？ import j
java - 我的程序没有以执行器返回/结束
给出以下使用多线程的 Java 示例: import java.util.concurrent.*; public class SquareCalculator { private Ex
java - 结束 do-while 循环
好吧，我有一个 do-while 循环，应该在使用点击“q”时结束，但它给了我错误消息，请帮忙。 package Assignments; import java.util.*; public cla
regex - 正则表达式可选匹配行的开始/结束
我如何有选择地匹配开始 ^或结束 $正则表达式中的一行？例如: /(?\\1', $str); 我的字符串开头和结尾处的粗体边缘情况没有被匹配。我在使用其他变体时遇到的一些极端情况包括字符串内匹配、
java - 结束 while 循环的问题
我试图让程序在总数达到 10 时结束，但由于某种原因，我的 while 循环在达到 10 时继续计数。一旦回答了 10 个问题，我就有 int 百分比来查找百分比。 import java.util.
jquery - 结束()函数
jQuery 中的 end() 函数将元素集恢复到上次破坏性更改之前的状态，因此我可以看到它应该如何使用，但我已经看到了一些代码示例，例如:on alistapart (可能来自旧版本的 jQuery
javascript - 如何知道一个字符串以javascript中的特定字符开始/结束？
这个问题在这里已经有了答案: How to check if a string "StartsWith" another string? (18 个答案) 关闭 9 年前。 var file =
postgresql - 工作停顿(结束)
我正在尝试在 travis 上设置两个数据库，但它只是在 before_install 声明的中途停止: (END) No output has been received in the last 1
mysql - 结束 while 循环缺少分号
我创建了一个简单的存储过程，它循环遍历一个表的行并将它们插入到另一个表中。由于某种原因，END WHILE 循环抛出缺少分号错误。所有代码对我来说都是正确的，并且所有分隔符都设置正确。我只是不明白为什
ios - AVSpeechSynthesis 结束
您好，我正在使用 AVSpeechSynthesizer 和 AVSpeechUtterance 构建一个 iOS 7 应用程序，我想弄清楚合成何时完成。更具体地说，我想在合成结束时更改播放/暂停按钮
javascript - 响应后调用提醒。结束
这是我的代码，我试图在响应后显示警报。但没有显示操作系统警报 string filepath = ConfigurationManager.AppSettings["USPPath"].ToStri
python - 遍历日历月的开始/结束
我想创建一个循环，在提供的时间段、第一天和最后一天返回每个月(考虑到月份在第 28-31 天结束):(“function_to_increase_month”尚未定义) for beg in pd.d
python - 结束 while 循环
我目前正在用 Python 3.6 为一个骰子游戏编写代码，我知道我的编码在这方面有点不对劲，但是，我真的只是想知道如何开始我的 while 循环。游戏说明如下…… 人类玩家与计算机对战。玩家 1
android - 结束 fragment
所以我已经了解了如何打开 fragment。这是我的困境。我的 view 旁边有一个元素列表(元素周期表元素)。当您选择一个元素时，它会显示它的信息。我的问题是我需要能够从(我们称之为详细信息 fr
javascript - 检测滚动完成/结束
我想检测用户何时停止滚动页面/元素。这可能很棘手，因为最近对 OSX 滚动行为的增强创造了这种新的惯性效应。是否触发了事件？我能想到的唯一其他解决方案是在页面/元素的滚动位置不再改变时使用间隔来拾取

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何通过单击导航按钮开始/结束 smoke.js 动画？