@d-healey hmm, I didn't think about that, would you consider it'd be more efficient and better to use than what I currently use:
namespace HoverAnimation
{
inline function applyPanelHoverAnimation(panel, alphaSpeed, clickCallback)
{
panel.data.alpha = 0.0;
panel.data.hover = false;
panel.data.alphaSpeed = alphaSpeed;
panel.setTimerCallback(function()
{
if (this.data.hover)
{
if (this.data.alpha < 1.0) this.data.alpha += this.data.alphaSpeed;
}
else
{
if (this.data.alpha > 0.0) this.data.alpha -= this.data.alphaSpeed;
}
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();
});
panel.setMouseCallback(function [clickCallback](event)
{
if (event.clicked) clickCallback(this);
if (event.hover != this.data.hover)
{
this.data.hover = event.hover;
this.startTimer(1000 / 60);
}
});
}
inline function applyComponentHoverAnimation(component, data, alphaSpeed, clickCallback)
{
data.alpha = 0.0;
data.hover = false;
data.alphaSpeed = alphaSpeed;
data.timer = Engine.createTimerObject();
data.bc = Engine.createBroadcaster(
{
"id" : "Component Listener",
"args": ["component", "value"]
});
data.timer.setTimerCallback(function [component, data]()
{
if (data.hover)
{
if (data.alpha < 1.0) data.alpha += data.alphaSpeed;
}
else
{
if (data.alpha > 0.0) data.alpha -= data.alphaSpeed;
}
data.alpha = Math.range(data.alpha, 0.0, 1.0);
component.sendRepaintMessage();
if (data.alpha == 1.0 || data.alpha == 0.0) this.stopTimer();
});
data.bc.attachToComponentMouseEvents(component, "Clicks & Hover", "Optional");
data.bc.addListener(component, "Component Listener", function [data, clickCallback](component, event)
{
if (event.clicked) clickCallback(this);
if (event.hover != data.hover)
{
data.hover = event.hover;
data.timer.startTimer(1000 / 60);
}
});
}
}
All I'd need is an animation from one color to the other and I can animate that during cursor hover(based on your lottie video), then use a callback when clicked?
