通過jQuery UI滑塊控制html5 canvas動畫速度

Question

我正在嘗試構建交互式html5畫布動畫。 所以我試圖根據jquery ui滑塊值控制動畫速度。 當滑塊值自動更改時，它將反映在畫布動畫中 。

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

這是我的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);

復制可粘貼的代碼：

<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將在每個設置的時間范圍內自動運行，因此您必須先停止它才能更改其時間。