jcc2d

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