gre / kenburns Goto Github PK

View Code? Open in Web Editor NEW

74.0 7.0 9.0 80 KB

Ken Burns effect for DOM, Canvas2D, WebGL

Home Page: http://kenburns.surge.sh/

License: ISC License

JavaScript 98.55% HTML 1.45%

animation kenburns

kenburns's Introduction

kenburns

kenburns provides a Ken Burns Effect on an image.

Kenburns currently have implementations for Canvas 2D, Canvas WebGL, and vanilla DOM.

npm install --save kenburns

or standalone version (window.KenBurns).

Usage

You can specifically import only one implementation:

import KenBurnsDOM from "kenburns/lib/DOM";
import KenBurnsWebGL from "kenburns/lib/WebGL";
import KenBurnsCanvas2D from "kenburns/lib/Canvas2D";

Or import them all (leads to more dependencies in your bundle):

import KenBurns from "kenburns";
// KenBurns.DOM , KenBurns.WebGL , KenBurns.Canvas2D
// KenBurns.Canvas is also a variant that feature detect WebGL or Canvas2D

API

Quick DOM example:

import KenBurnsDOM from "kenburns/lib/DOM";
import rectCrop from "rect-crop";
import bezierEasing from "bezier-easing";
const image = new Image();
image.src = "http://i.imgur.com/Uw2EQEk.jpg";
image.onload = () => {
  var div = document.createElement("div");
  document.body.appendChild(div);
  div.style.width = "400px";
  div.style.height = "400px";
  var kenBurns = new KenBurnsDOM(div);
  kenBurns.animate(
    image,
    rectCrop(0.4, [0.15, 0.38]),
    rectCrop.largest,
    5000,
    bezierEasing(0.6, 0.0, 1.0, 1.0)
  );
};

There is also KenBurnsWebGL (WebGL implementation) and KenBurnsCanvas2D (Canvas2D implementation).

Example

kenburns's People

Contributors

Stargazers

Watchers

Forkers

openube kevbaker uikit0 strarsis rorito ceaia-tiberiu ilovebug l1-j5n

kenburns's Issues

For some effects/use cases it would be great if this module also
allows playing backwards (either automatically or each frame).
Alternatively a frame index/counter which can be incremented/changed and passed.

Edit: Would a "negative" easing be the right approach (https://github.com/gre/kenburns/blob/master/API.md)?

Example fails with: Uncaught TypeError: kenBurns.runPartial is not a function

Installed 1.1.1 from npm, and tried to use it, but failed.

License?

It would be great if a LICENSE file is added to this project.
(Including kenburns-canvas2d, kenburns-webgl, kenburns-dom, kenburns-editor, kenburns-core).

React / React Native implementation

technically we can just expose new file entry points in the repo, they will get transpiled to lib/* and you would just have to import the version you want. like kenburns/lib/react-native
we don't even need to put the libs in peerDeps, (maybe optionalDeps ?)

Fix package main

In package.json the old path is still used: https://github.com/gre/kenburns/blob/master/package.json#L4

I currently have to use a resolve alias in webpack for resolving it correctly:

[...]
  resolve. {
    alias: {
      kenburns: "kenburns/src"
    }
  }
[...]

"clamped" should be an option

The clamped behavior should be optionally turned off.
For that, it means we also need to properly set the background (black?) for out of bounds.

README inconsistency?

First example in README:

var boundFunction1 = KenBurns.crop(1.0, [0.5, 0.5]);
var boundFunction2 = KenBurns.crop(0.2, [0.8, 0.5]);

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.
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.

Second example in README:

kenBurns.run(img, KenBurns.crop([0.8, 0.5], 0.2), KenBurns.crop([0.5, 0.5], 1.0), 4000);

In the second example the center of effect is the first parameter and
zoom ratio the second in contrast to the first example.

kenburns-dom standalone usage

When using kenburns-dom standalone, the start method
deviates from the kenburns module (runStart and run).

Also, runStart of kenburns-dom apparently also doesn't
return a promise or callback for the finish of the animation.