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 で動作させることができませんでしたが、通常の Web サイトでは、赤または青のオプションを含むドロップダウン メニューが作成されます。

赤を選択するとアニメーション化された赤いパーティクルがキャンバスに表示され、リストから青を選択するとパーティクルが青に変わります。

私がやろうとしているのは、私が行う方法を知っている選択リストを削除することです。

ただし、赤/青のアニメーションを時間間隔で設定します。

たとえば、ページが読み込まれ、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 に答える