Funcurve NPM | npm.io

Funcurve

🚀🚀Using bezier curve to build animation easily.

Usage

Install

npm i funcurve

yarn add funcurve

Demo

import funcurve from 'funcurve';

const fc = funcurve({
  controlPoints: [
    { x: 100, y: 200 },
    { x: 400, y: 500 },
  ],
  onUpdate({ point }) {
    console.log(point.x, point.y);
  },
  onEnd({ point, finished }) {
    console.log(point.x, point.y, finished);
  },
}).start();

If you want't stop current running process, call stop(), after that onEnd callback will be fired with finished being false.

fc.stop();

A funcuve instance can call start serveral times. Before next process start, previous process will be stopped and call onEnd callback immediately.

fc.start();

setTimeout(() => {
  fc.start();
}, 500);

API

`funcurve`

funcurve(config: FuncurveConfig):IFuncurve returns a funcure instance.

`config`

key	type	description
controlPoints	`Point[]`	bezier control point array.
duration	`number`	the duration(ms) of process, default value is 1000
onUpdate	`UpdateInfo`	the callback of each animation frame
onEnd	`UpdateInfo&{finished:boolean}`	the callback of the end of process

export interface Point {
  x: number;
  y: number;
}

interface UpdateInfo {
  point: Point;
  progress: number;
}

export interface FuncurveConfig {
  controlPoints: Point[];
  duration?: number;
  onUpdate?(res: UpdateInfo): void;
  onEnd?(res: UpdateInfo & { finished?: boolean }): void;
}

`UpdateInfo`

key	type	description
point	`Point`	current point of curve.
progress	`number`	current progress. 0 - 1
finished	`boolean`	`onEnd` callback has an extra `finished` prop to indicate whether the process has finished.