User:Cleonis/sandbox/requestAnimationFrame

From JSXGraph Wiki
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.


    


The JavaScript code

var board = JXG.JSXGraph.initBoard(
  'jxgbox',
  {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true}
);

var isPlaying = false;
var starttime = 0;
var timeElapsed = 0;
var requestId = 0;

var p = board.create(
  'point',
  [function() {return Math.cos(timeElapsed)}, function() {return Math.sin(timeElapsed)}]
);

function playing() {
  timeElapsed = (Date.now() - starttime)/1000;
  board.update();
  requestId = window.requestAnimationFrame(playing);
};

function play() {
  if (!isPlaying) {
    starttime = Date.now();
    isPlaying = true;
    window.requestAnimationFrame(playing);
  }
};

function resetAnimation() {
  if (requestId) {
    window.cancelAnimationFrame(requestId);
  }
  timeElapsed = 0;
  isPlaying = false;
  board.update();
};

The HTML

&nbsp;&nbsp;<button id="playbutton" onclick="play()">play</button>&nbsp;&nbsp;<button id="resetanimation" onclick="resetAnimation()">reset</button>


Note that the command 'requestAnimationFrame' must be given twice; it's present both in the function 'play()' and in the function 'playing()'.

The function Date.now() returns a timestamp in miliseconds. To make the variable timeElapsed count time in seconds the number (Date.now() - starttime) is divided by 1000.

The function Date.now() is a relative new addition to Javascript. In the case of Internet Explorer: support of Date.now() was introduced in IE9.