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 {
Component,
OnInit }
from '@angular/core';
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
1
Reply
AdChoices