User:Cleonis/sandbox/requestAnimationFrame: Difference between revisions
From JSXGraph Wiki
(Created page with "<jsxgraph width="500" height="500"> var board = JXG.JSXGraph.initBoard( 'jxgbox', {boundingbox:[-1.5,1.5,1.5,-1.5], keepaspectratio:true, axis:true} ); var isPlaying = fals...") |
(No difference)
|
Revision as of 18:47, 26 August 2014
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
<button id="playbutton" onclick="play()">play</button> <button id="resetanimation" onclick="resetAnimation()">reset</button>