jcc2d

A canvas 2d renderer & An awesome animator

Show case

• refactor usopen-sessions main page
• particle effect
• 3D pictures cloud
• multi-segment animation
• sprites movieclip
• blur mask high performance filter
• skeleton draw by graphics
• skeleton draw by sprite
• check eventer pointer exact polygon
• varied timingfunction supported
• path motion animation
• after effect export

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