colorful-transition v1.0.1

colorful-transition

A colorful transition animation for HTML5 canvas

Usage:

After downloading colorful-transition.js and including it in you HTML, use it like this:

transition(ctx, options);

ctx

A reference to the CanvasRenderingContext2D you want to perform the transition on.

options

A collection of options that define the transition:

• x: number: the starting x position of the area where the transition will take place. Defaults to 0.
• y: number: the starting y position of the area where the transition will take place. Defaults to 0.
• width: number: the width of the area where the transition will take place. Defaults to ctx.canvas.width.
• height: number: the height of the area where the transition will take place. Defaults to ctx.canvas.height.
• count: number: the number of strips used in the transition. Defaults to 10

for example for count: 2:

for count: 200:

• duration: number: The duration of the transition in milliseconds. Defaults to 1000.
• steepness: number: The steepness of the easing curve. See https://www.desmos.com/calculator/sheh8hflly, play around with the variable k and see how it changes the curve. The recommanded minimum is 17, as steepness below 17 results in sudden jumps at the start and end of the animation. Defaults to 17.
• direction: string: A string that defines the direction of the transition. Only these values are possible:

vp: Vertical positive

vn: Vertical negative

vm: Vertical mixed

hp: Horizontal positive

hn: Horizontal negative

hm: Horizontal mixed

• color: string: the color of the transition. Defaults to '#000'
• onfinished: function(ctx, totalTime): invoked after the animation finishes executing.
• onframe: function(ctx, totalTime): invoked every frame of the animation.