eases-fancy
v1.0.0
Published
This is a set of easing equations which are outside of standard Penner easing equations
Downloads
5
Maintainers
Readme
eases-fancy
This is a set of easing equations which are outside of standard Penner easing equations.
Usage
You can require in individual functions using require statements before or access them directly by requiring in 'eases-fancy'
.
Example:
var mod = require('ease-fancy/mod');
// or by doing
var mod = require('eases-fancy').mod;
var bezier = require('eases-fancy/bezier')([opts])
Above rendering a custom bezier curve
This function will return an ease equation based on a cubic bezier curve.
It should be noted this simply wraps the cubic-bezier
module to have a consistent api with the rest of the fancy eases.
Optionally you can pass in the following options:
points
an array of four numbers which represent a cubic bezier curve default[0.21,1.08,1,-0.96]
precision
the higher the value the more precise the curve will be default value1000
.
var points = require('eases-fancy/points')([opts])
Will render a series points which define an easing equation
This is the exact same graph as above with an elastic out ease equation added
to the second keyframe
Returns a function that will perform eases based on custom points you've passed in.
Options:
points
a two dimensional array that is formatted in the following way:
[
[ value, time, ease ],
[ value, time, ease ],
[ value, time, ease ]
]
In the above arrays value
is a value the interpolation amount at the time defined by time
and ease
is an optional ease function which will be used to to the following key frame. values
's are typically between 0-1 however values less than 0 or greater than 1 are also acceptable. Optionally an ease function can be passed as the third parameter for more complex graphs.
var pointsRandom = require('eases-fancy/points-random')([opts])
The above is rendering the quint function randomized
The above is rendering 100 randomized points which for an ease equation which taper out
Options which can be passed to points-random
:
numPoints
this is how many random points you'd like to add. Default20
offset
this value is how offset each random point is off the original ease quation. Default0.3
ease
the base ease equation to randomize from. Default is a linear ease equation.
var stepped = require('eases-fancy/stepped')([opts])
Rendering with two steps
Rendering with two steps and ease expo
Returns an easing function for stepped eases with the following optional options:
steps
the number of steps you'd like to have. The above is with two steps. Default value1
ease
an ease equation which will modify the original steps.
var quantize = require('eases-fancy/quantize')([opts])
Rendering quantize with a linear interpolated graph
Rendering quantize with a custom ease using the above mentioned points
quantize
will make all values be either 0 or 1. This could be used for instance to blink on and off something.
Options:
ease
an ease function we'd like to quantize. Defaultlinear
edge
a threshould value from which to either set values to 0 or 1. For instance if edge is 0.3 all values less than 0.3 will produce 0 and all values greater will produce 1. Default0.5
.
var mod = require('eases-fancy/mod')([opts])
Rendering mod with defaults. (repeats linear ease over and over)
Rendering mod with a custom ease.
mod
will repeat an ease function the number of times you ask it to.
Options for mod
:
ease
ease function which will be repeated. Defaultlinear
.repeat
count times you'd like to repeat the ease function. Default5
License
MIT, see LICENSE.md for details.