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 Canvas库

理论上可行，因为虽然大多数库都有自己的内置动画方法，但您当然可以使用它们的绘图方法，然后使用自己的动画循环来为它们的绘图设置动画。

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

仅加载用户所选库的代码 - 例如。 Easel.js。
创建一个canvas DOM元素，任何库都必须使用它来显示图形。
创建一个钩子，让他们设置他们的特定库环境。例如，这是EaselJS用户创建阶段的地方：var stage = new createjs.Stage("theRequiredCanvas");
创建一个钩子让他们在动画循环中运行他们的代码品牌。
要将代码挂钩到框架中，您必须要求他们将所有代码放入加载了框架的.js文件中。

停止...！的

我将不再在这里推断出解决方案，因为这对用户来说比仅使用他们自己的库更有用。

您问题的简单部分：暂停＆amp;继续动画

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

如果要继续动画，请清除该标志并请求动画循环。

示例代码：

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>

播放/暂停任何画布动画

1 个答案: