You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何实现ArrayList内文本Y轴平滑移动的帧率独立动画

帧率独立Y轴平滑动画改造方案

你最早写的obj.renderY += 10 * deltaTime是匀速移动逻辑,接近目标位置时不会自然减速,因此出不来平滑趋近的效果;后续使用的按固定比例逐帧趋近目标的逻辑属于离散帧下的指数缓动实现,效果符合预期,但因为每帧移动比例固定,动画速度直接绑定帧率,生硬给speed乘除deltaTime会破坏指数衰减的比例关系,很容易出现速度异常。

核心改造逻辑

采用数学上严格帧率无关的指数阻尼插值实现,不需要改动你现有的deltaTime工具类,只需要替换动画更新的计算逻辑即可:

  1. 用指数函数计算当前帧的插值比例,保证不同帧率下每单位时间的衰减比例完全一致
  2. 用计算出的比例向目标Y值做插值,保留你原来双向平滑趋近的效果

实现代码

动画更新逻辑

// 平滑速度系数,数值越大动画越快越干脆,匹配原speed=14的手感建议初始值设为10,可按需微调
final float smoothSpeed = 10f;
// 计算当前帧的帧率无关插值因子
float lerpFactor = 1 - (float) Math.exp(-smoothSpeed * Time.deltaTime);
// 你的原有目标Y值计算逻辑保持不变
float targetY = 2 + count * (fontHeight + 1);
// 执行平滑趋近
obj.renderY += (targetY - obj.renderY) * lerpFactor;

// 可选:当距离目标小于0.5像素时直接吸附到目标,避免无意义的微小浮点计算
if (Math.abs(obj.renderY - targetY) < 0.5f) {
    obj.renderY = targetY;
}

注意事项

  • 你现有Time类的deltaTime计算逻辑完全正确,只需要保证每帧执行逻辑前先调用Time.update()更新deltaTime值即可
  • 该逻辑完全保留原有效果特性:无论目标位置在当前位置的上方还是下方,都会自然平滑减速趋近,不会出现硬跳、匀速移动的生硬感
  • 参数调整非常直观:需要动画更快就调大smoothSpeed,需要更慢更丝滑就调小数值,不需要改动其他逻辑

内容的提问来源于stack exchange,提问作者RareHyperIon

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 11:36:21