如何基于requestAnimationFrame API实现动态JavaScript文字动画？

针对你需要给文字动画自定义目标元素和文本的需求，以下是几种无需外部依赖的实现方案，核心是绕开requestAnimationFrame只能传时间戳参数的限制：

方案1：闭包封装参数（推荐） #

利用闭包特性，将目标元素和文本作为外层函数的局部变量，返回一个仅接收时间戳的动画函数，内部自然能访问到自定义参数，同时还能封装动画状态（如当前字符索引）：

function createTextAnimator(targetElement, targetText) {
  let currentCharIndex = 0;
  
  // 返回适配requestAnimationFrame的动画函数
  return function animate(timestamp) {
    if (currentCharIndex < targetText.length) {
      targetElement.textContent += targetText[currentCharIndex];
      currentCharIndex++;
      requestAnimationFrame(animate);
    } else {
      // 动画结束后可重置状态，方便复用
      currentCharIndex = 0;
    }
  };
}

// 使用示例
const demoEl = document.getElementById('demo');
const animateFn = createTextAnimator(demoEl, '这是自定义的动画文本！');
// 启动动画
requestAnimationFrame(animateFn);
// 后续如需重新启动，直接调用requestAnimationFrame(animateFn)即可

方案2：通过bind绑定this传递参数 #

将自定义参数挂载到this对象上，用bind绑定后传入requestAnimationFrame，动画函数通过this访问参数：

function animate(timestamp) {
  const { el, txt } = this;
  this.currentIndex = this.currentIndex || 0;
  
  if (this.currentIndex < txt.length) {
    el.textContent += txt[this.currentIndex];
    this.currentIndex++;
    requestAnimationFrame(animate.bind(this));
  }
}

// 使用示例
const targetEl = document.getElementById('target');
requestAnimationFrame(animate.bind({
  el: targetEl,
  txt: '通过bind绑定参数实现动画',
  currentIndex: 0
}));

方案3：立即执行函数（IIFE）包裹参数 #

在调用requestAnimationFrame时，用立即执行函数直接注入自定义参数，返回动画函数：

const targetEl = document.getElementById('demo');
const targetTxt = '用IIFE传递参数的文字动画';
let currentIndex = 0;

requestAnimationFrame((function(el, txt) {
  return function animate(timestamp) {
    if (currentIndex < txt.length) {
      el.textContent += txt[currentIndex];
      currentIndex++;
      requestAnimationFrame(animate);
    }
  };
})(targetEl, targetTxt));

以上方案均为原生JavaScript实现，无需外部依赖，你可以根据代码结构和复用需求选择合适的方式，轻松实现多元素、多文本的自定义文字动画。

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