Funcurve
🚀🚀Using bezier curve to build animation easily.
Usage
Install
npm i funcurve
or
yarn add funcurve
Demo
; ;
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, 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 |
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.