大家好，我有这样一个问题。我有两个脚本，animm .js和main.js。在anim.js中描述动画，而在main.js中，我试图通过按下按钮来停止。我试图通过时间轴停止，但我无法在main.js中访问时间轴，时间轴初始化在文件anims .js
anim.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="Adobe_Animate_CC" name="authoring-tool">
<title>anim</title>
<!-- write your code here -->
<style>
#animation_container {
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
body, canvas {
background: none transparent !important;
}
</style>
<script src="../js/libs/adobe/createjs.js"></script>
<script src="anim.js"></script>
<script>
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
function init() {
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp = AdobeAn.getComposition("4D38855BFA773041952A1579DB0CC3CC");
var lib = comp.getLibrary();
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", function (evt) {
handleFileLoad(evt, comp)
});
loader.addEventListener("complete", function (evt) {
handleComplete(evt, comp)
});
var lib = comp.getLibrary();
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt, comp) {
var images = comp.getImages();
if (evt && (evt.item.type == "image")) {
images[evt.item.id] = evt.result;
}
}
function handleComplete(evt, comp) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created
//in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for (i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({
"images": [queue.getResult(ssMetadata[i].name)],
"frames": ssMetadata[i].frames
})
}
exportRoot = new lib.anim();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function () {
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
};
//Code to support hidpi screens and responsive scaling.
AdobeAn.makeResponsive(true, 'both', true, 1, [canvas, anim_container, dom_overlay_container]);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
}
</script>
<script src="../js/main.js"></script>
<script>
function doLoadIframe() {
console.log('catch1');
let msg = function() {
p = 'привет';
return p;
}
//отправка события родителю
parent.postMessage(msg(), '*');
parent.focus();
init();
//setTimeout(stpAnimDef, 100);
}
</script>
<script>
window.addEventListener("message", function(msg){
console.log(msg.data);
if (msg.data == 'stop') {
stopAnimation();
} else if (msg.data == 'play'){
playAnimation();
}
let text = document.querySelector('.textAnim');
text.value = msg.data;
});
</script>
<!-- write your code here -->
</head>
<body onload="doLoadIframe();" style="margin:0px;">
<div id="animation_container" style="width:1280px; height:720px">
<canvas height="720" id="canvas"
style="position: absolute; display: block;"
width="1280"></canvas>
<div id="dom_overlay_container"
style="pointer-events:none; overflow:hidden; width:1280px; height:720px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
<input type='text' class='textAnim' />
</body>
</html>
anim.js
var timeline = new createjs.Timeline({paused: true});
(function (cjs, an) {
var p; // shortcut to reference prototypes
var lib={};var ss={};var img={};
lib.ssMetadata = [
{name:"anim_atlas_", frames: [[0,0,233,233]]}
];
// symbols:
(lib.CachedTexturedBitmap_1 = function() {
this.initialize(ss["anim_atlas_"]);
this.gotoAndStop(0);
}).prototype = p = new cjs.Sprite();
// helper functions:
function mc_symbol_clone() {
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
}
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds) {
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds;
return prototype;
}
(lib.Символ1 = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой_1
this.instance = new lib.CachedTexturedBitmap_1();
this.instance.parent = this;
this.instance.setTransform(-0.5,-0.5,0.5,0.5);
var t = cjs.Tween.get(this.instance).wait(1);
timeline.addTween(t/*cjs.Tween.get(this.instance).wait(1)*/);
}).prototype = getMCSymbolPrototype(lib.Символ1, new cjs.Rectangle(-0.5,-0.5,116.5,116.5), null);
// stage content:
(lib.anim = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой_1
this.instance = new lib.Символ1();
this.instance.parent = this;
this.instance.setTransform(210.85,268.85,1,1,0,0,0,57.8,57.8);
var t1 = cjs.Tween.get(this.instance).wait(1).to({x:243.8},0).wait(1).to({x:276.8},0).wait(1).to({x:309.8},0).wait(1).to({x:342.8},0).wait(1).to({x:375.8},0).wait(1).to({x:408.8},0).wait(1).to({x:441.8},0).wait(1).to({x:474.8},0).wait(1).to({x:507.8},0).wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1)
.call(function(){
this.dispatchEvent("foo");
}, null, timeline);
timeline.addTween(t1);
timeline.setPaused(false);
//this.timeline.addTween(cjs.Tween.get(this.instance, {reversed:true})./*wait(1).to({x:243.8},0).wait(1).to({x:276.8},0).wait(1).to({x:309.8},0).wait(1).to({x:342.8},0).wait(1).to({x:375.8},0).wait(1).to({x:408.8},0).wait(1).to({x:441.8},0).wait(1).to({x:474.8},0).wait(1).to({x:507.8},0).*/wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1));
//this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({x:540.8},0).wait(1).to({x:573.8},0).wait(1).to({x:606.8},0).wait(1).to({x:639.8},0).wait(1).to({x:672.8},0).wait(1).to({x:705.75},0).wait(1).to({x:738.75},0).wait(1).to({x:771.75},0).wait(1).to({x:804.75},0).wait(1).to({x:837.75},0).wait(1).to({x:870.75},0).wait(1).to({x:903.75},0).wait(1).to({x:936.75},0).wait(1).to({x:969.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1167.75},0).wait(1).to({x:1134.75},0).wait(1).to({x:1101.75},0).wait(1).to({x:1068.75},0).wait(1).to({x:1035.75},0).wait(1).to({x:1002.75},0).wait(1).to({x:969.75},0).wait(1).to({x:936.75},0).wait(1).to({x:903.75},0).wait(1).to({x:870.75},0).wait(1).to({x:837.75},0).wait(1).to({x:804.75},0).wait(1).to({x:771.75},0).wait(1).to({x:738.75},0).wait(1).to({x:705.75},0).wait(1).to({x:672.8},0).wait(1).to({x:639.8},0).wait(1).to({x:606.8},0).wait(1).to({x:573.8},0).wait(1).to({x:540.8},0).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(792.6,570.6,433.30000000000007,-243.5);
// library properties:
lib.properties = {
id: '4D38855BFA773041952A1579DB0CC3CC',
width: 1280,
height: 720,
fps: 20,
color: "#FFFFFF",
opacity: 1.00,
manifest: [
{src:"images/anim_atlas_.png", id:"anim_atlas_"}
],
preloads: []
};
// bootstrap callback support:
(lib.Stage = function(canvas) {
createjs.Stage.call(this, canvas);
}).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay) {
this.tickEnabled = autoPlay;
}
p.play = function() { this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition()) }
p.stop = function(ms) { if(ms) this.seek(ms); this.tickEnabled = false; }
p.seek = function(ms) { this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000); }
p.getDuration = function() { return this.getChildAt(0).totalFrames / lib.properties.fps * 1000; }
p.getTimelinePosition = function() { return this.getChildAt(0).currentFrame / lib.properties.fps * 1000; }
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners) {
an.bootstrapListeners=[];
}
an.bootstrapCallback=function(fnCallback) {
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0) {
for(var i=0; i<an.bootcompsLoaded.length; ++i) {
fnCallback(an.bootcompsLoaded[i]);
}
}
};
an.compositions = an.compositions || {};
an.compositions['4D38855BFA773041952A1579DB0CC3CC'] = {
getStage: function() { return exportRoot.getStage(); },
getLibrary: function() { return lib; },
getSpriteSheet: function() { return ss; },
getImages: function() { return img; }
};
an.compositionLoaded = function(id) {
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++) {
an.bootstrapListeners[j](id);
}
}
an.getComposition = function(id) {
return an.compositions[id];
}
an.makeResponsive = function(isResp, respDim, isScale, scaleType, domContainers) {
var lastW, lastH, lastS=1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas() {
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih=window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio=iw/w, yRatio=ih/h, sRatio=1;
if(isResp) {
if((respDim=='width'&&lastW==iw) || (respDim=='height'&&lastH==ih)) {
sRatio = lastS;
}
else if(!isScale) {
if(iw<w || ih<h)
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==1) {
sRatio = Math.min(xRatio, yRatio);
}
else if(scaleType==2) {
sRatio = Math.max(xRatio, yRatio);
}
}
domContainers[0].width = w * pRatio * sRatio;
domContainers[0].height = h * pRatio * sRatio;
domContainers.forEach(function(container) {
container.style.width = w * sRatio + 'px';
container.style.height = h * sRatio + 'px';
});
stage.scaleX = pRatio*sRatio;
stage.scaleY = pRatio*sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
}
}
})(createjs = createjs||{}, AdobeAn = AdobeAn||{});
var createjs, AdobeAn;
main.js
function stopAnimation() {
console.log(timeline);
}
将所有脚本剪切并粘贴到body htm标签底部