Combination of Mozilla and Chromium implementations of Bezier Curves used for animation interpolation for Javascript
npm install Unit-Bezierbash
npm install Unit-Bezier
`
Clone the repo using Git:
`bash
git clone --bare https://github.com/jacobcpeters/Unit-Bezier.git
`
Alternatively you can download this repository.
$3
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.
`js
var bezier = new UnitBezier(controlPoints, epsilon);
`
#### Easing Aliases
Easy to use aliases are available for common easing types in the UnitBezier.easings object.
`js
var bezier = new UnitBezier(UnitBezier.easings.easeInOut, 0.005);
`
###### 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:
`js
var bezier = new UnitBezier([0.0, 0.0, 1.0, 1.0], 0.000001), //linear Bezier Curve
target = document.getElementById('animated-opacity'),
animationLength = 1000, // 1000ms = 1s
startTime = Date.now();
function animateOpacity() {
var timeSinceAnimationStarted = Date.now() - startTime;
target.style.opacity = 1 * bezier.calc(timeSinceAnimationStarted / animationLength);
if(timeSinceAnimationStarted < animationLength) {
requestAnimationFrame(animateOpacity);
}
}
requestAnimationFrame(animateOpacity);
``