JavaFX动画：有趣的AnimationTimer

大福是小强

已于 2024-07-23 08:29:58 修改

阅读量2.4k

点赞数 1

分类专栏： JavaFX Kotlin/Java 文章标签：动画 javafx kotlin

于 2022-02-15 00:17:21 首次发布

本文链接：https://blog.csdn.net/withstand/article/details/122934314

版权

Kotlin/Java 同时被 2 个专栏收录

19 篇文章

订阅专栏

JavaFX

12 篇文章

订阅专栏

这篇博客介绍了如何在JavaFX中使用AnimationTimer类来创建动画效果并实时记录帧率（FPS）。通过一个实例展示了如何实现一个点击按钮后文字逐渐透明并同时显示当前FPS的程序。博客详细解释了AnimationTimer的工作原理，包括handle方法的调用时机，以及如何结合SimpleDoubleProperty和LineChart来展示FPS数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Kotlin+JavaFX系列

AnimationTimer

JavaFX有三类动画实现方式：Transition，TimeLine和AnimationTimer。

AnimationTimer看起来像是一个计时器，其实他更适合叫做心跳循环。JavaFX绘图的每一帧都会自动条用AnimationTimer. AnimationTimer是一个抽象类。实现该类需要实现一个函数handle，其参数为调用时的nanoTime()。

public abstract void handle(long var1);
public void start();
public void stop();

AnimationTimer的start和stop函数分别是开始和停止handel被系统调用。

AnimationTimer的例子

实现一个FPS记录程序。这个例子中，我们点击开始按钮，下方标签的文字就会逐渐变得透明。而程序还同时记录当前的FPS，显示在图中，当前的FPS在图的标签中也会同步更新。
在这里插入图片描述

package com.example.timerdemo1

import javafx.animation.AnimationTimer
import javafx.application.Application
import javafx.beans.binding.Bindings
import javafx.beans.property.SimpleDoubleProperty
import javafx.beans.property.SimpleObjectProperty
import javafx.collections.FXCollections
import javafx.geometry.Pos
import javafx.scene.Scene
import javafx.scene.chart.LineChart
import javafx.scene.chart.NumberAxis
import javafx.scene.chart.XYChart
import javafx.scene.control.Button
import javafx.scene.control.Label
import javafx.scene.layout.VBox
import javafx.scene.text.Font
import javafx.stage.Stage
import kotlin.math.roundToLong

class AnimationTimerSample : Application() {
    private var op = SimpleDoubleProperty(1.0)
    private val dtValues = SimpleObjectProperty(
        FXCollections.observableList(mutableListOf<XYChart.Data<Number, Number>>())
    )
    private val fps = SimpleDoubleProperty(0.0)

    override fun start(st: Stage) {
        initUI(st)
    }


    private fun initUI(st: Stage) {
        val tm = TimerMethod(op.value)

		// 三个元素纵向排列，间隔10.0以看起来更顺眼
        val sp = VBox(10.0).apply {
            alignment = Pos.CENTER
            // 开始按钮
            children.add(Button("开始").apply {
                font = Font.font(24.0)
                // 正在执行动画时按钮失效
                disableProperty().bind(
                    Bindings.createBooleanBinding(
                        {
                            op.value > 0 && op.value < 1
                        }, op
                    )
                )
                // 按下按钮，启动标签透明度减小过程
                setOnAction {
                    if (op.value <= 0 || op.value >= 1.0) {
                        op.value = 1.0
                        fps.value = 0.0
                        dtValues.value.clear()
                        tm.start()
                    }
                }

            })
            // 绑定透明度属性到浮点属性，实现透明度变化
            children.add(Label("我是就要变得透明的大字！").apply {
                font = Font.font(36.0)
                opacityProperty().bind(op)
            })
            // 初始化一个线图，绑定线条的data，绑定线条的名称
            children.add(LineChart<Number, Number>(
                NumberAxis(0.0, tm.maximumCount, tm.maximumCount / 10.0),
                NumberAxis(0.0, 200.0, 20.0)
            ).apply {
                animated = false
                createSymbols = false
                val dtLine = XYChart.Series<Number, Number>()
                dtLine.nameProperty().bind(Bindings.concat("当前FPS:", fps.asString().concat(" 1/s")))
                xAxis.label = "计数"
                yAxis.label = "FPS (1/s)"
                dtLine.dataProperty().bind(dtValues)
                dtValues.value.add(XYChart.Data(0, 0))
                data.add(dtLine)
            })
        }
		// 模板化窗口设置
        val sc = Scene(sp, 800.0, 600.0)
        st.title = "AnimationTimer示例"
        st.scene = sc
        st.show()
    }
	// 实现逐帧循环心跳处理类
    private inner class TimerMethod(private val maxT: Double) : AnimationTimer() {
    	// 用于计算时间差
        private var lastTime: Long = -1
        // 透明度递减的量
        private val dt = 0.01
        // 用于设置图形的最大X坐标
        val maximumCount: Double
            get() = maxT / dt

        override fun handle(now: Long) {
            if (lastTime <= -1) {
                dtValues.value.clear()
            } else {
                val n = dtValues.value.size
                val dt = now - lastTime
                // 去掉小数点后面的部分
                fps.value = (1e9 / dt).roundToLong().toDouble()
                // 增加数据点
                dtValues.value.add(XYChart.Data(n, fps.value))
            }
            lastTime = now
            // 改变透明度
            tick()
        }

        private fun tick() {
            op.value -= dt
            // 完全透明后自动停止心跳处理
            if (op.value <= 0) {
                stop()
            }
        }
    }
}

fun main() {
    Application.launch(AnimationTimerSample::class.java)
}