1.0.5 • Published 4 years ago
mini-tween-one v1.0.5
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);