Skip to content

cubic-bezier implementation for Spark AR animation easings.

Notifications You must be signed in to change notification settings

pofulu/sparkar-bezier-easing

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

BezierEasing.ts

bezier-easing-index

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

NPM

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

  1. Download BezierEasing.ts
  2. Drag/Import it into your project. (Spark AR support TypeScript since v105)
  3. 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.