# tween-one

## 如何使用

### 安装

```
$ npm install tween-one --save
```

### 使用

```js
import TweenOne from 'tween-one';

const elem = {
  x: 0,
};

TweenOne(elem, { animation: { x: 100 } });

// timeline 示例

// 在播放完 x 轴动画后播放 y 轴动画
TweenOne(elem, { animation: [{ x: 100 }, { y: 100 }] });

/**
 *  x 轴动画正常播放，y 轴动画插入到时间轴 300ms处;
 * 如 x 的动画时间是 450， x 播放到 300 时，约 x = 90 时启动 y 动画.
 */
TweenOne(elem, { animation: [{ x: 100 }, { y: 100, appearTo: 300 }] });
```

### 实例方法使用

```js
const t = TweenOne(elem, { animation: { x: 100 } });
t.paused = true; // 暂停动画
t.reverse = true; // 倒放
t.goto(200, true); // goto(moment: number, paused?: boolean); 跳到某时间点播放或停止；
t.kill(); // kill(index?: number); index 为 animation: [{ x: 1}, {y: 1}] 的序号，不传为全部杀掉；
TweenOne.kill(elem); // 杀死指定元素的全部动画，如果元素为空则杀死全局动画；
```

## API

> type time： 所有时间类的单位都为 `ms`

| name             | type             | default | description                                                                              |
| ---------------- | ---------------- | ------- | ---------------------------------------------------------------------------------------- |
| animation        | `object` `array` | null    | 动画属性参数, 详细参考以下                                                               |
| attr             | boolean          | false   | 如果 target 是 dom, 更改标签上的属性，需将此设为 true.                                   |
| paused           | boolean          | false   | 暂停动画                                                                                 |
| reverse          | boolean          | false   | 倒放动画                                                                                 |
| repeat           | number           | 0       | 重复动画次数                                                                             |
| repeatDelay      | `time`           | 0       | 重复动画开始播放时的延时                                                                 |
| yoyo             | boolean          | false   | 重复动画时的第 n % 2 次是否反向动画                                                      |
| moment           | number           | 0       | 设置当前时间上的开始播放时间                                                             |
| onChange         | function         | null    | animation 里动画执行回调; (e: [ICallBack](#icallback)) => void;                          |
| onChangeTimeline | function         | null    | 时间轴动画的回调，增加了延时的回调 (e: [ITimelineCallBack](#itimelinecallback)) => void; |

### animation

| name          | type                      | default         | description                                                                                                          |
| ------------- | ------------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------- |
| [key: string] | `string` `number` `array` | null            | 以 number 为基础的所有变量，如 left, x, color, shadow.                                                               |
| type          | `to` `from` `set`         | `to`            | 播放类型，to 正常播放，from 反向播放, set 为 duration: 0.                                                            |
| startAt       | object                    | null            | 设置开始动画的值.                                                                                                    |
| duration      | `time`                    | `450ms`         | 动画时间                                                                                                             |
| delay         | `time`                    | 0               | 动画延时                                                                                                             |
| repeat        | number                    | 0               | 重复次数，-1 为无限重复播放                                                                                          |
| repeatDelay   | `time`                    | 0               | 每次重复播放开始时延时                                                                                               |
| appearTo      | `time`                    | 0               | 添加到时间轴某个位置                                                                                                 |
| yoyo          | boolean                   | false           | 重复时执行返回动画，如抽屉开关。                                                                                     |
| ease          | string                    | `easeInOutQuad` | 缓动参数. [参数名称参考](http://easings.net) 或为 SVG Path, svg 的大小，100 \* 100 [详细参考 ease path](#ease-path); |
| onStart       | function                  | null            | 动画开始时回调, (e: [ICallBack](#icallback)) => void;                                                                |
| onUpdate      | function                  | null            | 动画更新时回调, (e: [ICallBack](#icallback)) => void;                                                                |
| onComplete    | function                  | null            | 动画结束时回调, (e: [ICallBack](#icallback)) => void;                                                                |
| onRepeat      | function                  | null            | 每次动画重复时回调, (e: [ICallBack](#icallback)) => void;                                                            |

#### ease path

以 M0,100 开始，100, 0 结束； 如下

```js
const easePath =
  'M0,100 C7,89 14,81 21,78 C25,75 29,72 33,70 C37,66 39,62 42.5,57 C48,46.5 61.5,32.5 70,28 C77.5,23.5 81.5,20 86.5,16 C89,13 94,8 100,0';
```

#### ICallBack

> type IMode = 'onUpdate' | 'onStart' | 'onComplete' | 'onRepeat';

| name    | type     | description                                |
| ------- | -------- | ------------------------------------------ |
| mode    | IMode    | 回调的类型.                                |
| moment  | number   | 当前动画的时间.                            |
| ratio   | number   | 当前动画时间的面分比， 0 - 1               |
| targets | object[] | 动画的元素，返回数组                       |
| vars    | object[] | 当前动画的参数，返回数组, 与 targets 对应. |
| index   | number   | timeline 上的第几个动画.                   |
| repeat  | number   | 如果有重复，返回当前第几次重复             |

#### ITimelineCallBack

> type ITimeLineMode = 'onTimelineUpdate' | 'onTimelineStart' | 'onTimelineComplete' | 'onTimelineRepeat' | 'onTimelineRepeatComplete' | 'onTimelineRepeatDelay';

| name      | type          | description                                |
| --------- | ------------- | ------------------------------------------ |
| mode      | ITimeLineMode | 回调的类型.                                |
| moment    | number        | 当前动画的时间.                            |
| targets   | object[]      | 动画的元素，返回数组                       |
| vars      | object[]      | 当前动画的参数，返回数组, 与 targets 对应. |
| totalTime | number        | timeline 动画的总时间.                     |
| repeat    | number        | 如果有重复，返回当前第几次重复             |