前端交互中的数学函数

value = f(time)

x(t) = 100 * t

x(t) = start + (end - start) * easing(t)

linear(t) = t

easeInQuad(t) = t^2
easeInCubic(t) = t^3
easeInQuart(t) = t^4
easeInQuint(t) = t^5

easeOutQuad(t) = 1 - (1 - t)^2
easeOutCubic(t) = 1 - (1 - t)^3
easeOutQuart(t) = 1 - (1 - t)^4
easeOutQuint(t) = 1 - (1 - t)^5

easeInOutQuad(t) =
  t < 0.5
    ? 2 * t^2
    : 1 - (-2 * t + 2)^2 / 2

easeInSine(t) = 1 - cos((t * PI) / 2)
easeOutSine(t) = sin((t * PI) / 2)
easeInOutSine(t) = -(cos(PI * t) - 1) / 2

easeOutExpo(t) = t === 1 ? 1 : 1 - 2^(-10 * t)
easeInExpo(t) = t === 0 ? 0 : 2^(10 * t - 10)

easeOutCirc(t) = sqrt(1 - (t - 1)^2)
easeInCirc(t) = 1 - sqrt(1 - t^2)

easeOutBack(t) = 1 + c3 * (t - 1)^3 + c1 * (t - 1)^2

easeOutElastic(t) =
  t === 0 ? 0 :
  t === 1 ? 1 :
  2^(-10 * t) * sin((t * 10 - 0.75) * c4) + 1

easeOutBounce(t) =
  分段模拟多次落地反弹

x(t) = target + A * e^(-damping * t) * cos(frequency * t)

step(t) = t < threshold ? 0 : 1

clamp(value, min, max) = min(max(value, min), max)

lerp(start, end, t) = start + (end - start) * t

progress = easeOutCubic(t)
x = lerp(0, 100, progress)

smoothstep(t) = t * t * (3 - 2 * t)

0 <= t < 0.2:
  p = fastStart(t)
 
0.2 <= t < 0.8:
  p = steadyMove(t)
 
0.8 <= t <= 1:
  p = slowEnd(t)

value = base + noise(t) * amplitude

cubic-bezier(x1, y1, x2, y2)

transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

进入：ease-out
退出：ease-in
状态切换：ease-in-out

0s - 1s：快速到 20%
1s - 5s：逐步到 70%
5s 以后：慢慢逼近 95%
完成后：补到 100%

0 <= t < 1:
  p = 20 * easeOutCubic(t)
 
1 <= t < 5:
  p = 20 + 50 * easeOutCubic((t - 1) / 4)
 
t >= 5:
  p = 95 - 25 * e^(-0.25 * (t - 5))

type SimulatedProgressOptions = {
  limit?: number
  tick?: number
  onChange?: (value: number) => void
}
 
type SimulatedProgressStatus = 'idle' | 'running' | 'done' | 'error'
 
export class SimulatedProgress {
  private value = 0
  private limit: number
  private tick: number
  private timer: number | null = null
  private status: SimulatedProgressStatus = 'idle'
  private startedAt = 0
  private onChange?: (value: number) => void
 
  constructor(options: SimulatedProgressOptions = {}) {
    this.limit = options.limit ?? 95
    this.tick = options.tick ?? 100
    this.onChange = options.onChange
  }
 
  start() {
    if (this.status === 'running') return
 
    this.status = 'running'
    this.startedAt = Date.now()
    this.value = 0
    this.emit()
 
    this.timer = window.setInterval(() => {
      if (this.status !== 'running') return
 
      const elapsed = (Date.now() - this.startedAt) / 1000
      this.value = calculateSimulatedProgress(elapsed, this.limit)
      this.emit()
    }, this.tick)
  }
 
  done() {
    this.clear()
    this.status = 'done'
    this.value = 100
    this.emit()
  }
 
  fail() {
    this.clear()
    this.status = 'error'
    this.emit()
  }
 
  reset() {
    this.clear()
    this.status = 'idle'
    this.value = 0
    this.emit()
  }
 
  private emit() {
    this.onChange?.(Math.round(this.value))
  }
 
  private clear() {
    if (this.timer) {
      window.clearInterval(this.timer)
      this.timer = null
    }
  }
}
 
function calculateSimulatedProgress(elapsed: number, limit = 95) {
  if (elapsed < 1) {
    return 20 * easeOutCubic(elapsed)
  }
 
  if (elapsed < 5) {
    return 20 + 50 * easeOutCubic((elapsed - 1) / 4)
  }
 
  const value = limit - 25 * Math.exp(-0.25 * (elapsed - 5))
  return Math.min(limit, value)
}
 
function easeOutCubic(x: number) {
  const safeX = Math.max(0, Math.min(1, x))
  return 1 - Math.pow(1 - safeX, 3)
}

const progress = new SimulatedProgress({
  onChange(value) {
    renderProgress(value)
  }
})
 
async function submitTask() {
  progress.reset()
  progress.start()
 
  try {
    await requestCreateTask()
    progress.done()
  } catch (error) {
    progress.fail()
    showError(error)
  }
}

上传文件：真实 upload progress，0% -> 60%
服务端解析：模拟进度，60% -> 90%
入库完成：补齐到 100%

queued     -> 10%
processing -> 40% - 85% 模拟进度
finalizing -> 90%
success    -> 100%
failed     -> error

正在提交任务...
正在生成内容...
正在整理结果...
即将完成...