javascript - Animate CC Canvas 导出嵌入角度模板

问题描述

所以我想带来一个我在 animate cc 中完成的小动画，并将其嵌入到画布上的一个角度模板中，如下所示：

<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px">
    <canvas id="canvas" width="1014" height="650" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
    <div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1014px; height:650px; position: absolute; left: 0px; top: 0px; display: block;">
    </div>
</div>

我在 component.ts 中引用了由 animate cc 生成的 javascript 但是当我尝试编译应用程序时出现一些错误

1）未捕获的类型错误：createjs.Rectangle 不是构造函数（即使我安装了 createjs）import * as createjs from 'createjs-module';

console.log("Entered BallAnim script");
var createjs, AdobeAn;

(function (cjs, an) {

    var p; // shortcut to reference prototypes

    var lib = {};
    var ss = {};
    var img = {};

    lib.ssMetadata = [];

console.log("Entered BallAnim Init");

// symbols:
// 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

	console.log("Were we able to return any prototype: " + prototype);

	return prototype;
}


(lib.Ball = function (mode, startPosition, loop) {
    this.initialize(mode, startPosition, loop, {});

    // Layer_1
    this.shape = new cjs.Shape();
    this.shape.graphics.f("#FF0000").s().p("AvZOnQmXmDgBokQABojGXmDQGZmEJAAAQJBAAGYGEQGZGDAAIjQAAIkmZGDQmYGEpBAAQpAAAmZmEg");
    this.shape.setTransform(139.4, 132.3);

    this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));

}).prototype = getMCSymbolPrototype(lib.Ball, new createjs.Rectangle(0, 0, 278.7, 264.6), null); //ORG


// stage content:
(lib.Untitled1 = function (mode, startPosition, loop) {
    this.initialize(mode, startPosition, loop, {});

    // timeline functions:
    this.frame_300 = function () {
        /*
		Stop a Movie Clip/Video
		Stops the specified movie clip or video.
		*/
        _this.stop();
    }

    // actions tween:
    this.timeline.addTween(cjs.Tween.get(this).wait(300).call(this.frame_300).wait(1));

    // Layer_1
    this.instance = new lib.Ball();
    this.instance.parent = this;
    this.instance.setTransform(-97.3, 114.2, 0.718, 0.756, 0, 0, 0, 139.3, 132.3);

    this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({ x: -89.3, y: 129.2 }, 0).wait(1).to({ x: -81.4, y: 144.2 }, 0).wait(1).to({ x: -73.4, y: 159.2 }, 0).wait(1).to({ x: -65.5, y: 174.2 }, 0).wait(1).to({ x: -57.5, y: 189.2 }, 0).wait(1).to({ x: -49.6, y: 204.2 }, 0).wait(1).to({ x: -41.6, y: 219.2 }, 0).wait(1).to({ x: -33.7, y: 234.3 }, 0).wait(1).to({ x: -25.7, y: 249.3 }, 0).wait(1).to({ x: -17.8, y: 264.3 }, 0).wait(1).to({ x: -9.9, y: 279.3 }, 0).wait(1).to({ x: -1.9, y: 294.3 }, 0).wait(1).to({ x: 6, y: 309.3 }, 0).wait(1).to({ x: 14, y: 324.3 }, 0).wait(1).to({ x: 21.9, y: 339.4 }, 0).wait(1).to({ x: 29.9, y: 354.4 }, 0).wait(1).to({ x: 37.8, y: 369.4 }, 0).wait(1).to({ x: 45.8, y: 384.4 }, 0).wait(1).to({ x: 53.7, y: 399.4 }, 0).wait(1).to({ x: 61.6, y: 414.4 }, 0).wait(1).to({ x: 69.6, y: 429.4 }, 0).wait(1).to({ x: 77.5, y: 444.5 }, 0).wait(1).to({ x: 85.5, y: 459.5 }, 0).wait(1).to({ x: 93.4, y: 474.5 }, 0).wait(1).to({ x: 101.3, y: 489.5 }, 0).wait(1).to({ x: 109.3, y: 504.5 }, 0).wait(1).to({ x: 117.2, y: 519.5 }, 0).wait(1).to({ x: 125.2, y: 534.5 }, 0).wait(1).to({ x: 133.1, y: 549.5 }, 0).wait(1).to({ x: 141.6, y: 538.5 }, 0).wait(1).to({ x: 150, y: 527.5 }, 0).wait(1).to({ x: 158.5, y: 516.5 }, 0).wait(1).to({ x: 166.9, y: 505.5 }, 0).wait(1).to({ x: 175.4, y: 494.5 }, 0).wait(1).to({ x: 183.8, y: 483.5 }, 0).wait(1).to({ x: 192.3, y: 472.5 }, 0).wait(1).to({ x: 200.7, y: 461.5 }, 0).wait(1).to({ x: 209.2, y: 450.5 }, 0).wait(1).to({ x: 217.6, y: 439.4 }, 0).wait(1).to({ x: 226.1, y: 428.4 }, 0).wait(1).to({ x: 234.5, y: 417.4 }, 0).wait(1).to({ x: 243, y: 406.4 }, 0).wait(1).to({ x: 251.4, y: 395.4 }, 0).wait(1).to({ x: 259.9, y: 384.4 }, 0).wait(1).to({ x: 268.3, y: 373.4 }, 0).wait(1).to({ x: 276.8, y: 362.4 }, 0).wait(1).to({ x: 285.2, y: 351.4 }, 0).wait(1).to({ x: 293.7, y: 340.4 }, 0).wait(1).to({ x: 302.1, y: 329.3 }, 0).wait(1).to({ x: 310.6, y: 318.3 }, 0).wait(1).to({ x: 319, y: 307.3 }, 0).wait(1).to({ x: 327.5, y: 296.3 }, 0).wait(1).to({ x: 335.9, y: 285.3 }, 0).wait(1).to({ x: 344.4, y: 274.3 }, 0).wait(1).to({ x: 352.8, y: 263.3 }, 0).wait(1).to({ x: 361.3, y: 252.3 }, 0).wait(1).to({ x: 369.7, y: 241.3 }, 0).wait(1).to({ x: 378.2, y: 230.3 }, 0).wait(1).to({ x: 386.6, y: 219.2 }, 0).wait(1).to({ x: 389.7, y: 230.4 }, 0).wait(1).to({ x: 392.8, y: 241.5 }, 0).wait(1).to({ x: 395.9, y: 252.6 }, 0).wait(1).to({ x: 399, y: 263.7 }, 0).wait(1).to({ x: 402, y: 274.8 }, 0).wait(1).to({ x: 405.1, y: 285.9 }, 0).wait(1).to({ x: 408.2, y: 297.1 }, 0).wait(1).to({ x: 411.3, y: 308.2 }, 0).wait(1).to({ x: 414.3, y: 319.3 }, 0).wait(1).to({ x: 417.4, y: 330.4 }, 0).wait(1).to({ x: 420.5, y: 341.5 }, 0).wait(1).to({ x: 423.6, y: 352.6 }, 0).wait(1).to({ x: 426.6, y: 363.7 }, 0).wait(1).to({ x: 429.7, y: 374.9 }, 0).wait(1).to({ x: 432.8, y: 386 }, 0).wait(1).to({ x: 435.9, y: 397.1 }, 0).wait(1).to({ x: 439, y: 408.2 }, 0).wait(1).to({ x: 442, y: 419.3 }, 0).wait(1).to({ x: 445.1, y: 430.4 }, 0).wait(1).to({ x: 448.2, y: 441.5 }, 0).wait(1).to({ x: 451.3, y: 452.7 }, 0).wait(1).to({ x: 454.3, y: 463.8 }, 0).wait(1).to({ x: 457.4, y: 474.9 }, 0).wait(1).to({ x: 460.5, y: 486 }, 0).wait(1).to({ x: 463.6, y: 497.1 }, 0).wait(1).to({ x: 466.6, y: 508.2 }, 0).wait(1).to({ x: 469.7, y: 519.4 }, 0).wait(1).to({ x: 472.8, y: 530.5 }, 0).wait(1).to({ x: 475.9, y: 541.6 }, 0).wait(1).to({ x: 478.9, y: 552.7 }, 0).wait(1).to({ x: 483.4, y: 545.4 }, 0).wait(1).to({ x: 487.8, y: 538.1 }, 0).wait(1).to({ x: 492.3, y: 530.8 }, 0).wait(1).to({ x: 496.7, y: 523.5 }, 0).wait(1).to({ x: 501.1, y: 516.2 }, 0).wait(1).to({ x: 505.6, y: 508.9 }, 0).wait(1).to({ x: 510, y: 501.6 }, 0).wait(1).to({ x: 514.4, y: 494.2 }, 0).wait(1).to({ x: 518.9, y: 486.9 }, 0).wait(1).to({ x: 523.3, y: 479.6 }, 0).wait(1).to({ x: 527.8, y: 472.3 }, 0).wait(1).to({ x: 532.2, y: 465 }, 0).wait(1).to({ x: 536.6, y: 457.7 }, 0).wait(1).to({ x: 541.1, y: 450.4 }, 0).wait(1).to({ x: 545.5, y: 443.1 }, 0).wait(1).to({ x: 549.9, y: 435.8 }, 0).wait(1).to({ x: 554.4, y: 428.5 }, 0).wait(1).to({ x: 558.8, y: 421.2 }, 0).wait(1).to({ x: 563.2, y: 413.9 }, 0).wait(1).to({ x: 567.7, y: 406.6 }, 0).wait(1).to({ x: 572.1, y: 399.3 }, 0).wait(1).to({ x: 576.6, y: 392 }, 0).wait(1).to({ x: 581, y: 384.6 }, 0).wait(1).to({ x: 585.4, y: 377.3 }, 0).wait(1).to({ x: 589.9, y: 370 }, 0).wait(1).to({ x: 594.3, y: 362.7 }, 0).wait(1).to({ x: 598.7, y: 355.4 }, 0).wait(1).to({ x: 603.2, y: 348.1 }, 0).wait(1).to({ x: 607.6, y: 340.8 }, 0).wait(1).to({ x: 612, y: 333.5 }, 0).wait(1).to({ x: 614.4, y: 340.8 }, 0).wait(1).to({ x: 616.7, y: 348 }, 0).wait(1).to({ x: 619.1, y: 355.3 }, 0).wait(1).to({ x: 621.4, y: 362.5 }, 0).wait(1).to({ x: 623.8, y: 369.8 }, 0).wait(1).to({ x: 626.1, y: 377 }, 0).wait(1).to({ x: 628.5, y: 384.3 }, 0).wait(1).to({ x: 630.8, y: 391.5 }, 0).wait(1).to({ x: 633.2, y: 398.8 }, 0).wait(1).to({ x: 635.5, y: 406 }, 0).wait(1).to({ x: 637.9, y: 413.3 }, 0).wait(1).to({ x: 640.2, y: 420.6 }, 0).wait(1).to({ x: 642.6, y: 427.8 }, 0).wait(1).to({ x: 644.9, y: 435.1 }, 0).wait(1).to({ x: 647.3, y: 442.3 }, 0).wait(1).to({ x: 649.6, y: 449.6 }, 0).wait(1).to({ x: 652, y: 456.8 }, 0).wait(1).to({ x: 654.3, y: 464.1 }, 0).wait(1).to({ x: 656.7, y: 471.3 }, 0).wait(1).to({ x: 659, y: 478.6 }, 0).wait(1).to({ x: 661.4, y: 485.9 }, 0).wait(1).to({ x: 663.7, y: 493.1 }, 0).wait(1).to({ x: 666.1, y: 500.4 }, 0).wait(1).to({ x: 668.4, y: 507.6 }, 0).wait(1).to({ x: 670.8, y: 514.9 }, 0).wait(1).to({ x: 673.1, y: 522.1 }, 0).wait(1).to({ x: 675.5, y: 529.4 }, 0).wait(1).to({ x: 677.8, y: 536.6 }, 0).wait(1).to({ x: 680.2, y: 543.9 }, 0).wait(1).to({ x: 682.5, y: 551.1 }, 0).wait(1).to({ x: 686.3, y: 546.6 }, 0).wait(1).to({ x: 690.1, y: 542 }, 0).wait(1).to({ x: 693.8, y: 537.4 }, 0).wait(1).to({ x: 697.6, y: 532.8 }, 0).wait(1).to({ x: 701.4, y: 528.2 }, 0).wait(1).to({ x: 705.2, y: 523.6 }, 0).wait(1).to({ x: 709, y: 519 }, 0).wait(1).to({ x: 712.7, y: 514.4 }, 0).wait(1).to({ x: 716.5, y: 509.8 }, 0).wait(1).to({ x: 720.3, y: 505.3 }, 0).wait(1).to({ x: 724.1, y: 500.7 }, 0).wait(1).to({ x: 727.9, y: 496.1 }, 0).wait(1).to({ x: 731.6, y: 491.5 }, 0).wait(1).to({ x: 735.4, y: 486.9 }, 0).wait(1).to({ x: 739.2, y: 482.3 }, 0).wait(1).to({ x: 743, y: 477.7 }, 0).wait(1).to({ x: 746.7, y: 473.1 }, 0).wait(1).to({ x: 750.5, y: 468.5 }, 0).wait(1).to({ x: 754.3, y: 463.9 }, 0).wait(1).to({ x: 758.1, y: 459.4 }, 0).wait(1).to({ x: 761.9, y: 454.8 }, 0).wait(1).to({ x: 765.6, y: 450.2 }, 0).wait(1).to({ x: 769.4, y: 445.6 }, 0).wait(1).to({ x: 773.2, y: 441 }, 0).wait(1).to({ x: 777, y: 436.4 }, 0).wait(1).to({ x: 780.8, y: 431.8 }, 0).wait(1).to({ x: 784.5, y: 427.2 }, 0).wait(1).to({ x: 788.3, y: 422.6 }, 0).wait(1).to({ x: 792.1, y: 418 }, 0).wait(1).to({ x: 795.5, y: 422.5 }, 0).wait(1).to({ x: 799, y: 426.9 }, 0).wait(1).to({ x: 802.4, y: 431.4 }, 0).wait(1).to({ x: 805.9, y: 435.8 }, 0).wait(1).to({ x: 809.3, y: 440.2 }, 0).wait(1).to({ x: 812.8, y: 444.7 }, 0).wait(1).to({ x: 816.2, y: 449.1 }, 0).wait(1).to({ x: 819.7, y: 453.5 }, 0).wait(1).to({ x: 823.1, y: 458 }, 0).wait(1).to({ x: 826.5, y: 462.4 }, 0).wait(1).to({ x: 830, y: 466.9 }, 0).wait(1).to({ x: 833.4, y: 471.3 }, 0).wait(1).to({ x: 836.9, y: 475.7 }, 0).wait(1).to({ x: 840.3, y: 480.2 }, 0).wait(1).to({ x: 843.8, y: 484.6 }, 0).wait(1).to({ x: 847.2, y: 489 }, 0).wait(1).to({ x: 850.7, y: 493.5 }, 0).wait(1).to({ x: 854.1, y: 497.9 }, 0).wait(1).to({ x: 857.6, y: 502.3 }, 0).wait(1).to({ x: 861, y: 506.8 }, 0).wait(1).to({ x: 864.4, y: 511.2 }, 0).wait(1).to({ x: 867.9, y: 515.7 }, 0).wait(1).to({ x: 871.3, y: 520.1 }, 0).wait(1).to({ x: 874.8, y: 524.5 }, 0).wait(1).to({ x: 878.2, y: 529 }, 0).wait(1).to({ x: 881.7, y: 533.4 }, 0).wait(1).to({ x: 885.1, y: 537.8 }, 0).wait(1).to({ x: 888.6, y: 542.3 }, 0).wait(1).to({ x: 892, y: 546.7 }, 0).wait(1).to({ x: 895.4, y: 551.1 }, 0).wait(1).to({ x: 897.1, y: 550.3 }, 0).wait(1).to({ x: 898.7, y: 549.4 }, 0).wait(1).to({ x: 900.3, y: 548.5 }, 0).wait(1).to({ x: 901.9, y: 547.6 }, 0).wait(1).to({ x: 903.5, y: 546.7 }, 0).wait(1).to({ x: 905.1, y: 545.8 }, 0).wait(1).to({ x: 906.8, y: 544.9 }, 0).wait(1).to({ x: 908.4, y: 544.1 }, 0).wait(1).to({ x: 910, y: 543.2 }, 0).wait(1).to({ x: 911.6, y: 542.3 }, 0).wait(1).to({ x: 913.2, y: 541.4 }, 0).wait(1).to({ x: 914.8, y: 540.5 }, 0).wait(1).to({ x: 916.5, y: 539.6 }, 0).wait(1).to({ x: 918.1, y: 538.7 }, 0).wait(1).to({ x: 919.7, y: 537.8 }, 0).wait(1).to({ x: 921.3, y: 537 }, 0).wait(1).to({ x: 922.9, y: 536.1 }, 0).wait(1).to({ x: 924.5, y: 535.2 }, 0).wait(1).to({ x: 926.2, y: 534.3 }, 0).wait(1).to({ x: 927.8, y: 533.4 }, 0).wait(1).to({ x: 929.4, y: 532.5 }, 0).wait(1).to({ x: 931, y: 531.6 }, 0).wait(1).to({ x: 932.6, y: 530.8 }, 0).wait(1).to({ x: 934.2, y: 529.9 }, 0).wait(1).to({ x: 935.9, y: 529 }, 0).wait(1).to({ x: 937.5, y: 528.1 }, 0).wait(1).to({ x: 939.1, y: 527.2 }, 0).wait(1).to({ x: 940.7, y: 526.3 }, 0).wait(1).to({ x: 942.3, y: 525.4 }, 0).wait(1).to({ x: 943.9, y: 524.5 }, 0).wait(1).to({ x: 945.6, y: 525.6 }, 0).wait(1).to({ x: 947.3, y: 526.7 }, 0).wait(1).to({ x: 949, y: 527.8 }, 0).wait(1).to({ x: 950.6, y: 528.9 }, 0).wait(1).to({ x: 952.3, y: 530 }, 0).wait(1).to({ x: 954, y: 531.1 }, 0).wait(1).to({ x: 955.6, y: 532.2 }, 0).wait(1).to({ x: 957.3, y: 533.3 }, 0).wait(1).to({ x: 959, y: 534.4 }, 0).wait(1).to({ x: 960.6, y: 535.5 }, 0).wait(1).to({ x: 962.3, y: 536.6 }, 0).wait(1).to({ x: 964, y: 537.7 }, 0).wait(1).to({ x: 965.7, y: 538.8 }, 0).wait(1).to({ x: 967.3, y: 539.9 }, 0).wait(1).to({ x: 969, y: 541 }, 0).wait(1).to({ x: 970.7, y: 542.1 }, 0).wait(1).to({ x: 972.3, y: 543.2 }, 0).wait(1).to({ x: 974, y: 544.3 }, 0).wait(1).to({ x: 975.7, y: 545.4 }, 0).wait(1).to({ x: 977.3, y: 546.4 }, 0).wait(1).to({ x: 979, y: 547.5 }, 0).wait(1).to({ x: 980.7, y: 548.6 }, 0).wait(1).to({ x: 982.4, y: 549.7 }, 0).wait(1).to({ x: 984, y: 550.8 }, 0).wait(1).to({ x: 985.7, y: 551.9 }, 0).wait(1).to({ x: 987.4, y: 553 }, 0).wait(1).to({ x: 989, y: 554.1 }, 0).wait(1).to({ x: 990.7, y: 555.2 }, 0).wait(1).to({ x: 992.4, y: 556.3 }, 0).wait(1).to({ x: 994, y: 557.4 }, 0).wait(1).to({ x: 998.6, y: 557.6 }, 0).wait(1).to({ x: 1003.1, y: 557.8 }, 0).wait(1).to({ x: 1007.6, y: 558 }, 0).wait(1).to({ x: 1012.1, y: 558.2 }, 0).wait(1).to({ x: 1016.6, y: 558.4 }, 0).wait(1).to({ x: 1021.1, y: 558.6 }, 0).wait(1).to({ x: 1025.6, y: 558.8 }, 0).wait(1).to({ x: 1030.1, y: 559 }, 0).wait(1).to({ x: 1034.6, y: 559.2 }, 0).wait(1).to({ x: 1039.1, y: 559.4 }, 0).wait(1).to({ x: 1043.6, y: 559.5 }, 0).wait(1).to({ x: 1048.1, y: 559.7 }, 0).wait(1).to({ x: 1052.6, y: 559.9 }, 0).wait(1).to({ x: 1057.1, y: 560.1 }, 0).wait(1).to({ x: 1061.6, y: 560.3 }, 0).wait(1).to({ x: 1066.1, y: 560.5 }, 0).wait(1).to({ x: 1070.6, y: 560.7 }, 0).wait(1).to({ x: 1075.1, y: 560.9 }, 0).wait(1).to({ x: 1079.6, y: 561.1 }, 0).wait(1).to({ x: 1084.1, y: 561.3 }, 0).wait(1).to({ x: 1088.6, y: 561.5 }, 0).wait(1).to({ x: 1093.1, y: 561.7 }, 0).wait(1).to({ x: 1097.6, y: 561.9 }, 0).wait(1).to({ x: 1102.1, y: 562.1 }, 0).wait(1).to({ x: 1106.6, y: 562.3 }, 0).wait(1).to({ x: 1111.1, y: 562.5 }, 0).wait(1).to({ x: 1115.6, y: 562.7 }, 0).wait(1).to({ x: 1120.1, y: 562.9 }, 0).wait(1).to({ x: 1124.6, y: 563.1 }, 0).wait(1).to({ x: 1129.1, y: 563.3 }, 0).wait(1).to({ x: 1133.6, y: 563.5 }, 0).wait(1).to({ x: 1138.1, y: 563.6 }, 0).wait(1));

}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(309.8,339.2,200,200);
// library properties:
lib.properties = {
	id: 'E02FBD3CAEA74D4DA3569F226C585888',
	width: 1014,
	height: 650,
	fps: 30,
	color: "#FFFFFF",
	opacity: 1.00,
	manifest: [],
	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['E02FBD3CAEA74D4DA3569F226C585888'] = {
	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];
}



})(createjs = createjs||{}, AdobeAn = AdobeAn||{});

2) Uncaught ReferenceError: AdobeAn is not defined

var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;

console.log("Entered BallAnimSecondScript");

init();
function init() {

    console.log("Entered Init in BallAnim...");

    canvas = document.getElementById("canvas");
    anim_container = document.getElementById("animation_container");
    dom_overlay_container = document.getElementById("dom_overlay_container");
    var comp = AdobeAn.getComposition("E02FBD3CAEA74D4DA3569F226C585888");
    var lib = comp.getLibrary();
    handleComplete({}, comp);
}
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();
    exportRoot = new lib.Untitled1();
    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.
    function makeResponsive(isResp, respDim, isScale, scaleType) {
        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);
                }
            }
            canvas.width = w * pRatio * sRatio;
            canvas.height = h * pRatio * sRatio;
            canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
            canvas.style.height = anim_container.style.height = dom_overlay_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;
        }
    }
    makeResponsive(false, 'both', false, 1);
    AdobeAn.compositionLoaded(lib.properties.id);
    fnStartAnimation();
}

我已经花了两天时间寻找可能的解决方案，任何建议和/或解决方案将不胜感激。

如果在阅读本文后您认为您需要更多信息和/或详细信息，请告诉我，我会尽力帮助您。

标签： javascripthtmlangulartypescriptanimate-cc

javascript - Animate CC Canvas 导出嵌入角度模板

问题描述

解决方案

推荐阅读