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