/jcc2d

A lightweight canvas2d-render & built-in an awesome animator with timeline manager

Primary LanguageJavaScript

jcc2d

Build Status npm javascript style guide Standard Version

A canvas 2d renderer & An awesome animator

main page

Show case

Introduction

main page

jcc2d is a lightweight canvas2d-render engine and built-in an awesome animator with timeline manager. obviously, jcc2d support event system by default.

jcc2d built-in support bodymovin keyframes data, which use bodymovin add-on to exporting keyframes data from after effect, and jcc2d can parse the keyframes data to jcc2d keyFrames animation, just like following:

// parser all animation layers
const ani = new JC.ParserAnimation({
  keyframes: data,
  // fr: 30, // frame rate
  // prefix: '', // assets url prefix
  // infinite: true, // infinite loop
  // alternate: true, // alternate
  onUpdate() {},
  onComplete() {
    console.log(this.element);
  },
});

// or you can just parser a single animation layer
const coin = new JC.Sprite({
  texture: new JC.Texture('/path/coin.png'),
});
coin.keyFrames({
  ks: data.layers[0], // bodymovin keyframes data
  fr: 30, // overwrite frame rate
  // infinite: true, // infinite loop
  // alternate: true, // alternate, just like yoyo
  onUpdate() {},
  onComplete() {
    console.log(this.element);
  },
});

view demo

Feature

jcc2d Include Stage Sprite Graphics Container BlurFilter TextFace and so on.

Every display instance can easy start an animation and attach a timeline, like following:

const ball = new JC.Sprite({
    texture: new JC.Texture('/path/xx.png'),
});
const timeline = ball.animate({
  from: {x: 100}, // start pose, optional
  to: {x: 200}, // target pose
  ease: JC.Tween.Bounce.Out, // set a timingfunction
  repeats: 10, // repeat sometimes
  delay: 1000, // delay a moment every repeat
  wait: 1000, // wait a moment to start
  infinite: true, // want infinite repeats?
  alternate: true, // repeats with alternate
  duration: 1000, // duration
  onUpdate: function(state,rate){}, // onUpdate callback
  onComplete: function(){ console.log('end'); } // onComplete callback
});
timeline.pause(); // pause animation progress
timeline.restart(); // restart animation progress, use with pause
timeline.stop(); // stop animation to end, will trigger onComplete callback
timeline.cancle(); // cancle animation right now, will not trigger onComplete callback
timeline.timeScale = 0.5; // set timeScale, get a Slow motion,just like speed * 0.5

Display animation property

type property
display instance scale value scale scaleX scaleY
display instance origin originX originY
display instance pivot pivotX pivotY
display instance skew value skewX skewY
display instance rotation with CCW rotation
display instance coordinate axis position x y
display instance opacity alpha alpha

Quick Start

jcc2d was so easy to use, you just need new a Stage instance and appoint a canvas dom, then you can add every display object into stage.

const stage = new JC.Stage({
  dom: 'canvas-stage',
  resolution: 1, // was normal
});
const coin = new JC.Sprite({
  texture: new JC.Texture('/path/coin.png'),
});
stage.adds(coin);
stage.startEngine(); // the coin would be render

jcc2d built-in support timeline animation , you can start multiple animation. let's use coin to show.

/* start a animate */
coin.animate({
  from: { x: 100, rotation: 0 },
  to: { x: 300, rotation: 360 },
  ...       // other options
});

/* start a motion */
coin.motion({
  path: new JC.BezierCurve([...]), // coin will move along with this path
  ...       // other options
});

/* start a runners */
coin.runners({             // combination multiple animation and run one by one
  runners: [
    {from: {}, to: {}, ease: JC.Tween.Back.In, ...},
    {path: new JC.BezierCurve([...]), ease: JC.Tween.Ease.Bezier(0, 0, 1, 1), ...},
    {to: {}, ease: JC.Tween.Back.Out, ...},
  ],
  ...       // other options
});

would like to know more information please look in documentation, or quick start a living edit in web runing man.

Documentation

jcc2d source code was used ES6 Modules and build to UMD bundle by rollup. so jcc2d can support tree-shaking seamless.

// import all over the modules
import * as JC from 'jcc2d';

// import modules which you need, allow tree-shaking
import { Stage, Sprite, Graphics } from 'jcc2d';

and if you just want use UMD bundle, you can use require method

// require jcc2d
const JC = require('jcc2d');

// require a lightweight jcc2d
const JC = require('jcc2d/build/jcc2d.light.js');

documentation

Examples

examples

Changelog

changelog

License

MIT