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

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

本文是以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("      这是一个测试公告信息...")

JavaFx 实现水平滚动文本(跑马灯效果)的相关教程结束。