javafx - JavaFX/TornadoFX 中的按钮边框半径转换
问题描述
我正在尝试让我的按钮在悬停时设置动画,例如 Discord 的按钮。
我可以更改背景颜色和边框半径,但不能平滑地对其进行动画处理。我只能找到动画形状的示例,而不是 css 属性。
这是我的按钮的css代码。
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))
}
}
}
}
我现在的按钮
我想要的是
有没有办法实现这种转变?
谢谢你。
解决方案
JavaFX 不允许您通过 CSS 创建任何类型的动画,据我所知,即使使用 TornadoFX 也无法应用动画。(请注意,我今天刚开始使用 TornadoFX,所以我可能错了。)
通过样式表获取动画的唯一方法是使用设置为skin
实现角动画的自定义皮肤。虽然您可以让皮肤提供 CSS 属性来控制角的圆度。
通常你会扩展Button
添加一个属性,但在这种情况下,我只是将它存储在properties
地图中。
分配给按钮的皮肤
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) })
}
}
风格
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
}
}
}
}
推荐阅读
- google-app-engine - Google App Engine 在 .NET Core API 的 Flex 环境中产生 400 和 502 错误
- php - Laravel:无法使用 Foreach 创建多个数据关系
- python - 我可以升级单个 Python 包吗?
- reactjs - 在 React-redux 中重置 JWT 刷新令牌
- swift - 在 SwiftUI 中展开时,NSOutlineView 不会改变高度
- python - 数字图像处理:关于插值、插补、数据点曲线拟合的想法
- function - 您在哪里可以找到 kotlin 文档中 values() 的用法?
- javascript - 通过在表中垂直添加数据或将行数据转换为列数据,从表中的任何 api 动态显示 json 数据
- python - 如何在 Tkinter 中使用网格的“in”属性
- html - Raspi /问题运行脚本以通过网页在Web上切换GPIO