UX in Hise

[Sawer]

Is there a way to create these type of buttons animations here?

If yes, how?
Thanks

[Casey Kolb]

@nesta99 I can think of two ways to do this, and neither is particularly clean because unlike Javascript for the web, HISE doesn't have built-in transitions for animations, so you have to build them yourself.

The first (and probably cleanest) way to do this is to have a PNG strip animation which goes from that X-shape to the Hamburger-shape over a number of frames. Whenever it's clicked, a timer goes off which runs the animation on the PNG strip. If you want it to highlight on hover, you'll need to set that in the panel paint routine so that the alpha is something like 0.7 when not hovering, and 1.0 when hovering.

The second way which is arguably way clunkier is to hard-code the animation in a paint routine, essentially telling the panel exactly what to draw at each point in a timer. I wouldn't recommend this though. It would probably be extremely tedious.~~

Hope this helps!

EDIT: See answers below. Lottie is the way to go. Oops!

[ustk]

@nesta99 Lottie animation here, definitely...

[A Former User]

@nesta99 Although not exact like your YT Example.. but you may get a starting point from this example....HamX.zip

[d.healey]

@ustk said in UX in Hise:

@nesta99 Lottie animation here, definitely...

Lottie is definitely the way to do this.

[Casey Kolb]

Ahh, completely forgot about Lottie. Is that working properly? I could never get it to do what I wanted.

[d.healey]

@Lunacy-Audio It seems to work perfectly on Windows and MacOS, no support on GNU/Linux yet though :(

[Casey Kolb]

@d-healey Such a shame! I know you love your Linux

[Sawer]

Wow that’s super great! Will this work also for panel animations like knobs, presets , floating tiles ecc?

[ustk]

@nesta99 it works as long as you use simple animations. But more complexes ones with layers and consort can cause troubles. but I don’t know more about what exactly causes the issue so it is hard to track down... but this example is quite simple so try and see ;)

[Casey Kolb]

@ustk Did a bunch of experimenting today and it seems that the Lottie animations work great in HISE if they're small like you mentioned, but issues occur when you try port the plugin over to other machines. Even if you install the librlottie.dylib files in the right spot, it struggles to open the file on certain machines. I think this could be sketchy on a large scale.

[ustk]

@Lunacy-Audio interesting, it should be tested at a larger scale then...

[Casey Kolb]

@ustk Have you had luck cross-platform? I have one Mac that can't seem to open the dylib file.

[Casey Kolb]

Basically HISE is trying to do this call to open the lib and failing:

auto ok = dynLib->open(file.getFullPathName());
	
if (!ok)
	return returnInitFailure("The file exists, but the rLottie library can't be loaded correctly");

[ustk]

@Lunacy-Audio no only on my main mac for now but I never used it a lot since I do everything with panels

[Casey Kolb]

@ustk Yup same. Just using panels for everything but Lottie seems so light-weight and powerful that I would absolutely love to figure it out.

[Casey Kolb]

@ustk So if I understand correctly, you need to actually install the lib on the end user's Mac computer here: /usr/local/lib and then it should work?

[ustk]

@Lunacy-Audio I don't remember the directory but yes that's the idea, you have to manage this with your installer