BabylonJS
Disabled and Enabled GUI animation properties
About
I'd like to propose a new Property on BABYLON.GUI.Button to handle animating a button to and from a 'disabled' state. The various pointer animation properties (pointerEnterAnimation, pointerDownAnimation, pointerUpAnimation, pointerOutAnimation) make it very easy to animate a button's visual state between normal, hover, and focus. However, there is not currently a similar means to animate a button to a 'disabled' state which is an extremely common use case.
Solution I imagine there's dozens of ways to implement functionality to handle a buttons disabled state, and I'll leave that for you experts to determine, but here's an example of how it could be implemented.
New Properties: toEnabledAnimation and toDisabledAnimation.
These would function similarly to the pointerDownAnimation property. Once can write a function defining the properties of the button that need tweened/lerped to when that button's isEnabled property changes.
...
// Button state animations
prevButton.pointerEnterAnimation = () => {
prevButton.image.source = prevButton_hover;
}
prevButton.pointerDownAnimation = () => {
prevButton.image.source = prevButton_focus;
}
prevButton.pointerUpAnimation = () => {
prevButton.image.source = prevButton_hover;
}
prevButton.pointerOutAnimation = () => {
prevButton.image.source = prevButton_normal;
}
//The new properties
prevButton.toEnabledAnimation = () => {
prevButton.image.source = prevButton_normal;
}
prevButton.toDisabedAnimation = () => {
prevButton.image.source = prevButton_disbaled;
}
Ideally, any property available on the Button and its children could be animated. However for my current use cases, these are the things I would want to be able to change: button image, button text, children graphics.
I'm not sure how the pointerDownAnimation animation is timed, but I would say however it is handled could be the same for the disabled/enabled state animation. Since we do like to control the timing and curve in the world of UX, a future improvement could enable us to set the duration and easing function used by the animation.
Discussion This request originated in this forum post which also includes a playground example showcasing the various pointer animation properties.
Upon reviewing the button.ts script, I see that the isEnabled property actually comes from the control class. Should this idea be implemented in the control instead of the button?
If it should be implemented in the button class, how could I fire the toEnabledAnimation and toDisabledAnimation functions when the button's isEnabled property changes? If the setter can be overridden similar to how the _processPicking was overridden, then I may be able to throw together a pull request for you.
