I am revisting the user interface of my app at the moment. One thing I would love to use are short animations when the mouse enters or leaves a button.
Something like this: http://iamchenghan.host22.com/css3_color_animation_demo.html
The length of the animations in the demo a too long to look good but it shows the principle.
The DrawableButton for example has on, off and down states. Instead of just switching between these states it would be great if one could set a transition length and the button would animate between the states using a ComponentAnimator. I think it would work if the drawable for the new state would be placed in front of the old one with zero opacity, then the ComponentAnimator could be used to animate the opacity of the old Drawable to 0 while the opacity of the new Drawable is animated to 1.
Does it sound like a reasonable approach? Maybe others have already played with hover animations and could share some insights?
I've never used the ComponentAnimator class, but I'd say it would be just as easy to write your own special button class for this. You could draw the states directly in your components paint() routine, and add simple timers which get triggered on a mouseEnter and mouseExit. I've created simple components with fade ins and outs like this in the past. But now that you've brough ComponentAnimator to my attention, I must take a look.
To use the component paint method looks like a good approach too.
I was thinking if it is possible to be directly integrated into a DrawableButton the hover animations would become useful for the general case. Maybe it could be integrated in JUCE directly.
Personally many of my buttons are DrawableButtons that render SVG. For this it would be perfect.
Here is a stripped down DrawableButton that animates mouse over and out. It was very simple because the DrawableButton is almost exactly working as needed for the animations.
