cfc/cfc-frontend/components/wuxing-sandbox-helpers/animation.js

/**
 * wuxing-sandbox-helpers/animation.js
 * 五角星填充动画控制器
 */

/**
 * FillAnimator - 管理 ease-out cubic 填充动画
 * @param {Function} getCurrentTs - 返回当前 5 维插值数组 [0~1]
 * @param {Function} onFrame - 每帧回调，参数为插值后的 ts 数组
 * @param {Function} [onComplete] - 动画完成回调
 */
export function FillAnimator(getCurrentTs, onFrame, onComplete) {
  this._getCurrentTs = getCurrentTs
  this._onFrame = onFrame
  this._onComplete = onComplete || function() {}
  this._timer = null
}

/**
 * 启动动画
 * @param {Array<number>} targetTs - 目标 5 维值 (0~1)
 * @param {number} [duration=600] - 动画时长 ms
 */
FillAnimator.prototype.start = function(targetTs, duration) {
  this.cancel()

  var dur = duration || 600
  var startTime = Date.now()
  var startTs = this._getCurrentTs()
  var self = this

  function step() {
    var elapsed = Date.now() - startTime
    var progress = Math.min(elapsed / dur, 1)
    // ease-out cubic
    var eased = 1 - Math.pow(1 - progress, 3)

    var interpolated = []
    for (var i = 0; i < 5; i++) {
      interpolated.push(startTs[i] + (targetTs[i] - startTs[i]) * eased)
    }

    self._onFrame(interpolated)

    if (progress < 1) {
      self._timer = setTimeout(step, 16)
    } else {
      self._timer = null
      self._onComplete()
    }
  }

  step()
}

/**
 * 取消动画，清理 timer
 */
FillAnimator.prototype.cancel = function() {
  if (this._timer) {
    clearTimeout(this._timer)
    this._timer = null
  }
}