动画 UI

Milease 封装了状态动画机，提供了抽象类 MilAnimatedUI 方便你快速实现一个带动画的 UI。

该抽象类包含三种外观状态：Default、Hover、Selected，其中 Hover 和 Selected 其一可以为空。

准备状态

实现抽象类 MilAnimatedUI 后，完善三个状态：

protected override IEnumerable<MilStateParameter> ConfigDefaultState()
    => MAni.States(() => 
        text.characterSpacing == 0f &&
        text.transform.localEulerAngles == new Vector3(0, 0, 0) &&
        background.color == ColorUtils.RGB(151, 135, 254)
    );

protected override IEnumerable<MilStateParameter> ConfigHoverState()
    => MAni.States(() => 
        text.characterSpacing == 8f &&
        text.transform.localEulerAngles == new Vector3(0, 0, 0) &&
        background.color == ColorUtils.RGB(92, 66, 255)
    );

protected override IEnumerable<MilStateParameter> ConfigSelectedState()
    => null;

这里假设我们不需要 Selected 状态，就返回 null。

配置点击动画

你也可以通过实现 ConfigClickAnimation 函数配置点击动画，配置的动画将在该 UI 被点击时播放；若不需要，则返回 null 即可。

protected override MilInstantAnimator ConfigClickAnimation()
    =>  MilInstantAnimator.Start(
            0.5f / circleTransform.MCirc(x => x.localScale,
                new Vector3(0f, 0f, 0f), new Vector3(4f, 4f, 4f))
        )
        .And(
            0.2f / circleImage.MQuad(x => x.color,
                new Color(0f, 0f, 0f, 0f), new Color(0f, 0f, 0f, 0.3f))
        )
        .And(
            0.3f + 0.15f / circleImage.MQuad(x => x.color,
                new Color(0f, 0f, 0f, 0.3f), new Color(0f, 0f, 0f, 0f))
        );

以上是一个点击按钮后播放圆形扩散动画的示例。

事件

MilAnimatedUI 提供三个事件。

// 点击事件
protected override void OnClick(PointerEventData eventData)
{
	
}

// 初始化事件
protected override void OnInitialize()
{

}

// 销毁事件
protected override void OnTerminate()
{

}

注意

Awake 和 OnDestory 方法已被 MilAnimatedUI 占用，替代地，你可以在提供的 OnInitialize 和 OnTerminate 事件中编写相关逻辑。

其他属性

最后，在 Inspector 中设置相关内容即可。其中：

• DefaultTransition：过渡到 Default 状态的时长

• HoverTransition：过渡到 Hover 和 Selected 状态的时长

• OnClickEvent：你可以在此处额外绑定 UI 被点击时要调用的方法