Unit-Bezier
A Combination of Mozilla and Chromium implementations of Bezier Curves used for animation interpolation for Javascript
Unit-Bezier takes optimizations from both Mozilla and Chromium timing function code and combines them into performant Javascript. It is compliant with both browsers' tests.
Getting Started
Download / Clone
Install with npm:
npm install Unit-Bezier
Clone the repo using Git:
git clone --bare https://github.com/jacobcpeters/Unit-Bezier.git
Alternatively you can download this repository.
Using Unit-Bezier
Use the 'new' operator to construct a new UnitBezier object for your function/module/class. The first parameter of the constructor is an array that contains the control points for the Bezier Curve [x1, y1, x2, y2]. The second parameter is the epsilon that controls the desired accuracy of the estimations.
var bezier = controlPoints epsilon;
Easing Aliases
Easy to use aliases are available for common easing types in the UnitBezier.easings object.
var bezier = UnitBeziereasingseaseInOut 0005;
Table of available aliases:
Easing Name | Control Points |
---|---|
linear | [0.0, 0.0, 1.0, 1.0] |
ease | [0.25, 0.1, 0.25, 1.0] |
easeIn | [0.42, 0.0, 1.0, 1.0] |
easeInOut | [0.42, 0.0, 0.58, 1.0] |
easeOut | [0.0, 0.0, 0.58, 1.0] |
easeInBack | [0.6, -0.28, 0.735, 0.045] |
easeOutBack | [0.175, 0.885, 0.32, 1.275] |
easeInOutBack | [0.680, -0.550, 0.265, 1.550] |
Code example:
var bezier = 00 00 10 10 0000001 //linear Bezier Curve target = document animationLength = 1000 // 1000ms = 1s startTime = Date; { var timeSinceAnimationStarted = Date - startTime; targetstyleopacity = 1 * bezier; iftimeSinceAnimationStarted < animationLength ; } ;
Feature requests
If Unit-Bezier doesn't support a feature you require, please put a request in the issues tracker.
License
© Jacob Peters, 2015. Licensed under an MIT license.