funcurve
TypeScript icon, indicating that this package has built-in type declarations

0.1.3 • Public • Published

Funcurve

🚀🚀Using bezier curve to build animation easily.

Build Status

Usage

Install

npm i funcurve

or

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.

IFuncurve

start()

Stop previous process and Start a new process.

stop()

Stop current process.

Principle

See Realize bezier curve

License

MIT

Package Sidebar

Install

npm i funcurve

Weekly Downloads

3

Version

0.1.3

License

MIT

Unpacked Size

10.9 kB

Total Files

6

Last publish

Collaborators

  • yqz0203