播放/暂停任何画布动画

Question

I'm building a tool where I have an IFRAME inside of which a user can put any HTML containing a canvas animation.

The purpose is to let them choose if they want to use createJS, Adobe Edge Animate or any other tool they prefer.

Despite this I need to be able to play and pause this canvas animation no matter which tool they used.

Do you think this is possible? Or do you think I will be tied to the framework they used?

I've tried clearing the request animation frame of the page but it didn't work well.

iframe.contentWindow.cancelAnimationFrame(<don't know what to put in here without accessing the animation framework>)

Do you have any suggestion?

Thank you!

Andrea

EDIT: In my case scenario the iframe is a sort of sand-box where the user can put whatever it wants, even the javascript for the functioning of the framework he used

Answer 1

Supporting different Html5 Canvas libraries

It is theoretically possible because while most libraries have their own built-in animation methods, you can certainly just use their drawing methods and then use your own animation loop to animate their drawings.

But, Wow! This would be a huge task. Just off the top of my head you would have to:

1. Load only the code of the users selected library - eg. Easel.js .

2. Create a canvas DOM element which any library must use to display drawings.

3. Create a hook to let them set up their particular libraries environment. For example, this is where the EaselJS user would create their stage: var stage = new createjs.Stage("theRequiredCanvas");

4. Create a hook to let them run their brand of code inside your animation loop.

5. To hook their code into your framework, you would have to require them to put all their code into a .js file that is loaded with your framework.

Stopping...!

I'm going to stop reasoning out a solution here because this would be more work for the user than just using their own library.

The easy part of your question: Pausing & Continuing an animation

You can set a flag that stops the animation loop.

When you want to continue the animation you clear that flag and request the animation loop.

Example code:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); ctx.fillStyle='skyblue'; ctx.strokeStyle='lightgray'; ctx.lineWidth=3; var cw=canvas.width; var ch=canvas.height; // animation will pause when paused==true var paused=false; // testing, a rotation angle for the animated rect var angle=0; // pause the animation on #pause click $('#pause').on('click',function(){ paused=true; }); // continue the animation on #continue click $('#continue').on('click',function(){ paused=false; requestAnimationFrame(animate); }); // start the animation loop requestAnimationFrame(animate); function animate(time){ if(paused){return;} // animate anything ctx.clearRect(0,0,cw,ch); ctx.translate(cw/2,ch/2); ctx.rotate(angle); ctx.fillRect(-50,-50,100,100); ctx.strokeRect(-50,-50,100,100); ctx.setTransform(1,0,0,1,0,0); // increase the angle for the next loop angle+=Math.PI/60; // request another animation loop requestAnimationFrame(animate); }

 body{ background-color: ivory; } #canvas{border:1px solid red; margin:0 auto; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button id='pause'>Pause</button> <button id='continue'>Continue</button> <br> <canvas id="canvas" width=300 height=300></canvas>