Make a button start and stop a Lottie animation.

[maxtownsley]

Hi. Ive managed to get a Lottie file into the Lottie dev and compress properly and have it animate on compiling in the interface. Now Id like to have a button start the animation when it is pressed and stop it when it is pressed again. It's a plus if the animation stops at the point in which it is stopped and starts up again from that position in the loop when button is pressed again to start it back up. Thanks to any help!!

[aaronventure]

@maxtownsley You want to use the panel's timer for this. https://docs.hise.audio/scripting/scripting-api/scriptpanel/index.html#settimercallback

Start it with panel.startTimer(1000/framerate). Stop it with panel.stopTimer();

In your timer callback, you just want a variable that's increasing every step with a modulo that equals the number of frames in your animation.

i = (i+1) % numFrames;

so that it resets to 0 once it reaches the strip end. If you instead want it to go back down, you'll have to write a flip flop by having a flag that gets ticked on the first and the last frame, and according to the have the value increasing/decreasing.

If you need this to be happening consistently so that whenever you re-open the GUI, the animation is in the correct spot, you'll need to create a timer object because the panel timer doesn't run when the GUI is closed.

const var lottieTimer = Engine.createTimerObject();

Start and stop are the same.

If you want the position of it to be saved and loaded on project load in DAW, set the panel's range to the number of the strips, set its "saveInPreset" property to true, use its value as the target for counter in the timer, and then its value to set the correct lottie frame.

[maxtownsley]

@aaronventure amazing, thank you!!! will try when I get home

[maxtownsley]

@aaronventure this did the trick ! many thanks!

//button
const var Buttonx = Content.getComponent("Buttonx");

inline function onButtonxControl(component, value)
{
    if (value)
    {
        // Button pressed, start animation
        p.startTimer(1000.0 / object.frameRate);
    }
    else
    {
        // Button released, stop the animation
        p.stopTimer();
    }
}

Content.getComponent("Buttonx").setControlCallback(onButtonxControl);