使用LWJGL实现2D UI元素动画的合理代码结构方案咨询

现有实现的核心问题如下：

• 每次触发动画都新建独立线程，多动画场景下资源开销极高，还会引发跨线程修改属性的并发安全问题
• 动画逻辑与渲染线程不同步，极易出现画面跳变、闪烁、掉帧问题
• 缓动计算的时间参数未和真实流逝时间挂钩，动画进度会受帧率波动影响，速度不稳定

核心设计思路 #

完全不需要额外开线程执行动画逻辑，UI渲染方法render本身就会按照屏幕刷新率（通常60/144Hz）定时调用，直接依托渲染帧驱动动画更新即可，既没有额外资源开销，还能天然和渲染流程同步。

步骤1：封装通用动画属性类 #

先封装可复用的动画属性工具，避免每个动画单独写重复逻辑：

public class AnimatedFloat {
    private float currentValue;
    private float startValue;
    private float targetValue;
    private long startTimeMs;
    private long durationMs;
    private EasingType easingType;
    private boolean isRunning;

    // 初始化属性默认值
    public AnimatedFloat(float initialValue) {
        this.currentValue = initialValue;
        this.isRunning = false;
    }

    // 触发动画到目标值
    public void animateTo(float target, long durationMs, EasingType type) {
        this.startValue = currentValue;
        this.targetValue = target;
        this.startTimeMs = System.currentTimeMillis();
        this.durationMs = durationMs;
        this.easingType = type;
        this.isRunning = true;
    }

    // 每帧更新计算当前属性值
    public float update() {
        if (!isRunning) return currentValue;
        
        long elapsedTime = System.currentTimeMillis() - startTimeMs;
        // 动画结束直接返回目标值
        if (elapsedTime >= durationMs) {
            currentValue = targetValue;
            isRunning = false;
            return currentValue;
        }

        // 按真实流逝时间计算动画进度
        float progress = (float) elapsedTime / durationMs;
        currentValue = AnimationUtil.ease(startValue, targetValue, progress, easingType);
        return currentValue;
    }

    // 可选：添加动画取消、暂停等扩展方法
    public void cancel() {
        isRunning = false;
    }

    public boolean isAnimating() {
        return isRunning;
    }
}

步骤2：改造业务代码使用封装类 #

替换原来的裸变量，直接用封装的动画属性类实现效果：

// 初始化矩形X轴位置动画属性，默认值为0
private AnimatedFloat rectanglePos = new AnimatedFloat(0);

public void render() {
    // 每帧先更新动画属性值，再执行绘制
    float currentX = rectanglePos.update();
    Gui.drawRect(currentX, 0, 50, 50, Color.red);
}

// 触发动画的入口方法
public void animate() {
    // 配置500ms内以CubicInOut缓动曲线移动到X=50的位置
    rectanglePos.animateTo(50, 500, EasingType.CubicInOut);
}

可选扩展优化 #

• 如果有大量UI动画，可统一实现动画管理器，每帧批量更新所有运行中的动画实例，无需每个组件单独调用update方法
• 可扩展泛型版本的AnimatedValue<T>，支持颜色、坐标点、大小等不同类型UI属性的插值动画
• 可添加动画完成回调、循环动画、倒放等自定义能力

方案优势 #

• 无额外线程开销，所有动画逻辑都在渲染线程执行，资源占用极低，可支持上百个UI动画同时运行
• 天然和渲染流程同步，不会出现画面撕裂、跳帧、并发修改的问题
• 基于真实时间戳计算动画进度，不会因为帧率波动出现动画速度忽快忽慢的问题
• 代码高度可复用，所有属性动画都可以用同一套封装实现，维护成本低

内容的提问来源于stack exchange，提问作者sentrix