BezierEasing.ts

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.

Install

You can download script and import into your project, or use this with npm.

0. Download BezierEasing.ts (Right click and Save as)
1. Drag/Import it into your project. (Spark AR support TypeScript since v105)
2. You can also Click Here to Download Sample Project.

Usage

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).

Donations

If this is useful for you, please consider a donation🙏🏼. One-time donations can be made with PayPal.