KenBurnsBase

December 15, 2016 · View on GitHub

KenBurns base class. 2 methods must be implemented: draw() and getViewport().

Properties

clamped boolean guarantees the rendering never goes out of bound. (default: true).
background RGBA background color as an Array of 4 numbers (in 0..1 range). (default: [0,0,0,0], transparent)

animate

Start a KenBurns animation on source in a loop for the next duration milliseconds from fromCrop to toCrop with given easing function.

source MUST be ready (e.g. image loaded) before calling animate. Also, the animation is not interruptable, For better controls, please use animateStep().

Parameters

source Source , the source to animate (the type depends on implementation, refer to implementation 'supported source')
fromCrop (CropFunc | Bound) , an array of [ x, y, width, height ] which is the starting bound absolute coordinate. OR a (viewportSize,imageSize)=>Bound which returns this array (the viewportSize and imageSize parameters have width and height fields). KenBurns.crop() provide such a function.
toCrop (CropFunc | Bound) , same as startCrop but for the ending bound coordinate.
duration number , the duration in millisecond of the animation.
easing EasingFunc? , The easing function to use for the animation. We recommend the use of Bezier-Easing.

Returns Promise<Source> a Promise that is resolved when the animation ends.

animateStep

src/Base.js:101-117

Perform a single frame of a Kenburns animation on source from fromCrop to toCrop with a progress interpolation value.

animateStep provides a better rendering control than animate but also is low level. It's up to you to handle the animation loop.

Parameters

source Source (same as in animate)
fromCrop (CropFunc | Bound) (same as in animate)
toCrop (CropFunc | Bound) (same as in animate)
progress number the interpolation value from 0 to 1.

Returns void

draw

src/Base.js:122-122

(abstract method) Draw the source cropped to a given rectangle bound.

Type: function (source: Source, rect: Bound): void

getViewport

src/Base.js:127-127

(abstract method) Get and object with width and height of the container.

Type: function (): WidthHeight

getSourceSize

src/Base.js:132-132

(abstract method) Get source size.

Type: function (source: Source): WidthHeight

KenBurnsDOM

src/DOM.js:26-72

Extends KenBurnsBase

DOM Kenburns effect.

Supported source: any HTML Element or an Image.

NB: the container & source DOM element style are getting mutated by KenBurnsDOM. Make sure you don't alter them while performing the effect.

Examples

import KenBurnsDOM from "kenburns/lib/DOM";
var div = document.createElement("div");
div.style.width = "400px";
div.style.height = "400px";
const kenBurnsDOM = new KenBurnsDOM(div);
// kenBurnsDOM.animate(...).then(...);
// kenBurnsDOM.animateStep(...);

constructor

src/DOM.js:33-42

Create a DOM KenBurns with a container element (block element recommended).

Parameters

container HTMLElement

KenBurnsWebGL

src/WebGL.js:53-120

Extends KenBurnsBase

WebGL KenBurns implementation.

supported source: a gl-texture2d instance. (or an object with a bind() function and shape array)

Examples

import KenBurnsWebGL from "kenburns/lib/WebGL";
var canvasWebGL = document.createElement("canvas");
canvasWebGL.style.width = "400px";
canvasWebGL.style.height = "400px";
canvasWebGL.width = 800;
canvasWebGL.height = 800;
const gl = canvasWebGL.getContext("webgl");
const kenBurnsWebGL = new KenBurnsWebGL(gl);
// import createTexture from "gl-texture2d";
// const texture = createTexture(gl, ...);
// kenBurnsWebGL.animate(texture, ...).then(...);
// kenBurnsWebGL.animateStep(texture, ...);

constructor

src/WebGL.js:61-77

Create a KenBurnsWebGL with a WebGL Context.

Parameters

gl WebGLRenderingContext

dispose

src/WebGL.js:81-89

clean up object created by the implementation. This allows to potentially continue using the WebGL Canvas for other things.

KenBurnsCanvas2D

src/Canvas2D.js:27-62

Extends KenBurnsBase

Canvas2D KenBurns implementation.

supported source: Image | Video | Canvas2D

Examples

import KenBurnsCanvas2D from "kenburns/lib/Canvas2D";
var canvas2d = document.createElement("canvas");
canvas2d.style.width = "400px";
canvas2d.style.height = "400px";
canvas2d.width = 800;
canvas2d.height = 800;
const ctx = canvas2d.getContext("2d");
const kenBurnsCanvas2d = new KenBurnsCanvas2D(ctx);
// kenBurnsCanvas2d.animate(...).then(...);
// kenBurnsCanvas2d.animateStep(...);

constructor

src/Canvas2D.js:33-36

Create a Canvas2D KenBurns with a Canvas 2D Context.

Parameters

ctx CanvasRenderingContext2D

crop

src/index.js:24-24

import crop from"react-crop";

To ease the process of providing fromCrop and endCrop, crop is a helper that that computes the absolute croping rectangle for a given center and zoom.

Parameters

zoomRatio : The first parameter is the zoom ratio. (this zoom ratio must be in ]0.0, 1.0] range) For instance, 1.0 display the full image size, 0.01 display a very tiny part of the image.
center : The second parameter is the center of the effect (the [w,h] components are in percentage from 0.0 to 1.0). This parameter is optional, if not provided, the center is used.

Examples

var from = crop(1.0, [0.5, 0.5]);
var to = crop(0.2, [0.8, 0.5]);
kenBurns.animate(img, from, to, 4000);
// Checkout also this special value: `crop.largest`