Animating Hover States

[Casmat]

Hey!

Got a question, so I've got an icon that changes color on hover, is it possible to smoothy animate the color transition in hise?

Thanks!

[aaronventure]

@Casmat Colors.mix() and just feed it the alpha.

Use a timer to output the alpha and repaint the component. If it's a panel, it already has the timer and the data object that you can use to set the alpha with the timer and get it from the paint routine.

[Casmat]

@aaronventure Thanks a lot! Didn't think of the mix fcn being used for that! Here's some code for anyone else stumbling on this, allowing you to smoothly transition between two colors on a panel component based on mouse hover:

const var icon = Content.getComponent("icon");
icon.data.alpha = 0.0;
icon.data.hover = false;

icon.setPaintRoutine(function(g)
{
	g.setColour(Colours.mix(DEFAULT COLOR, HOVER COLOR, this.data.alpha));
	g.setFont("Oxygen", 50);
	g.drawAlignedText("TEXT GOES HERE", [0, 0, 100, 100], "centred");
});

icon.setTimerCallback(function()
{
    if (this.data.hover)
    {
        if (this.data.alpha < 1.0) this.data.alpha += 0.25;
    }
    else
    {
        if (this.data.alpha > 0.0) this.data.alpha -= 0.25;
    }

    this.data.alpha = Math.range(this.data.alpha, 0.0, 1.0);
    this.repaint();

    if (this.data.alpha == 1.0 || this.data.alpha == 0.0) this.stopTimer();
});

icon.setMouseCallback(function(event)
{
	if (event.clicked) Engine.openWebsite("https://forum.hise.audio");
	
    if (event.hover != this.data.hover)
    {
        this.data.hover = event.hover;
        this.startTimer(15);
    }
});

Is there anything that should be changed? Is timer callback at 15 ms ok? It was a good swift transition with that amount.

[aaronventure]

@Casmat You can call the timer with framerates with 1000/fps.

If you have longer animations and find them stuttery (because the UI timer isn't accurate), you can be calculating timing differences between frames and compensating in the alpha increase. This should only be noticeable on very slow machines, for which you should have an option to disable animation anyway (although 4 timer ticks is nothing).

Then, there are the easings and the standard finterpTo interpolation that you can add.

The rabbit hole is very deep with animation.