tween-one

如何使用

安装

$ npm install tween-one --save

使用

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

实例方法使用

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; |

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 | 缓动参数. 参数名称参考 或为 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 结束； 如下

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 | 如果有重复，返回当前第几次重复 |