vue，requestAnimationFrame动画设置为30fps

要将Vue中的requestAnimationFrame动画设置为30fps，可以使用requestAnimationFrame函数来启动动画，并在每个回调函数中使用setTimeout函数来限制帧速率。

具体实现方法如下：

1. 定义一个变量来记录上一帧的时间戳，初始值为0。

2. 在requestAnimationFrame回调函数中，计算当前时间戳与上一帧时间戳的时间差，如果时间差小于33ms（1000ms / 30fps），则跳过此次动画帧。

3. 如果时间差大于等于33ms，则更新上一帧时间戳为当前时间戳，并执行动画逻辑。

代码示例：

// 定义一个变量来记录上一帧的时间戳
let lastTime = 0;

// 动画回调函数
function animate() {
  // 获取当前时间戳
  const currentTime = Date.now();

  // 计算时间差
  const deltaTime = currentTime - lastTime;

  // 如果时间差小于33ms，则跳过此次动画帧
  if (deltaTime < 33) {
    requestAnimationFrame(animate);
    return;
  }

  // 更新上一帧时间戳
  lastTime = currentTime;

  // 执行动画逻辑
  // ...

  // 重新请求动画帧
  requestAnimationFrame(animate);
}

// 启动动画
requestAnimationFrame(animate);

注意：由于setTimeout函数的精度限制，实际帧速率可能会略低于30fps。如果需要更高的帧率精度，可以考虑使用更高精度的定时器，如requestIdleCallback。