Utility to turn steps and cubic-bezier single-transition-timing-functions into an array of "low-poly" xy-coordinates.
import { easingCoordinates } from 'easing-coordinates'
easingCoordinates('cubic-bezier(0.5, 0, 0.5, 1)')
/* =>
[
{ x: 0, y: 0 },
{ x: 0.136, y: 0.028 },
{ x: 0.248, y: 0.104 },
{ x: 0.342, y: 0.216 },
{ x: 0.424, y: 0.352 },
{ x: 0.5, y: 0.5 },
{ x: 0.576, y: 0.648 },
{ x: 0.658, y: 0.784 },
{ x: 0.752, y: 0.896 },
{ x: 0.864, y: 0.972 },
{ x: 1, y: 1 },
]
*/
easingCoordinates('steps(4)')
/* =>
[
{ x: 0, y: 0 },
{ x: 0.25, y: 0 },
{ x: 0.25, y: 0.25 },
{ x: 0.5, y: 0.25 },
{ x: 0.5, y: 0.5 },
{ x: 0.75, y: 0.5 },
{ x: 0.75, y: 0.75 },
{ x: 1, y: 0.75 },
]
*/Use stepsCoordinates and cubicCoordinates methods directly depending on your
data:
import { cubicCoordinates, easingCoordinates, stepsCoordinates } from 'easing-coordinates'
cubicCoordinates(0.42, 0, 1, 1) === easingCoordinates('cubic-bezier(0.42, 0, 1, 1)')
stepsCoordinates(4, 'skip-end') === easingCoordinates('steps(4, skip-end)')Increase polySteps (default = 10, min = 2) to get a "higer-poly" version of your cubic-bezier functions.
interface ICoordinate {
x: number
y: number
}
function easingCoordinates(easingFunction: string, polySteps?: number): ICoordinate[]
function stepsCoordinates(steps: number, skip = 'skip-end'): ICoordinate[]
function cubicCoordinates(
x1: number,
y1: number,
x2: number,
y2: number,
polySteps = 10
): ICoordinate[](See package.json for more scripts)
# Checkout and then
npm install
# Compile and watch the .ts files
npm run watch
# Run test
npm run test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent