Evo UI

OverviewCopy Anchor Link

Evo Tween works with Evo UI's animation sequences, interaction states, and Procedural Shapes. The integration module adds shape bindings and connects Tween Animator to components that implement IStylerInteractable.

Animate Interaction StatesCopy Anchor Link

Use an Interaction trigger when the animation should follow an Evo UI control's state, including keyboard selection and disabled feedback.

For example, a Highlighted state can scale a visual child to 1.05, and a Normal state can return it to 1. Enable From Current to avoid snapping when the pointer leaves partway through the animation.

Use Restart On Trigger to decide whether selecting the current state again should replay it. When multiple states match an interaction, the first one in the state list wins.

The source must implement Evo.UI.IStylerInteractable. A standard Unity UI Button doesn't provide that interface; use Pointer Event triggers or call the state from its events instead.

Edit a Component's SequencesCopy Anchor Link

Evo UI components with custom animations expose Tween Sequences directly. Select the component, open Tools -> Evo Tween -> Tween Timeline, and choose the sequence you want to edit.

The owning component decides when that sequence plays. You don't need another Tween Animator just to edit a sequence already owned by the component.

You can share animations with Sequence Presets. Bind each consumer's targets locally, and check those bindings after changing the preset's clip order.

Procedural Shape BindingsCopy Anchor Link

Use EvoTween.Create(...) with the following bindings on a ProceduralShape. The extension methods are in Evo.Tween; the component is in Evo.UI.

Colors use Color; polygon counts use int; skew, pattern size/gap/offset/falloff origin, and shadow offsets use Vector2. Other scalar properties use float, except the individual-corner overload described above.

Configure the corresponding shape feature before animating it. Changing an outline width or shadow offset only produces the intended result when that feature is enabled and visible.

using UnityEngine;
using Evo.UI;
using Evo.Tween;

public class ShapeHighlight : MonoBehaviour
{
    [SerializeField] private ProceduralShape shape;
    [SerializeField] private Color normal = Color.white;
    [SerializeField] private Color highlighted = Color.cyan;
    private TweenHandle tween;

    public void PlayHighlight()
    {
        tween = EvoTween.Create(normal, highlighted, 0.2f)
            .WithTimeMode(TimeMode.Unscaled)
            .BindToFillColor(shape);
    }

    private void OnDisable() => tween.Kill();
}

If Styler or another animation also writes a shape property, give that property one owner during the transition. For motion, animating a child visual is often convenient when the parent also handles layout or interaction.