Question

我想在用户点击按钮后启动此五彩纸屑动画。

这是一个链接co codepen：https://codepen.io/gamanox/pen/FkEbH?page=1&

  var COLORS, Confetti, NUM_CONFETTI, PI_2, canvas, confetti, context, drawCircle, drawCircle2, drawCircle3, i, range, xpos;

  NUM_CONFETTI = 60;

  COLORS = [[255, 255, 255], [255, 144, 0], [255, 255, 255], [255, 144, 0], [0, 277, 235]];

  PI_2 = 2 * Math.PI;

  canvas = document.getElementById("confeti");

  context = canvas.getContext("2d");

  window.w = 0;

  window.h = 0;

  window.resizeWindow = function() {
    window.w = canvas.width = window.innerWidth;
    return window.h = canvas.height = window.innerHeight;
  };

  window.addEventListener('resize', resizeWindow, false);

  window.onload = function() {
    return setTimeout(resizeWindow, 0);
  };

  range = function(a, b) {
    return (b - a) * Math.random() + a;
  };

  drawCircle = function(x, y, r, style) {
    context.beginPath();
    context.moveTo(x, y);
    context.bezierCurveTo(x - 17, y + 14, x + 13, y + 5, x - 5, y + 22);
    context.lineWidth = 3;
    context.strokeStyle = style;
    return context.stroke();
  };

  drawCircle2 = function(x, y, r, style) {
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(x + 10, y + 10);
    context.lineTo(x + 10, y);
    context.closePath();
    context.fillStyle = style;
    return context.fill();
  };

  drawCircle3 = function(x, y, r, style) {
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(x + 10, y + 10);
    context.lineTo(x + 10, y);
    context.closePath();
    context.fillStyle = style;
    return context.fill();
  };

  xpos = 0.9;

  document.onmousemove = function(e) {
    return xpos = e.pageX / w;
  };

  window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 100 / 20);
    };
  })();

  Confetti = (function() {
    function Confetti() {
      this.style = COLORS[~~range(0, 5)];
      this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
      this.r = ~~range(2, 6);
      this.r2 = 2 * this.r;
      this.replace();
    }

    Confetti.prototype.replace = function() {
      this.opacity = 0;
      this.dop = 0.03 * range(1, 4);
      this.x = range(-this.r2, w - this.r2);
      this.y = range(-20, h - this.r2);
      this.xmax = w - this.r;
      this.ymax = h - this.r;
      this.vx = range(0, 2) + 8 * xpos - 5;
      return this.vy = 0.7 * this.r + range(-1, 1);
    };

    Confetti.prototype.draw = function() {
      var ref;
      this.x += this.vx;
      this.y += this.vy;
      this.opacity += this.dop;
      if (this.opacity > 1) {
        this.opacity = 1;
        this.dop *= -1;
      }
      if (this.opacity < 0 || this.y > this.ymax) {
        this.replace();
      }
      if (!((0 < (ref = this.x) && ref < this.xmax))) {
        this.x = (this.x + this.xmax) % this.xmax;
      }
      drawCircle(~~this.x, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
      drawCircle3(~~this.x * 0.5, ~~this.y, this.r, this.rgb + "," + this.opacity + ")");
      return drawCircle2(~~this.x * 1.5, ~~this.y * 1.5, this.r, this.rgb + "," + this.opacity + ")");
    };

    return Confetti;

  })();

  confetti = (function() {
    var j, ref, results;
    results = [];
    for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
      results.push(new Confetti);
    }
    return results;
  })();

  window.step = function() {
    var c, j, len, results;
    requestAnimationFrame(step);
    context.clearRect(0, 0, w, h);
    results = [];
    for (j = 0, len = confetti.length; j < len; j++) {
      c = confetti[j];
      results.push(c.draw());
    }
    return results;
  };

  step();

我试图将以下代码包装到一个函数中，然后在点击时使用jquery调用它，但它不起作用。任何建议都将受到高度赞赏

Answer 1

向文档添加单击侦听器，并在其中运行$(function() { var isScrolling = false; $(window).on('wheel', function(e) { if (!isScrolling){ isScrolling = true; var howFarFromTop = $(document).scrollTop(); //how far from the top have we scrolled? var currentWindowHeight = $( window ).height(); //current window height for responsiveness var delta = e.originalEvent.deltaY; // just to know if it is scroll wheel up or down //find out what is our offset from the top so we can now how far do we have to scroll to the next / previous element var currentSlide = Math.floor(howFarFromTop / currentWindowHeight); //approximate which slide is on screen at the moment if (delta > 0){ //scroll down smoothScroll(currentWindowHeight * (currentSlide + 1)); } else { //scroll up smoothScroll(currentWindowHeight * (currentSlide -1)); } setTimeout(function(){isScrolling = false}, 400) } return false; // don't let the browser do the default scroll }); }); function smoothScroll(offsetPixels){ if (offsetPixels < 0){ //avoid negative numbers on the scroll up offsetPixels = 0; } //this function is just to make an animated scrolling transition $('html, body').animate({ scrollTop: offsetPixels }, 300); }：

step()

https://codepen.io/jdoyle/pen/mMpQKR

这样可行，但如果您多次点击，则会得到一些奇怪的结果。进行一些重构并在用户点击后删除事件监听器：

//step()
document.addEventListener "click", () =>
  step()

Answer 2

替换：

confetti = (function() {
    var j, ref, results;
    results = [];
    for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
      results.push(new Confetti);
    }
    return results;
  })();

到

confetti = [];

放入内部点击监听器：

var j, ref;
for (i = j = 1, ref = NUM_CONFETTI; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
  confetti.push(new Confetti);
}

点击开始五彩纸屑

2 个答案: