播放/暂停任何画布动画

Question

我正在构建一个工具，其中有一个IFRAME，用户可以在其中放入任何包含画布动画的HTML。

目的是让他们选择是否要使用createJS，Adobe Edge Animate或他们喜欢的任何其他工具。

尽管如此，我仍然需要能够播放和暂停此画布动画，而不管他们使用了哪个工具。

你认为这是可能的吗？或者你认为我会被绑定到他们使用的框架上？

我已经尝试清除页面的请求动画帧，但没有正常工作。

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

你有什么建议吗？

谢谢！

安德烈

编辑： 在我的情况的iframe是一种沙箱，用户可以把为所欲为，甚至是JavaScript的，因为他用

Answer 1

框架的运作

支持不同HTML5画布库

这在理论上是可能的，因为虽然大多数图书馆有自己内置的动画方法，你当然可以只使用自己的绘制方法然后使用您自己的动画循环为他们的绘图制作动画。

但是，哇！这将是一项艰巨的任务。刚刚从我的头顶，你将不得不：

1. 只加载用户选择库的代码 - 例如， Easel.js。

2. 创建一个画布DOM元素，任何库必须使用它来显示图形。

3. 创建一个钩子让他们设置他们特定的库环境。例如，这是EaselJS用户创建舞台的地方：var stage = new createjs.Stage("theRequiredCanvas");

4. 创建一个挂钩，让他们在动画循环中运行其品牌的代码。

5. 要将他们的代码挂接到您的框架中，您必须要求他们将所有代码放入随框架加载的.js文件中。

正在停止......！

我将停止在这里推理出一个解决方案，因为这对于用户来说不仅仅是使用他们自己的库更多的工作。

你的问题的简单的部分：暂停&继续动画

您可以设置停止动画循环的标志。

当您想要继续动画时，清除该标志并请求动画循环。

示例代码：

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>