https://github.com/yqz0203/funcurve
A simple and funny way to get curve
https://github.com/yqz0203/funcurve
bezier curve javascript
Last synced: 7 months ago
JSON representation
A simple and funny way to get curve
- Host: GitHub
- URL: https://github.com/yqz0203/funcurve
- Owner: yqz0203
- License: mit
- Created: 2020-03-03T08:25:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:55:16.000Z (over 2 years ago)
- Last Synced: 2024-04-26T14:21:00.973Z (over 1 year ago)
- Topics: bezier, curve, javascript
- Language: TypeScript
- Homepage:
- Size: 243 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Funcurve
🚀🚀Using bezier-curve to build curve animation easily.
[](https://travis-ci.com/yqz0203/funcurve)
## Usage
### Install
```bash
npm i funcurve
```
or
```bash
yarn add funcurve
```
### Demo
```typescript
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 to stop current running process, just call `stop()`. After that `onEnd` callback will be fired with `finished` being `false`.
```typescript
fc.stop();
```
A funcuve instance can call `start` serveral times. Before next process start, previous process will be stopped and call `onEnd` callback immediately.
```typescript
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 |
```typescript
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](https://yqz0203.github.io/realize-bezier/)
[ä¸æ–‡æ–‡æ¡£](README_zh-cn.md)
### License
[MIT](LICENSE)