tween-one

如何使用

$3

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

$3

`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 }] });
`

$3

`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) => void; |
| onChangeTimeline | function | null | 时间轴动画的回调，增加了延时的回调 (e: ITimelineCallBack) => void; |

$3

| 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 | 缓动参数. 参数名称参考 或为 SVG Path, svg 的大小，100 \* 100 详细参考 ease path; |
| onStart | function | null | 动画开始时回调, (e: ICallBack) => void; |
| onUpdate | function | null | 动画更新时回调, (e: ICallBack) => void; |
| onComplete | function | null | 动画结束时回调, (e: ICallBack) => void; |
| onRepeat | function | null | 每次动画重复时回调, (e: 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 | 如果有重复，返回当前第几次重复 |