timeFunction ease

实现一个 ease 函数，用于根据指定的时间函数调用 callback，可以按照以下步骤进行：

1. 定义一个 ease 函数，接受时间函数和回调函数作为参数。
2. 在 ease 函数内部，使用 requestAnimationFrame 实现动画效果。
3. 使用时间函数来计算当前动画进度，并调用回调函数。

示例代码

function ease(timeFunction, duration, callback) {
  const startTime = performance.now();

  function animate(currentTime) {
    const elapsedTime = currentTime - startTime;
    const progress = Math.min(elapsedTime / duration, 1);
    const easedProgress = timeFunction(progress);

    callback(easedProgress);

    if (elapsedTime < duration) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 示例时间函数（ease-in-out 函数）
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

// 使用 ease 函数
ease(easeInOutQuad, 2000, (progress) => {
  console.log(`Progress: ${progress}`);
  // 在此处可以更新动画，例如改变元素的样式
});

解释

1. ease 函数:

   • timeFunction: 一个函数，接受当前进度（0 到 1 之间的值）并返回经过处理的进度值。
   • duration: 动画的持续时间（毫秒）。
   • callback: 每次动画帧更新时调用的函数，接受一个参数 progress，表示当前的动画进度。
   • startTime: 动画开始的时间。
   • animate: 一个递归函数，通过 requestAnimationFrame 调用自己，更新动画进度并调用 callback。

2. easeInOutQuad 时间函数:

   • 这是一个简单的 ease-in-out 函数，它根据当前进度返回经过处理的进度值，使动画开始和结束时较慢，中间较快。

3. 使用 ease 函数:

   • 调用 ease 函数，传入时间函数、持续时间和回调函数。
   • 在回调函数中，更新动画进度，例如改变 DOM 元素的样式。

这个示例展示了如何创建一个通用的 ease 函数来处理动画效果。你可以根据需要修改时间函数和回调函数，实现不同的动画效果。

timeFunction

// 线性
function linear(t) {
  return t;
}

// 缓入
function easeInQuad(t) {
  return t * t;
}

// 缓出
function easeOutQuad(t) {
  return t * (2 - t);
}

// 缓入缓出
function easeInOutQuad(t) {
  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
}

// 缓入立方
function easeInCubic(t) {
  return t * t * t;
}

// 缓出立方
function easeOutCubic(t) {
  return (--t) * t * t + 1;
}

// 缓入缓出立方
function easeInOutCubic(t) {
  return t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}

// 缓入四次方
function easeInQuart(t) {
  return t * t * t * t;
}

// 缓出四次方
function easeOutQuart(t) {
  return 1 - (--t) * t * t * t;
}

// 缓入缓出四次方
function easeInOutQuart(t) {
  return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t;
}

// 缓入五次方
function easeInQuint(t) {
  return t * t * t * t * t;
}

// 缓出五次方
function easeOutQuint(t) {
  return 1 + (--t) * t * t * t * t;
}

// 缓入缓出五次方
function easeInOutQuint(t) {
  return t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t;
}