# tanbo-bezier

> A bezier library

Latest version **1.0.0-alpha.0** (published 2018-08-28) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install tanbo-bezier
pnpm add tanbo-bezier
yarn add tanbo-bezier
bun add tanbo-bezier
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.0.0-alpha.0 |
| Published | 2018-08-28 |
| First published | 2018-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 20.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | tanbo |
| Maintainers | tanbo |
| Keywords | bezier |

## Links

- npm: https://www.npmjs.com/package/tanbo-bezier
- Repository: https://github.com/tbhuabi/tanbo-bezier
- Homepage: https://github.com/tbhuabi/tanbo-bezier#readme
- Issues: https://github.com/tbhuabi/tanbo-ui-bezier.git/issues
- npm.io page: https://npm.io/package/tanbo-bezier

## Recent versions

- 1.0.0-alpha.0 (latest) — 2018-08-28
- 1.0.0 — 2018-08-28
- 0.0.5 — 2018-04-12
- 0.0.4 — 2018-04-12
- 0.0.3 — 2018-04-11
- 0.0.2 — 2018-04-11
- 0.0.1 — 2018-04-10

## README

# tanbo-bezier

tanbo-bezier 可以成生任意多次贝塞尔曲线

## 安装
```bash
npm install tanbo-bezier --save
```
## 代码示例

#### 普通贝塞尔曲线
```typescript
import { Bezier, BezierPoint } from 'tanbo-bezier';

// 可以传偶数个数字，且不少于4个
const bezier = new Bezier([.48, .08, .21, .8, .3, 1]); 

const div = document.getElementById('box');

// 一般场景下能过 `onUpdatePoint` 方法获取结果
bezier.onUpdatePoint((point: BezierPoint) => {
    console.log(point.y);
    console.log(point.x);
});

// 不常用，通过回调函数，可以获取贝塞尔曲线的控制坐标
bezier.onUpdateLine((startPoint: BezierPoint, endPoint: BezierPoint) => {
    console.log(startPoint, endPoint);
});

let i = 0;

const fn = function() {
    if (i < 100) {
        i++;
        // result 为当前 bezier 坐标点的 y 轴位置
        const result: number = bezier.update(i / 100);
        console.log(result);
        
        requestAnimationFrame(fn);
    }
};

requestAnimationFrame(fn);
```

#### CSS贝塞尔曲线

`CubicBezier` 默认为 0,0 点到 1,1 点，并对时间因子 `t` 做了偏移修正，让返回的 `point.x` 和 时间因子 `t` 保持同步，其效果同CSS的贝塞尔曲线一样。也就是说 `CubicBezier` 和 `Bezier` 传入同样参数的情况下，返回值是不一样的。

```typescript
import { CubicBezier, BezierPoint } from 'tanbo-bezier';

const bezier = new CubicBezier(.48, .08, .21, .8); 

const div = document.getElementById('box');

// 一般场景下通过 `onUpdatePoint` 方法获取结果
bezier.onUpdatePoint((point: BezierPoint) => {
    console.log(point.y);
    console.log(point.x);
});

// 不常用，通过回调函数，可以获取贝塞尔曲线的控制坐标
bezier.onUpdateLine((startPoint: BezierPoint, endPoint: BezierPoint) => {
    console.log(startPoint, endPoint);
});

let i = 0;

const fn = function() {
    if (i < 100) {
        i++;
        // t 为当前时间系数
        const t = 1 / 100;
        // result 为当前 bezier 坐标点的 y 轴位置
        const result: number = bezier.update(t);
        div.style.transform = `translateX(${result * 400}px)`;
      
        requestAnimationFrame(fn);
    }
};

requestAnimationFrame(fn);
```

---
_Source: https://npm.io/package/tanbo-bezier · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._