Transitions

Animate between states with your own StateFlowTransition scripts.

Each connection in the graph has a transition script that plays when it fires. By default it is DefaultTransition, which switches instantly. Write your own to fade, slide, scale or anything else, and pick it per connection.

Picking a transition

Click a connection to select it. The info panel shows its route and a Script dropdown listing every class that derives from StateFlowTransition.

StateFlow Editor — transition

Writing a transition

Derive from StateFlowTransition and implement OnStart. Animate, then call completed. The flow waits for that call before entering the next state.

using System;
using System.Collections;
using StateFlow.Runtime.Transitions.Base;
using StateFlow.Runtime.Transitions.Wrapper;
using UnityEngine;

public class CrossFadeTransition : StateFlowTransition
{
    private const float Seconds = 0.35f;

    protected override void OnStart(ITransitionState current, ITransitionState next,
        RectTransform underlay, RectTransform overlay, Action completed)
    {
        StartCoroutine(Fade(next.RectTransform, completed));
    }

    protected override void OnComplete()
    {
    }

    private static IEnumerator Fade(RectTransform target, Action completed)
    {
        var group = target.TryGetComponent(out CanvasGroup existing) ? existing : target.gameObject.AddComponent<CanvasGroup>();

        for (var elapsed = 0f; elapsed < Seconds; elapsed += Time.unscaledDeltaTime)
        {
            group.alpha = elapsed / Seconds;
            yield return null;
        }

        group.alpha = 1f;
        completed();
    }
}

Which state to animate

The layer rules decide what is on screen while a transition plays:

• Opening on top (Screen → Popup): next is spawned above current, which stays visible. Animate next in, and leave current as it is.
• Replacing (Screen → Screen): next is spawned above current, and current is destroyed when the transition completes. You can animate either or both.
• Closing (Popup → back to Screen): the screen underneath is next and is already visible. Animate current (the popup) out. It is destroyed when the transition completes.

Use unscaled time so transitions keep playing while the game is paused through Time.timeScale. If you move or fade current, put it back at the end in case it stays on screen.

Underlay and overlay

Assign Underlay and Overlay RectTransforms on the StateFlow Manager to give transitions somewhere to draw effects:

• The underlay is moved just below the layer being opened. Fade it in to dim everything under a popup.
• The overlay is moved above both states. Use it for wipes and fades to black that cover the swap.

Tween.Run is a ten-line helper from the sample; any tween library does the same job. Make the underlay and overlay full-screen Images with a CanvasGroup at alpha 0 and Blocks Raycasts off, so they are invisible and click-through until a transition uses them.

public class CurtainTransition : StateFlowTransition
{
    protected override void OnStart(ITransitionState current, ITransitionState next,
        RectTransform underlay, RectTransform overlay, Action completed)
    {
        if (overlay == null)
        {
            completed();
            return;
        }

        StartCoroutine(Play(next, overlay.GetComponent<CanvasGroup>(), completed));
    }

    protected override void OnComplete()
    {
    }

    private static IEnumerator Play(ITransitionState next, CanvasGroup curtain, Action completed)
    {
        var nextGroup = next.RectTransform.gameObject.AddComponent<CanvasGroup>();
        nextGroup.alpha = 0f;           // hide the new state until the screen is covered
        curtain.blocksRaycasts = true;

        yield return Tween.Run(0.25f, Tween.OutCubic, t => curtain.alpha = t);
        nextGroup.alpha = 1f;
        yield return Tween.Run(0.3f, Tween.InCubic, t => curtain.alpha = 1f - t);

        curtain.blocksRaycasts = false;
        completed();
    }
}

Play mode

Rules

• The class needs a public parameterless constructor. A new instance is created each time the transition plays.
• Transitions into a toast don't play: toasts use their own show and hide animations.