- 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
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);
},
});
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
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 |
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.
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');