일련의 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에서 일하지만 정상적인 웹 사이트에가 만들 수 couldnt는 함께했다 빨간색 또는 파란색 옵션이있는 드롭 다운 메뉴.

빨간색을 선택하면 애니메이션 빨간색 부분이 캔버스에 나타나며 목록에서 파란색을 선택하면 입자가 파란색으로 바뀝니다.

내가하려는 것은 내가 수행하는 방법을 알고있는 선택 목록을 제거하는 것입니다.

그러나 빨강/파랑 애니메이션을 시간 간격으로 설정하십시오.

예를 들어 페이지가로드되고 2 초 동안 기다린 다음 빨간색 입자를 5 초 동안 표시하고 (사용자가 드롭 다운 메뉴에서 빨간색을 선택한 것처럼) 2 초 동안 일시 중지하고 파란색 파티클을 5 초 동안 다시 시작합니다 (다시 한번 누군가가 드롭 다운 목록에서 파란색을 선택한 것처럼).

기본적으로 수동으로 선택하는 대신 미리 설정된 간격으로 입자를 설정하려고합니다.

어떻게 해결할 수 있습니까?

도움을 주셔서 감사합니다.

출처

2013-02-22 Sam Healey

자바 스크립트에서 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 애니메이션을 만드는 방법은 무엇입니까?

답변

관련 문제