animatePaper.js

An animation library for paper.js.

• examples and API documentation
• demo
• repo
• npm npm install --save paper-animate

Update: As a result of me not using it professionnally, I unfortunately do not maintain this library anymore. It still works, but now that paper.js ships with the Tween class, which has an API similar to this one, you might want to look at that instead.

How it works

I’m not going to paraphrase the readme here, but will talk about what this library does and how it is designed.

Its main goal is to help paper.js users predictably change properties of their objects over time, without having to rewrite their own easing functions over and over.

API

The API has 3 “levels”:

• A collection of premade animations called “effects” - API
• Tweening of properties through animatePaper.animate() - API
• Hooks to extend the API to animate unsupported properties or add easing functions.

Tweens

A common approach used to achieve this is the tween, which describes the transition between two known states (the beginning and the end) by interpolating intermediate values.
Depending on the visual effect you want to communicate, the interpolation will be done using different easing functions.

For instance, a linear animation:

function linear(p) {
    return p;
}

or a “swing” effect:

function swing(p) {
    return 0.5 - Math.cos(p * Math.PI) / 2;
}

An easing function basically maps time to value.

Application to paper.js

Tweens and easing functions aren’t specific to paper.js or any other library.
You may have used them in jQuery or elsewhere.
It’s a generic solution that requires two things to be applied:

• access to time (when do I update values?)
• access to values (how do I update values?)

Time is solved by wrapping the onFrame callback provided by paper.js. Alternatively, animations can run on setTimeout.
The values are read and updated by “prophooks”, an extensible abstraction over paper.js data types (colors, points, etc.) and quirks (scale…).

A “propHook” is a simple object describing how to read, update and ease an Items properties (more info in the readme):

{
    get: function(tween) {
        // return ...
    },
    set: function(tween, percent) {
        // ...
    },
    ease: function(tween, eased) {
        // return ...
    }
}