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

原文地址: JavaFx 实现水平滚动文本(跑马灯效果) - Stars-One的杂货小窝

本文是以TornadoFx框架进行编写,各位使用JavaFx可以参考
代码已经封装在common-controls库中
效果


代码

实现原理就是利用了JavaFx里的动画效果去修改scrollpane的translateX属性,原本想在text上改造的,发现文字过多就不行了,最终还是使用了scrollpane组件来完成功能
就是需要注意的是,设置的文本需要处理一下换行符,不然显示效果会很不好看
还有就是,记得文本前面加上几个空格,不然滚动感觉看不了前面的几个字

1. val simpleNotice=SimpleStringProperty("")
2. scrollpane {
3.     alignment = Pos.CENTER_LEFT
4.     prefWidth = 560.0
6.     style {
7.         focusColor = Color.TRANSPARENT
8.         borderWidth += box(0.px)
9.         borderColor += box(Color.TRANSPARENT)
10.         hBarPolicy = ScrollPane.ScrollBarPolicy.NEVER
11.         vBarPolicy = ScrollPane.ScrollBarPolicy.NEVER
12.         padding = box(0.px)
13.     }
15.     hbox {
16.         translateY = 5.0
17.         alignment = Pos.CENTER_LEFT
19.         label(simpleNotice) {
20.             val defaultValue = translateXProperty().value
21.             //滚动的逻辑
22.             val rollAction: ((String) -> Unit) = {
23.                 val newValue = it
24.                 //阅读速度,8个字1s
25.                 val time = newValue.length / 8
26.                 translateXProperty().animate(-(newValue.length * 10), Duration.seconds(time.toDouble()), Interpolator.LINEAR) {
27.                     cycleCount = -1
28.                     setOnFinished {
29.                         translateXProperty().set(defaultValue)
30.                     }
31.                 }
32.             }
34.             simpleNotice.onChange {
35.                 rollAction.invoke(it?:"")
36.             }
37.             rollAction.invoke(simpleNotice.value)
39.             setOnMouseClicked {
40.                 //点击事件
42.             }
43.         }
44.     }
45. }
46. simpleNotice.set("      这是一个测试公告信息...")

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！