MWUtils-UIAnim

口袋方舟（MetaWorld）工具库

UI 动画工具，提供简单的 UI 进出场、变换动画预实现

使用指南

安装

npm i mw-utils-ui-anim

使用示例

export default class TestUI extends TestUI_Generate {
  protected onAwake() {
    this.canUpdate = false;
    this.layer = UI.UILayerBottom;
    // 按键将进度条缓动到指定位置
    Util.InputUtil.onKeyDown(Type.Keys.Z, () => {
      UIAnimUtil.Common.progressTo(this.mProgressBar, 0, 500);
    });
    Util.InputUtil.onKeyDown(Type.Keys.X, () => {
      UIAnimUtil.Common.progressTo(this.mProgressBar, 90, 500);
    });
  }

  public show() {
    // 显示当前UI并播放进场动画
    UI.UIManager.instance.showUI(this);
    UIAnimUtil.Enter.scale(this.uiObject, UIAnimUtil.Direction.Bottom);
  }

  public hide() {
    // 播放出场动画并在完成时隐藏
    UIAnimUtil.Exit.scale(
      this.uiObject,
      UIAnimUtil.Direction.Bottom,
      1000,
      () => {
        UI.UIManager.instance.hideUI(this);
      }
    );
  }
}

预制动画

通用动画

文本数字缓动

UIAnimUtil.Common.numberContentTo(widget, num, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param num 目标数字值
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

缩放

UIAnimUtil.Common.scaleTo(widget, scale, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param scale 目标缩放值
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

摇晃

UIAnimUtil.Common.wobble(
  widget,
  angle,
  wobbleCount,
  repeat,
  repeatDelay,
  time,
  onComplete
);
/**
 * @param widget 应用动画的Widget
 * @param angle 晃动的偏移角度
 * @param wobbleCount 单次动画晃动次数
 * @param repeat 播放次数
 * @param repeatDelay 再次播放间隔
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

进度条缓动

UIAnimUtil.Common.progressTo(widget, value, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param value 目标值
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

进场动画

淡入

UIAnimUtil.Enter.fade(widget, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

平移进场

UIAnimUtil.Enter.move(widget, dir, time, onComplete, easing);
/**
 * @param widget 应用动画的Widget
 * @param dir 方向
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 * @param easing 动画运动曲线（默认线性）
 */

缩放进场

UIAnimUtil.Enter.scale(widget, dir, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param dir 方向
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

出场动画

淡出

UIAnimUtil.Exit.fade(widget, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

平移出场

UIAnimUtil.Exit.move(widget, dir, time, onComplete, easing);
/**
 * @param widget 应用动画的Widget
 * @param dir 方向
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 * @param easing 动画运动曲线（默认线性）
 */

缩放出场

UIAnimUtil.Exit.scale(widget, dir, time, onComplete);
/**
 * @param widget 应用动画的Widget
 * @param dir 方向
 * @param time 动画持续时间
 * @param onComplete 动画完成后回调
 */

版本适配

| 库版本 | 适配编辑器版本 | 备注 | | ------ | -------------- | ---- | | 1.2.x | 0.20.x | | | 1.1.x | 0.18.x | |