@nomadreservations/createjs-module
v1.0.0-beta.5
Published
Collection of libraries in the CreateJS suite for Angular and Ionic.
Downloads
8
Readme
CreateJS library module for Angular and Ionic
This is the createjs-0.8.2 collection. Now with typings!!!
- 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