Skip to main content
cherryr57725896
Participant
May 12, 2017
Question

How do I use animate cc in angular 4?

  • May 12, 2017
  • 1 reply
  • 1976 views

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 { 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

This topic has been closed for replies.

1 reply

romangherta
Participant
June 24, 2019

Not sure the question is still open, but we have an npm package here

createjs-module - npm

we just need to follow the readme.md insructions