@ion-cloud/phaser
v1.0.0
Published
JavaScript gradient animation and initialization helper
Downloads
3
Maintainers
Readme
phaser
JavaScript gradient animation and initialization helper
Setup
Getting started is as easy as npm i @ion-cloud/phaser --save
and then importing
the module into your app with import {Phase} from '@ion-cloud/phaser'
.
Please see code example here.
Usage
const dayCycle = new Phaser(easel,{
x: 0,
y: 0,
width: easel.viewport.w,
height: easel.viewport.h,
interval: 100,
phase: 'dawn',
colors: [
// top color
{
current: {r: 0,g: 0,b: 0},
dawn: {r:119,g:153,b:187},
daytime: {r:204,g:238,b:255},
dusk: {r:135,g: 51,b: 85},
midnight:{r: 0,g: 0,b: 17}
},
// bottom color
{
current: {r: 0,g: 0,b: 0},
dawn: {r:153,g: 85,b: 51},
daytime: {r:170,g: 85,b: 51},
dusk: {r: 0,g: 17,b: 34},
midnight:{r:153,g: 87,b: 22}
}
],
makeGradient: ()=> easel.ctx.createLinearGradient(0,0,0,easel.viewport.h/5*4)
});
dayCycle.drawNext(); //put this in an event loop or requestAnimationFrame