Button border-radius transition in JavaFX/TornadoFX - javafx

Question

I am trying to make my buttons animate on hover such as those of Discord.
I can change the background color and border radius, but not able to animate it smoothly.
I could only find examples of animating shapes, and not css properties.
Here is my css code for the button.
class NavigatorButtonViewCss: Stylesheet() {
companion object {
val face by cssclass()
val buttonBackgroundColor = c("#36393F")
val buttonHoverBackgroundColor = c("#7289DA")
val textColor = c("#C8C9CB")
}
init {
indicator {
prefWidth = 10.px
}
face {
prefWidth = 50.px
prefHeight = 50.px
backgroundColor += buttonBackgroundColor
backgroundRadius = multi(box(50.percent))
label {
textFill = textColor
}
and(hover) {
// I want this to be animated
backgroundColor += buttonHoverBackgroundColor
backgroundRadius = multi(box(35.percent))
}
}
}
}
My button now
What I want
Are there any ways to achieve this transition?
Thank you.

Answer 1

JavaFX does not allow you to create any kind of animation via CSS and as far as I can tell there's no way of applying a animation even with TornadoFX. (Note tough that I just started with TornadoFX today, so I may be wrong.)
The only way of getting an animation in via stylesheet would be to use set the skin to a custom skin implementing the corner animation. While you could make the skin provide CSS property controling the roundedness of the corners.
Usually you'd extend Button adding a property, but in this case I simply store it in the properties map.
Skin to assign to the button
package org.example
import com.sun.javafx.scene.control.skin.ButtonSkin
import javafx.beans.binding.Bindings
import javafx.beans.binding.DoubleBinding
import javafx.beans.property.DoubleProperty
import javafx.beans.property.SimpleDoubleProperty
import java.util.function.Function
import javafx.css.SimpleStyleableBooleanProperty
import javafx.css.CssMetaData
import javafx.css.StyleablePropertyFactory
import javafx.css.Styleable
import javafx.css.StyleableProperty
import javafx.scene.control.Button
import javafx.scene.shape.ArcTo
import javafx.scene.shape.ClosePath
import javafx.scene.shape.HLineTo
import javafx.scene.shape.MoveTo
import javafx.scene.shape.Path
import javafx.scene.shape.VLineTo
import tornadofx.*
class AnimatedButtonSkin(button: Button) : ButtonSkin(button) {
companion object {
#JvmField
val CSS_ROUNDED_KEY = "org.example.AnimatedButtonSkin.rounded"
#JvmField
val CSS_ROUNDED_METADATA: CssMetaData<Button, Boolean>
#JvmField
val FACTORY = StyleablePropertyFactory<Button>(javafx.scene.control.SkinBase.getClassCssMetaData())
init {
CSS_ROUNDED_METADATA = FACTORY.createBooleanCssMetaData(
"-fx-rounded",
object : Function<Button, StyleableProperty<kotlin.Boolean>> {
override fun apply(b: Button): StyleableProperty<Boolean> {
// property stored in properties to avoid extending button
val v = b.getProperties().get(CSS_ROUNDED_KEY)
return v as StyleableProperty<Boolean>
}
},
true
)
}
}
override fun dispose() {
// get rid of the property and the shape
val b = getSkinnable()
b.getProperties().remove(CSS_ROUNDED_KEY)
b.setShape(null)
super.dispose()
}
private fun createArc(
cornerSizeH: DoubleBinding,
cornerSizeV: DoubleBinding,
invertX: Boolean,
invertY: Boolean
): ArcTo {
return ArcTo().apply {
setAbsolute(false)
setSweepFlag(true)
radiusXProperty().bind(cornerSizeH)
radiusYProperty().bind(cornerSizeV)
xProperty().bind(if (invertX) cornerSizeH.negate() else cornerSizeH)
yProperty().bind(if (invertY) cornerSizeV.negate() else cornerSizeV)
}
}
override fun getCssMetaData(): List<CssMetaData<out Styleable, *>>? {
return FACTORY.getCssMetaData()
}
init {
val prop = SimpleStyleableBooleanProperty(CSS_ROUNDED_METADATA, true)
button.getProperties().put(CSS_ROUNDED_KEY, prop)
// relative part of width/height that is rounded
// size for single corner:
// 0 -> rectangular button
// 0.5 -> circular button
val cornerSize = SimpleDoubleProperty(.5)
val w = button.widthProperty()
val h = button.heightProperty()
// bindings for horizontal measures
val cornerHSize = w.multiply(cornerSize)
val doubleHCornerSize = cornerHSize.multiply(2.0);
// measures for vertical measures
val cornerVSize = h.multiply(cornerSize)
val doubleVCornerSize = cornerVSize.multiply(2.0);
// lower part of the top-left corner
val start = MoveTo().apply {
yProperty().bind(cornerSize);
}
// straight path of top
val top = HLineTo().apply {
setAbsolute(false)
xProperty().bind(w.subtract(doubleHCornerSize))
}
// straight part of the right
var right = VLineTo().apply {
setAbsolute(false)
yProperty().bind(h.subtract(doubleVCornerSize))
}
// straight part of the bottom
val bottom = HLineTo().apply {
setAbsolute(false)
xProperty().bind(top.xProperty().negate())
}
// assemble the parts
val shape = Path(
start,
createArc(cornerHSize, cornerVSize, false, true), top,
createArc(cornerHSize, cornerVSize, false, false), right,
createArc(cornerHSize, cornerVSize, true, false), bottom,
createArc(cornerHSize, cornerVSize, true, true), ClosePath()
)
button.shape = shape
// animate open/close on change of stylable property
prop.addListener({ _, _, new -> cornerSize.animate(endValue = if (new) .5 else .2, duration = .2.seconds) })
}
}
Style
class NavigatorButtonViewCss: Stylesheet() {
companion object {
val face by cssclass()
val rounded by cssproperty<Boolean>("-fx-rounded")
val buttonBackgroundColor = c("#36393F")
val buttonHoverBackgroundColor = c("#7289DA")
val textColor = c("#C8C9CB")
}
init {
indicator {
prefWidth = 10.px
}
face {
prefWidth = 50.px
prefHeight = 50.px
backgroundColor += buttonBackgroundColor
textFill = textColor
skin = AnimatedButtonSkin::class
and(hover) {
rounded.value = false // update corners
backgroundColor += buttonHoverBackgroundColor
}
}
}
}