tween-one

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