播放/暫停任何畫布動畫

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>