0 Replies Latest reply on May 12, 2017 11:08 AM by cherryr57725896

    How do I use animate cc in angular 4?

    cherryr57725896

      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