Noncollinear Perpendicular Microcrystalline

    @thegraid/easeljs-module
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.9 • Public • Published

    CreateJS library module for Angular and Ionic

    This is the createjs-1.0.0 collection as ESM with @types/createjs

    • EaselJS
    • TweenJS
    • SoundJS
    • PreloadJS

    You can find documentation at CreateJS.

    Install

    npm install createjs-module --save

    Angular

    import { Component, AfterViewInit } from '@angular/core';
    import * as createjs from 'createjs-module';
    
    @Component({
      selector: 'app-root',
      template: '<canvas width="500" height=500 id="demoCanvas"></canvas>'
    })
    export class AppComponent implements AfterViewInit {
    
      ngAfterViewInit() {
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        circle.x = 10;
        circle.y = 10;
        stage.addChild(circle);
    
        stage.update();
    
        createjs.Tween.get(circle, { loop: true })
        .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
        .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
        .to({ alpha: 0, y: 225 }, 100)
        .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
        .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
    
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
      }
    
    }

    Ionic

    import {Component} from '@angular/core';
    import * as createjs from 'createjs-module';
    
    @Component({
      selector: 'project-name-app',
      template: `
        <ion-content padding>
         <canvas width="500" height=500 id="demoCanvas"></canvas>
        </ion-content>
      `
    })
    export class MyApp {
      ionViewDidEnter() {
        var stage = new createjs.Stage("demoCanvas");
        var circle = new createjs.Shape();
        circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
        circle.x = 10;
        circle.y = 10;
        stage.addChild(circle);
    
        stage.update();
    
        createjs.Tween.get(circle, { loop: true })
        .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4))
        .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2))
        .to({ alpha: 0, y: 225 }, 100)
        .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2))
        .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2));
    
        createjs.Ticker.setFPS(60);
        createjs.Ticker.addEventListener("tick", stage);
      }
      
      constructor(){
      }
    }

    Credit Matt Balmer

    Install

    npm i @thegraid/easeljs-module

    DownloadsWeekly Downloads

    12

    Version

    1.1.9

    License

    MIT

    Unpacked Size

    585 kB

    Total Files

    8

    Last publish

    Collaborators

    • thegraid