JavaFx 实现水平滚动文本(跑马灯效果)

woisking2

于 2023-08-20 08:58:55 发布

阅读量244

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/woisking2/article/details/132388662

版权

本文介绍了如何在TornadoFx框架下，利用JavaFX的动画效果控制scrollpane组件的translateX属性，实现实时滚动公告功能，特别提到了文本处理和滚动逻辑的要点。

摘要由CSDN通过智能技术生成

本文是以TornadoFx框架进行编写,各位使用JavaFx可以参考

代码已经封装在common-controls库中

效果

代码

实现原理就是利用了JavaFx里的动画效果去修改scrollpane的translateX属性,原本想在text上改造的,发现文字过多就不行了,最终还是使用了scrollpane组件来完成功能

就是需要注意的是,设置的文本需要处理一下换行符,不然显示效果会很不好看

还有就是,记得文本前面加上几个空格,不然滚动感觉看不了前面的几个字

val simpleNotice=SimpleStringProperty("")
scrollpane {
    alignment = Pos.CENTER_LEFT
    prefWidth = 560.0

    style {
        focusColor = Color.TRANSPARENT
        borderWidth += box(0.px)
        borderColor += box(Color.TRANSPARENT)
        hBarPolicy = ScrollPane.ScrollBarPolicy.NEVER
        vBarPolicy = ScrollPane.ScrollBarPolicy.NEVER
        padding = box(0.px)
    }

    hbox {
        translateY = 5.0
        alignment = Pos.CENTER_LEFT

        label(simpleNotice) {
            val defaultValue = translateXProperty().value
            //滚动的逻辑
            val rollAction: ((String) -> Unit) = {
                val newValue = it
                //阅读速度,8个字1s
                val time = newValue.length / 8
                translateXProperty().animate(-(newValue.length * 10), Duration.seconds(time.toDouble()), Interpolator.LINEAR) {
                    cycleCount = -1
                    setOnFinished {
                        translateXProperty().set(defaultValue)
                    }
                }
            }

            simpleNotice.onChange {
                rollAction.invoke(it?:"")
            }
            rollAction.invoke(simpleNotice.value)

            setOnMouseClicked {
                //点击事件

            }
        }
    }
}
simpleNotice.set("      这是一个测试公告信息...")