Play rlottie animation one time on mouse click

[UrsBollhalder]

Ok. So I am trying to setup a button, that if you press it, should play an rlottie animation one time only. The animation has 61 frames. If not clicked, the animation should just reatrn to frame 1.

Now this is as far as I could take it for the moment with my limited abilities in HISE code. It does react to mouse clicks and advances the animation one frame per click but doesn't play through in one go...

Thanks for your help!

u

// Panel 

const var p = Content.addPanel("pnlRnd", 300, 300);
p.set("width", 200);
p.set("height", 200);
p.setAnimation("849.nT6K8CVBWziF.XhmZMBHsQePQtQLjbH8vFx3bdXKCO.He5vD2.on0l56ZkTRP.DHN4D.PAfT.HkDrvMcjaypeRRRMFAJaV4r.2z1azZgMqbtoc3vQyp9Y16KHXfcTgyFt0.ZtogLE0rxcIZVsdylUuE2zTolUtia5JTypdozTZM2zQzRB7rJh2cWQWmx4.7yDH.iIHKnSRLc.iZvzYkQacghyIt+8dtEb1kULteFgUL1BkIZoVxaeV4vkiqV7eApWaVM4mve.msDtosOp1lUc6sfiVpTpZWurBtFuRoBjPdP1TbE8y1azBAEsRHTDqfav0oBOGcgH3PaYruUGZajBirtyImNfw0ZVab5BMavVVhOSvq0W7L1zT59DqRL9k0JxU5AROvcB.vDmGUHDm6eGqXk5cV9hyTXXN16bqqkMoqEqfejhnvpAxuszbL+u7VMVagYsdt1udLewyeJORHJDypAPZ3gEeLq2FryjFRcBYmf0DZvkGLb.RMngE0YlY...TzQ..FIXlpHhafh2yqZU1SMOJvTgkJFhSYJHvTyrVldZ.k5Gsj24ynLJ6F7owAkuEtOGphrLEnTzin.lAUA05YovTHGbXR0eDT9MoXBECKAw8Z7TY2PojyOT5KeRi8VQT.eLX2jYVGCmn5tYXuiZ8O2OHAYnH.FqNQpEczHTszVAqC1+.HXu7gq3HknBXieg3xYvQ9vjxjWq.vDPvfzqTOC0ufb95hSmFDJv.5wZK9i8kJ..LvBwHzr6BBdhWQAAX9yOFNq.0EKia3ZbE4trnaEafCEy+UUBz2z2f2t6Yu5ZOl509oV1XZHzZRgNmnHDinEXukmVtEw..tydWe1Nk6vdJJmsaZQgsKqqwBTQm2GIxuGBUivyFEGLjuWwxy0nCJBvfUT+rn1hh9eBKveth+I1Jp.B0rOVPqFwPyOiVn+ghCYEec2PdLs61JlKdAsgCJKr1RGcE+fiF2BV28zBFySZsM.5AxFVrzh9G.ewfQWVTiF+MMFrUAwBHlyF3UT.QjdrVHjfqq9vL.dA9.vEVJbIH1kX8eHhaUnvEacA+ZdccslKOlduZOrjXSFvSvfX3qwlbXmj.vgSjbIo4WYG9mP4yxgLDLvWqoTFFpsAp6.");
const var object = p.getAnimationData();

p.set("allowCallbacks", "Clicks Only");


//p.setAnimationFrame(1);

p.setMouseCallback(function(event)
{
    //p.startTimer();
    var nextFrame = (object.currentFrame + 1) % object.numFrames;
    this.setAnimationFrame(nextFrame);
    p.startTimer(1000.0 / object.frameRate);
});

[ustk]

@vewilya

const var p = Content.addPanel("pnlRnd", 300, 300);
p.set("width", 200);
p.set("height", 200);
p.setAnimation("849.nT6K8CVBWziF.XhmZMBHsQePQtQLjbH8vFx3bdXKCO.He5vD2.on0l56ZkTRP.DHN4D.PAfT.HkDrvMcjaypeRRRMFAJaV4r.2z1azZgMqbtoc3vQyp9Y16KHXfcTgyFt0.ZtogLE0rxcIZVsdylUuE2zTolUtia5JTypdozTZM2zQzRB7rJh2cWQWmx4.7yDH.iIHKnSRLc.iZvzYkQacghyIt+8dtEb1kULteFgUL1BkIZoVxaeV4vkiqV7eApWaVM4mve.msDtosOp1lUc6sfiVpTpZWurBtFuRoBjPdP1TbE8y1azBAEsRHTDqfav0oBOGcgH3PaYruUGZajBirtyImNfw0ZVab5BMavVVhOSvq0W7L1zT59DqRL9k0JxU5AROvcB.vDmGUHDm6eGqXk5cV9hyTXXN16bqqkMoqEqfejhnvpAxuszbL+u7VMVagYsdt1udLewyeJORHJDypAPZ3gEeLq2FryjFRcBYmf0DZvkGLb.RMngE0YlY...TzQ..FIXlpHhafh2yqZU1SMOJvTgkJFhSYJHvTyrVldZ.k5Gsj24ynLJ6F7owAkuEtOGphrLEnTzin.lAUA05YovTHGbXR0eDT9MoXBECKAw8Z7TY2PojyOT5KeRi8VQT.eLX2jYVGCmn5tYXuiZ8O2OHAYnH.FqNQpEczHTszVAqC1+.HXu7gq3HknBXieg3xYvQ9vjxjWq.vDPvfzqTOC0ufb95hSmFDJv.5wZK9i8kJ..LvBwHzr6BBdhWQAAX9yOFNq.0EKia3ZbE4trnaEafCEy+UUBz2z2f2t6Yu5ZOl509oV1XZHzZRgNmnHDinEXukmVtEw..tydWe1Nk6vdJJmsaZQgsKqqwBTQm2GIxuGBUivyFEGLjuWwxy0nCJBvfUT+rn1hh9eBKveth+I1Jp.B0rOVPqFwPyOiVn+ghCYEec2PdLs61JlKdAsgCJKr1RGcE+fiF2BV28zBFySZsM.5AxFVrzh9G.ewfQWVTiF+MMFrUAwBHlyF3UT.QjdrVHjfqq9vL.dA9.vEVJbIH1kX8eHhaUnvEacA+ZdccslKOlduZOrjXSFvSvfX3qwlbXmj.vgSjbIo4WYG9mP4yxgLDLvWqoTFFpsAp6.");

p.set("allowCallbacks", "Clicks Only");

var frame = 0;

p.setMouseCallback(function(event)
{
    if (event.clicked)
        this.startTimer(30);
});


p.setTimerCallback(function()
{
    frame++;
    
	if (frame > 61)
	{
	    frame = 0;
	    this.stopTimer();
	}
	
	p.setAnimationFrame(frame);
});

[UrsBollhalder]

@ustk Thx a ton! Really appreciate the help!

[DabDab]

How to animate Lottie animation in loop?

[UrsBollhalder]

@DabDab There’s some good examples in the documentation… https://docs.hise.audio/tutorials/recipes/ui/animations.html#looped-animation