Adobe Animate HTML5 加载动画

Question

我已经使用 Adobe Animate HTML5 canvas 创建了一个演示文稿，现在我想添加一个简单的动画，该动画会在演示文稿加载后隐藏。我有动画并将它放在 HTML 中就好了，但我无法弄清楚如何在加载所有内容后让它消失。这是代码：

<html>
<head>
<meta charset="UTF-8">
<title>Intervention</title>
<!-- write your code here -->


<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<script src="Intervention.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
    // --- write your JS code here ---

    canvas = document.getElementById("canvas");

    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

function handleComplete(evt) {
    exportRoot = new lib.Intervention();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();
    stage.enableMouseOver();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}


function playSound(id, loop) {
    return createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>

<!-- write your code here -->

</head>
<body onload="init();" style="background-color:#D4D4D4;margin:0px;">
    <canvas id="canvas" width="833" height="510" style="background-color:#FFFFFF"></canvas>
    <div id="MyLoader" style="position: absolute; top: 255px; left: 416px;"><img src="./images/myloader.gif"></div>
</body>
</html>

我应该放置什么以及放在哪里，以便 "MyLoader" 在 canvas 加载后隐藏？

非常感谢！

Answer 1

handleComplete 方法在 JavaScript 及其清单全部加载时触发，因此您可以将隐藏加载程序的代码放在那里。

function handleComplete(evt) {
    document.getElementById("MyLoader").style.display = "none";
    // other code in this method not shown...
}

Adobe Animate HTML5 加载动画

Adobe Animate HTML5 loading animation

html

javascript

animation

canvas

loader