Reversible Sequences

[MikeMuorte]

Hi, I was experimenting with sequences to try and replicate some of the things DoTween sequences can do. Reversible sequences are something I use a lot in my projects, especially for UI windows. I couldn’t find anything in the documentation or examples on how to do this. If there’s already a built-in way to do this, I’d really appreciate it if you could point me in the right direction.

I managed to implement it in a way by using a helper Tween that animates the Progress property of the Sequence. The sequence needs to be created and paused for it to work, and when the helper tween finishes animating the sequence, it must be manually completed using Complete() (for forward) and Stop() (for backward).

Here’s a small example of what I did.

public Image barA;
public Image barB;
public Image barC;
public Image barD;
public Image barE;

public bool toggleAnimation = true;
Sequence sq;

public void AnimateSequence(bool forward = true)
{
    if (sq.isAlive)
    {
        Debug.Log("Sequence is Alive");
        return;
    }

    var tA = Tween.UIFillAmount(barA, 0, 1, 2);
    var tB = Tween.UIFillAmount(barB, 0, 1, 2);
    var tC = Tween.UIFillAmount(barC, 0, 1, 0.5f);
    var tD = Tween.UIFillAmount(barD, 0, 1, 0.5f);
    var tE = Tween.UIFillAmount(barE, 0, 1, 2);

    sq = Sequence.Create()
         .ChainCallback(() => Debug.Log("A"))
         .Chain(tA)
         .ChainCallback(() => Debug.Log("B"))
         .ChainDelay(2)
         .Group(tC)
         .Group(tD)
         .ChainCallback(() => Debug.Log("C"))
         .Chain(tB)
         .ChainCallback(() => Debug.Log("D"))
         .Insert(2, tE)
         .InsertCallback(3, () => Debug.Log("Insert At 3"));

    // Fix for sequence initialization bug
    sq.isPaused = true;
    sq.progress = 1;
    sq.progress = 0;

    if (forward)
        Tween.Custom(0, 1, sq.duration, x => sq.progressTotal = x).OnComplete(() => sq.Complete());
    else
        Tween.Custom(1, 0, sq.duration, x => sq.progressTotal = x).OnComplete(() => sq.Stop());
}

private void Update()
{
    if (!sq.isAlive)
    {
        AnimateSequence(toggleAnimation);
        toggleAnimation = !toggleAnimation;
    }
}

It seems to work well with Chain, _ChainDelay, Group, and Insert, but ChainCallback and InsertCallback don’t work when running backward.

I hope this could be an interesting idea to consider implementing as a new feature in PrimeTween.

Thanks so much for your time!

[KyryloKuzyk]

Indeed, PrimeTween doesn't have a way to create reversible sequences out of the box. I spent many hours thinking about this problem and didn't come up with a good solution.

The problem comes from the fact that PrimeTween doesn't support animation caching for performance and reliability reasons. The intended way to use PrimeTween is to always create a new tween/sequence right when you need it.

Another problem with reversible sequences is that the ease of the backwards cycle would be also inverted, which can't satisfy all use cases. For example, if you animate something heavy with easing to convey the mass of the object, simply reversing the sequence will look odd because it will invert the easing.

So, instead of a half-baked solution, the way I envision this with PrimeTween is to create a different Sequence of the reverse motion. Yes, it's more code to write, but it would be simpler to read and maintain in the long run.

Here is the best way I found to reverse the sequence, but it's too complex to understand and use, so I decided not to include the ApplyDirection() in the official version of the plugin:

using PrimeTween;
using UnityEngine;
using UnityEngine.Assertions;

public class SequenceBackward : MonoBehaviour {
    [SerializeField] bool isForward = true;
    Sequence sequence;

    void Update() {
        if (Input.GetMouseButtonDown(0)) {
            if (!sequence.isAlive) {
                var tweenSettings = new TweenSettings<float>(0f, 3f, 0.5f, Ease.Linear);
                sequence = Sequence.Create(1, sequenceEase: Ease.OutBounce)
                    .Chain(Tween.PositionX(transform, tweenSettings))
                    .Chain(Tween.PositionY(transform, tweenSettings));
            }
            ApplyDirection(sequence, isForward);
            // flip the direction
            isForward = !isForward; 
        }
        if (Input.GetKeyDown(KeyCode.Space)) {
            if (sequence.isAlive) {
                // flip the direction midway
                sequence.timeScale = sequence.timeScale == 0f ? !isForward ? 1 : -1 : 0f;
            }
        }
    }

    static void ApplyDirection(Sequence seq, bool isForwardDirection) {
        Assert.IsTrue(seq.isAlive);
        Assert.AreNotEqual(0f, seq.durationTotal);
        Assert.AreNotEqual(-1, seq.cyclesTotal);
        seq.timeScale = Mathf.Abs(seq.timeScale) * (isForwardDirection ? 1f : -1f);
        if (isForwardDirection) {
            if (seq.progressTotal >= 1f) {
                seq.progressTotal = 0f;
            }
        } else {
            if (seq.progressTotal == 0f) {
                seq.progressTotal = 1f;
            }
        }
    }
}

I'm working on a Pro version that will add the ability to create Sequences from the Inspector, and it will support reversible motion. I can't give any time estimates for now, however.

[MikeMuorte]

Hi, this is a very interesting topic. I understand there are complications, since each tween in the sequence would have to be configured in advance to work this way, and perhaps it gets so complex that it's better to avoid it altogether and just create both versions of the sequence, more code but easier to manage.

I get the idea, playing with the time scale is a very clever way to create a reversible sequence. I’ll take a closer look at it, since it seems like a better solution than mine.

Now that I understand what you explained, I can decide whether it’s worth taking the risk of making reversible sequences depending on the case. Either way, I want to give PrimeSequence a chance, I'm tired of DoTween and its many limitations.

I'm interested in the pro version, but no pressure to have it ready soon. I’ll keep an eye out for when it becomes available.

Thanks so much for your time!