控制HTML5畫布動畫速度由jquery UI滑塊

Question

我想構建一個交互式的HTML5畫布動畫。所以我試圖控制基於jquery ui滑塊值的動畫速度。 當滑塊值自動變化時，它會反映在畫布動畫中。

我是jquery和canvas動畫的初學者，所以請在代碼示例或參考材料中描述可能的方法。

Here is my link for codepen

$(function() { 
    $("#slider").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function(event, ui) { 
     $("#amount").val(ui.value); 
     } 
    }); 
    $("#amount").val($("#slider").slider("value")); 
    }); 


//canvas animation 

var canvas = document.getElementById("stage"); 
    var ctx = canvas.getContext("2d"); 
    var speed= 2;  // get jquery ui slider value 

Answer 1

重要的事情：

clearInterval(t); 
t = setInterval(DrawCanvas, 120/ui.value); 

複製pastable代碼：

<div class="container"> 
    <div class="btn"></div> 
    <input id="amount"type="text" /> 
    <div id="slider" style="height:200px;"></div> 
    <canvas id="stage" width="289" height="289" style="border:2px solid black;top: 20%; left: 50%;" ></canvas> 
</div> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
<script> 
var t;    // this will be the setInterval object. We will control the speed with this 
var factor = 120; // 120ms/the slider value; default: 120/4 = 30 
//ui slider 
$("#slider").slider({ 
    orientation: "vertical", 
    range: "min", 
    min: 1, 
    max: 10, 
    value: 4, 
    slide: function(event, ui) { 
    $("#amount").val(ui.value); 
    clearInterval(t); 
    t = setInterval(DrawCanvas, 120/ui.value); 
    } 
}); 
$("#amount").val($("#slider").slider("value")); 
var speedvar= document.getElementById("amount").value; 
var canvas = document.getElementById("stage"); 
var ctx = canvas.getContext("2d"); 
var speed= speedvar; //get value form jquery ui slider 
var Ball = new Array(); 
var BallNow; 
var SumMove = 50; 
var posX, posY, r, TheAngle, TheSpeed, MoveX, MoveY; 

for(i=0; i<SumMove; i++) { 
    posX = r + Math.random() * (canvas.width - r*2); 
    posY = r + Math.random() * (canvas.height - r*2); 
    r = 5; 
    TheAngle = Math.random() * 360; 
    TheSpeed = speed; 
    console.log(TheSpeed); 
    MoveX = Math.cos(Math.PI/180 * TheAngle) * TheSpeed; 
    MoveY = Math.sin(Math.PI/180 * TheAngle) * TheSpeed; 

    BallNow = {x: posX, y: posY, r:r, MoveX: MoveX, MoveY: MoveY}; 
    Ball.push(BallNow); 
} 
t = setInterval(DrawCanvas, 30); 

function DrawCanvas() { 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    for(i=0; i<SumMove; i++) { 
    Ball[i].x += Ball[i].MoveX; 
    Ball[i].y += Ball[i].MoveY; 
    if(Ball[i].x + Ball[i].r >= canvas.width || Ball[i].x - Ball[i].r <= 0) { 
     Ball[i].MoveX = -Ball[i].MoveX; 
    } 
    if(Ball[i].y + Ball[i].r >= canvas.height || Ball[i].y - Ball[i].r <= 0) { 
     Ball[i].MoveY = -Ball[i].MoveY; 
    } 
    ctx.beginPath(); 
    ctx.fillStyle = "#042fcf"; 
    ctx.arc(Ball[i].x, Ball[i].y, Ball[i].r, 0, Math.PI*2,false); 
    ctx.fill(); 
    ctx.closePath(); 
    } 
} 
</script> 

Answer 2

，而不是使用setInterval的動畫畫布...嘗試使用動畫功能內setTimeout和設置的速度幀的滑塊值之間。

你有什麼：

setInterval(DrawCanvas,30); 
function DrawCanvas(){} 

你應該嘗試什麼：

function DrawCanvas(){ 
    setTimeout(DrawCanvas, speed); 
} 
DrawCanvas(); 

基本上，setTimeout的將只運行一次，並設定時間後，這樣你就可以動態地改變幀之間的時間。

另一方面，setInterval將在每個設定的時間範圍內自動運行，因此如果不先停止它，您將無法更改其時間。