Question

我有点像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秒（再次好像有人从下拉列表中选择了蓝色）。

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

我将如何实现这一目标？

感谢您的帮助

Answer 1

你不能在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);

如何创建一系列jquery / js动画？

1 个答案: