BezierEasing provides Cubic Bezier curve easing which generalizes easing functions (ease-in, ease-out, ease-in-out, ...any other custom curve) exactly like in CSS Transitions.
The repo is based on gre/bezier-easing, and converted to reactive for Spark AR.
You can download script and import into your project, or use this with npm.
- Download BezierEasing.ts
- Drag/Import it into your project. (Spark AR support TypeScript since v105)
- You can also Click Here to Download Sample Project.
You can generate the cubic-bezier value at cubic-bezier.com or cubic-bezier-generator.
import BezierEasing from './BezierEasing';
const easing = new BezierEasing(0, 0, 1, 0.5);
// easing allows to project x in [0.0,1.0] range onto the bezier-curve defined by the 4 points (see schema below).
// use number
easing.evaluate(0); // Reactive.val(0.0)
easing.evaluate(0.5); // Reactive.val(0.3125)
easing.evaluate(1); // Reactive.val(1.0)
// use signal;
const Time = require('Time');
easing.evaluate(Time.ms.mod(1000).mul(0.001));It is the equivalent to CSS Transitions' transition-timing-function.
In the same way you can define in CSS cubic-bezier(0.42, 0, 0.58, 1), with BezierEasing, you can define it using BezierEasing(0.42, 0, 0.58, 1) which have the function taking an X and computing the Y interpolated easing value (see schema).
If this is useful for you, please consider a donation🙏🏼. One-time donations can be made with PayPal.
