Funcurve
🚀🚀Using bezier curve to build animation easily.
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