Interpolator

This is a simple package that adds in an object Interpolator for interpolation between object a and b values over time.

Ex.:

1  var method = new Interpolator('linear');
2
3  // Create function
4  var foo = method.create({ x: 0, y: 0 }, { x: 10, y: 0 });
5
6  var posA = foo(0); // returns { x: 0, y: 0}
7  var posB = foo(0.5); // returns { x: 5, y: 0}
8  var posB = foo(1); // returns { x: 10, y: 0}
9
10  // Spring physics array of two (tension, friction)
11  var spring = new Interpolator([250, 15]);
12
13  // The physics spring is the only method to require a duration
14  // set for proper calculation
15  var bar = method.create({ x: 0, y: 0, z:0 }, { x: 10, y: 0, z: 0 }, 1000);
16
17  // Custom cubic bezier array of four
18  var bezier = new Interpolator([ 0.25, 0.1, 0.25, 1.0 ]);
19
20  // Custom function - here a linear function
21  var linear = new Interpolator(function(factor) { return factor; });

Bultin static

• "linear"
• "swing"
• "spring"

Builtin bezier

• "ease",
• "ease-in",
• "ease-out",
• "ease-in-out",
• "easeInSine",
• "easeOutSine",
• "easeInOutSine",
• "easeInQuad",
• "easeOutQuad",
• "easeInOutQuad",
• "easeInCubic",
• "easeOutCubic",
• "easeInOutCubic",
• "easeInQuart",
• "easeOutQuart",
• "easeInOutQuart",
• "easeInQuint",
• "easeOutQuint",
• "easeInOutQuint",
• "easeInExpo",
• "easeOutExpo",
• "easeInOutExpo",
• "easeInCirc",
• "easeOutCirc",
• "easeInOutCirc"

Credit

Bezier curve function generator. Copyright Gaetan Renaudeau. MIT License: http://en.wikipedia.org/wiki/MIT_License

Runge-Kutta spring physics function generator. Adapted from Framer.js, copyright Koen Bok. MIT License: http://en.wikipedia.org/wiki/MIT_License

Given a tension, friction, and duration, a simulation at 60FPS will first run without a defined duration in order to calculate the full path. A second pass then adjusts the time delta -- using the relation between actual time and duration -- to calculate the path for the duration-constrained animation.

Velocity js and __famous__for inspiration.