如何在PixiJS中实现进度条的平滑补间动画效果

PIXI自带的Ticker和渲染循环完全同步，不会出现定时器和渲染帧率不匹配导致的掉帧、卡顿问题，是进度条补间的首选方案：

// 作用域内提前定义变量
let currentProgress = 0 // 当前实际渲染的进度值
let targetProgress = 0 // 最终要到达的目标进度值
const easeFactor = 0.12 // 动画缓动系数，数值越小动画越平缓，可自行调整

// 缓入缓出三次函数，输入t范围0-1，输出0-1，需要非线性缓动时可以用
function easeInOutCubic(t) {
  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
}

// 绑定到PIXI全局渲染循环，每帧自动执行
PIXI.Ticker.shared.add(() => {
  // 线性缓动计算，需要非线性效果可替换为上面的easeInOutCubic做映射
  currentProgress += (targetProgress - currentProgress) * easeFactor
  // 修正浮点误差，快到目标值时直接对齐避免无限逼近
  if (Math.abs(targetProgress - currentProgress) < 0.01) {
    currentProgress = targetProgress
  }
  // 同步更新进度条位置
  progressBar.x = x + currentProgress
  progressBar.y = y
})

// 后续进度更新时，只需要修改targetProgress即可，不需要直接操作position
// 示例：进度更新到70%时执行
targetProgress = 70

如果需要更丰富的缓动效果、动画回调、暂停/取消控制，可直接用兼容PIXI的补间库，内部已经做了性能优化，仅需少量代码即可实现：

// 进度更新时调用，0.3为动画时长（单位：秒），可自行调整
gsap.to(progressBar.position, {
  x: x + newProgress,
  y: y,
  duration: 0.3,
  ease: "power3.inOut" // 内置数十种缓动效果可直接选用
})

• 不要用setInterval实现补间，定时器的执行时机和PIXI渲染帧不同步，容易出现卡顿、跳帧问题
• 若存在多个进度条同时动画，把所有进度的更新逻辑合并到同一个Ticker回调中执行，性能比每个进度单独开回调更好

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