如何創建一系列jquery/js動畫？

我有點用JS一個小白，但有http://scurker.com/blog/2010/06/particle-generator-using-html5s-canvas好惹的，並與如何創建一系列jquery/js動畫？

<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秒鐘（再次，就好像有人從下拉列表中選擇了藍色）。

所以基本上我試圖設置粒子以預設的時間間隔運行，而不是手動選擇。

我該如何實現這個目標？

感謝您的任何幫助

來源

2013-02-22 Sam Healey

難道你只是在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-22 15:51:36 clurect

如何創建一系列jquery/js動畫？

回答

相關問題