Question

我正在尝试构建一个交互式html5画布动画。所以我试图根据jquery ui滑块值控制动画速度。 当滑块值自动更改时，它将反映在画布动画中。

我是jquery和canvas动画的初学者，所以请在代码示例或参考资料中描述可能的方式。

$(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将在每个设定的时间范围内自动运行，因此您无法在不先停止的情况下更改其时间。

通过jquery ui滑块控制html5画布动画速度

2 个答案: