Copy link to clipboard
Copied
How do I use animate cc in angular 4?
I've created a html5 animation but cannot bring it into angular 4. I've converted the init() function that's automatically created but am having problems loading the anim.js file
import { environment } from './../../environments/environment';
@Component({
selector: 'dod-home',
templateUrl: './home.html'
})
export class HomeComponent implements OnInit {
canvas
stage
exportRoot
anim_container
dom_overlay_container
fnStartAnimation;
constructor() {
};
ngOnInit(): void {
this.init();
}
init() {
this.canvas = document.getElementById("canvas");
this.anim_container = document.getElementById("animation_container");
this.dom_overlay_container = document.getElementById("dom_overlay_container");
images = images || {};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", this.handleFileLoad);
loader.addEventListener("complete", this.handleComplete);
loader.loadManifest(lib.properties.manifest);
this.fnStartAnimation();
}
handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
handleComplete(evt) {
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var queue = evt.target;
var ssMetadata = lib.ssMetadata;
for (var i = 0; i < ssMetadata.length; i++) {
ss[ssMetadata[i].name] = new createjs.SpriteSheet({ "images": [queue.getResult(ssMetadata[i].name)], "frames": ssMetadata[i].frames })
}
this.exportRoot = new lib.anim();
this.stage = new createjs.Stage(this.canvas);
this.stage.addChild(this.exportRoot);
//Registers the "tick" event listener.
this.fnStartAnimation = function () {
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", this.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);
}
}
this.canvas.width = w * pRatio * sRatio;
this.canvas.height = h * pRatio * sRatio;
this.canvas.style.width = this.dom_overlay_container.style.width = this.anim_container.style.width = w * sRatio + 'px';
this.canvas.style.height = this.anim_container.style.height = this.dom_overlay_container.style.height = h * sRatio + 'px';
this.stage.scaleX = pRatio * sRatio;
this.stage.scaleY = pRatio * sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
}
}
}
}
the anim.js is loaded in the scripts[] array eg "scripts": ["src/app/home/anim.js"], which is in the angular-cli.json, the scripts file gets loaded but I get duplicate identifier createjs, I'm loading createjs from a cdn.
Another way would be to have anim.js as a module, I've tried various ways of exporting it as a module, all to no avail. I've also set "allowJs": true, in my tsconfig.json.
I think animate cc is a great tool and would love to get this working with angular4
Copy link to clipboard
Copied
Not sure the question is still open, but we have an npm package here
we just need to follow the readme.md insructions