mini-tween-one

Mini Tween

ant motion in mini;

特性

• 在小程序里灵活的写动画；

安装

$ npm install mini-tween --save

使用

在页面 json 中文件中进行注册:

{
  "usingComponents": {
    "tween": "mini-tween/es/index"
  }
}

在 axml 文件中进行调用:

<tween
  animation="{{animation}}"
>你的内容</tween>

在 js 文件中配置动画:

Page({
  data: {
    animation: { x: 100 },
  },
});

API

api 与 ant motion 的 rc-tween-one 相近；详细查看;

name	type	default	description
animation	IAnimateProps \ IAnimateProps[]	null	需要执行动画的参数
paused	boolean	false	暂停动画
reverse	boolean	false	倒放动画
reverseDelay	number	0	开始倒放时的延时
repeat	number	0	所有 animation 里的动画 (时间轴) 循环
repeatDelay	number	0	循环延时
yoyo	boolean	false	动画重复时执行返回动画, 如抽屉开关。
moment	null \ number;	null	设置当前时间上的时间，设置完后设回 null
resetStyle	boolean;	false	更新 animation 数据时，是否重置初始样式。
onChange	(v: IChangeCallback) => void;	() => void;	全局变动回调
onRef	(v: ITimeline) => void	(tl) => void	ref 时间轴回调, 可使用 tl.goto(1000)

IAnimateProps

不能同时使用 reverse 和 repeat:-1。

基本动画参数请查看动画术语, 不支持 filter 与 svg;

name	type	default	description
duration	number	450	动画时间
delay	number	0	动画延时
repeat	number	0	重复次数，-1 为无限重复播放
repeatDelay	number	0	每次重复播放开始时延时
yoyo	boolean	false	重复时执行返回动画，如抽屉开关。
ease	string	easeInOutQuad	缓动参数, 只支持 css bezier. 参数名称参考;

animation 等于 array 时为时间轴动画，ref: animation={[{ x: 10 }, { y: 10 }]};

IChangeCallback

name	type	description
ratio	number	当前动画百分比
vars	css string	当前动画的 style 样式
index	number	当前动画的序列
type	onStart \ onUpdate \ onComplete	回调的类型

ITimeline

tl.goto(1000, false);
tl.paused(false);
tl.reverse(true);