Animate CC Canvas 导出嵌入 angular 模板
Animate CC Canvas Export embed in angular template
所以我想带一个我在 animate cc 中完成的小动画并将其嵌入到 canvas 上的 angular 模板中，如下所示：
<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) 未捕获的引用错误：AdobeAn 未定义
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();
}
我已经花了两天时间寻找可能的解决方案，如有任何建议和/或解决方案，我将不胜感激。
如果阅读本文后您认为需要更多信息和/或详细信息，请告诉我，我会尽力帮助您。
要导入某些内容，您需要先将其导出。
Modules are executed within their own scope, not in the global scope;
this means that variables, functions, classes, etc. declared in a
module are not visible outside the module unless they are explicitly
exported using one of the export forms. Conversely, to consume a
variable, function, class, interface, etc. exported from a different
module, it has to be imported using one of the import forms.
https://www.typescriptlang.org/docs/handbook/modules.html
检查您的 createjs 模块并确保导出您需要的任何内容
在 angular 中进行此操作的最简单方法可能是不使用模块。原因是模块的版本可能与生成动画 cc 文件/代码的版本不一致。相反，您可以做的只是获取导出的库并将它们作为 link.
添加到您的组件中
<script src="path/to/createjs"></script>
<script src="path/to/anyOtherRequiredLibrary"></script>
然后在您的组件中，废弃 import * as createjs from 'createjs-module' 并改为：
declare var creates: any;
declare var AdobeAn: any;
这应该允许此行运行 })(createjs = createjs||{}, AdobeAn = AdobeAn||{}); 这可能就是您得到的原因：createjs.Rectangle 就好像 createjs var 不存在一样，它正在用一个空对象替换它.
所以我想带一个我在 animate cc 中完成的小动画并将其嵌入到 canvas 上的 angular 模板中，如下所示：
<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) 未捕获的引用错误：AdobeAn 未定义
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();
}
我已经花了两天时间寻找可能的解决方案，如有任何建议和/或解决方案，我将不胜感激。
如果阅读本文后您认为需要更多信息和/或详细信息，请告诉我，我会尽力帮助您。
要导入某些内容，您需要先将其导出。
Modules are executed within their own scope, not in the global scope; this means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported using one of the export forms. Conversely, to consume a variable, function, class, interface, etc. exported from a different module, it has to be imported using one of the import forms.
https://www.typescriptlang.org/docs/handbook/modules.html
检查您的 createjs 模块并确保导出您需要的任何内容
在 angular 中进行此操作的最简单方法可能是不使用模块。原因是模块的版本可能与生成动画 cc 文件/代码的版本不一致。相反，您可以做的只是获取导出的库并将它们作为 link.
添加到您的组件中<script src="path/to/createjs"></script>
<script src="path/to/anyOtherRequiredLibrary"></script>
然后在您的组件中，废弃 import * as createjs from 'createjs-module' 并改为：
declare var creates: any;
declare var AdobeAn: any;
这应该允许此行运行 })(createjs = createjs||{}, AdobeAn = AdobeAn||{}); 这可能就是您得到的原因：createjs.Rectangle 就好像 createjs var 不存在一样，它正在用一个空对象替换它.