0

我对 js 有点菜鸟，但已经搞砸了http://scurker.com/blog/2010/06/particle-generator-using-html5s-canvas并想出了

<head>
    <script type="text/javascript" src="http://scurker.com/projects/particles/js/particle.js"></script>
  <script type="text/javascript" src="http://scurker.com/projects/particles/js/jquery.js"></script>
  <script type="text/javascript" src="http://scurker.com/projects/particles/js/jquery-ui.js"></script>
  <script type="text/javascript">

var particles;
window.onload = function() {  
  var canvas = document.getElementById('particle_canvas');
  particles = new ParticleCanvas(canvas, {x: 470});
 };

var effects = { 

  blue: {
    shape: 'circle',
    velocity: new Vector({y: -0.35}),
    color: '#0000ff',
    opacity: 1,
    onDraw: function(p) {
      p.opacity = 0.251 - (p.age / p.life) * 0.25;
    }
  },

  red: {
    shape: 'circle',
    velocity: new Vector({y: -3}),
    color: '#ff0000',
    opacity: 1,
    onDraw: function(p) {
      var y = -this.age * 3;
      p.size *= 0.98;
      p.opacity = 0.5 - (p.age / p.life * 0.4);
    }
  },
};

$.fn.toJson = function() {
  var json = {};
  $.each(this.serializeArray(), function() {
    json[this.name] = this.value !== null ? this.value : null;
  });
  return json;
};

function loadPreset(val) {
  var obj;  
  if((obj = effects[val])) {
    particles.update(obj);
    for(var i in obj) {
      var value = (obj[i] instanceof Vector) ? -obj[i].y : obj[i];
      $(':input[name=' + i + ']').val(value);
    }
    $('input').change();
  }
}


$(document).ready(function() {

  $('#controls :input').change(function() {
    particles.update($('#controls :input').toJson());
 particles.start();
  });

  $('select').change(function() { loadPreset(this.value); });
});

  </script>
</head>
     <body>
         <div id="particle_container">
<div id="controls">
  <ul>
    <li>
      <label>Presets: 
        <select>
          <option value="blue">Blue</option>
          <option value="red">Red</option>
        </select>
      </label>
    </li>
  </ul>
</div>
<canvas id="particle_canvas" height="500" width="940"></canvas>

我无法让它在 jsfiddle 中工作，但在普通网站中，它会创建一个带有红色或蓝色选项的下拉菜单。

当您选择红色时，画布上会出现一些动画红色粒子，当您从列表中选择蓝色时，粒子会变为蓝色。

我想要做的是删除选择列表，我知道该怎么做。

但是将红色/蓝色动画设置为时间间隔。

因此，例如页面加载，等待 2 秒然后我希望红色粒子显示 5 秒（好像用户从下拉菜单中选择了红色）然后暂停 2 秒，蓝色粒子开始再过 5 秒（再次好像有人从下拉列表中选择了蓝色）。

所以基本上我试图将粒子设置为以预设的间隔运行，而不是手动选择。

我将如何实现这一目标？

谢谢你的帮助

4

1 回答 1

0

你不会在 javascript 中使用 setTimeout 吗？

setTimeout(/*do nothing*/,2000); // waiting
// red particles
setTimeout(/* Stop particles after 5 second*/,5000);
setTimeout(/*do nothing*/,2000); // waiting
// blue particles
setTimeout(/* Stop particles after 5 second*/,5000);
于 2013-02-22T15:51:36.680 回答