Animated UI

Milease encapsulates the state animator and provides the abstract class MilAnimatedUI to help you quickly implement an animated UI.

This abstract class includes three visual states: Default, Hover, and Selected, where either Hover or Selected can be null.

Preparing States

After implementing the abstract class MilAnimatedUI, complete the three states:

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;

Here, we assume that the Selected state is not needed and simply return null.

Configuring Click Animation

You can also configure a click animation by implementing the ConfigClickAnimation method. The configured animation will play when the UI is clicked; if not needed, return 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))
        );

Above is an example of a circular ripple animation played after a button is clicked.

Events

MilAnimatedUI provides three events.

// Click event
protected override void OnClick(PointerEventData eventData)
{
	
}

// Initialization event
protected override void OnInitialize()
{

}

// Termination event
protected override void OnTerminate()
{

}

warning

The Awake and OnDestroy methods are occupied by MilAnimatedUI. Instead, write your related logic in the provided OnInitialize and OnTerminate events.

Other Properties

Finally, configure the related settings in the Inspector. These include:

• DefaultTransition: Duration of the transition to the Default state

• HoverTransition: Duration of the transition to the Hover and Selected states

• OnClickEvent: You can additionally bind methods here to be called when the UI is clicked