如何为requestAnimationFrame实现的连续弹跳动画添加缓动效果？

我来拆解这个基于requestAnimationFrame的元素弹跳动画实现——它能让元素在容器的左右边缘之间持续来回运动，核心逻辑其实很直观：

核心实现思路 #

• 先定义两个基础变量：x用来跟踪元素当前的X坐标，vx是元素的水平移动速度（正数值代表向右，负数值代表向左）
• 通过requestAnimationFrame驱动每帧执行的step函数，每次先把速度叠加到位置上，更新元素的当前位置
• 关键的边界检测：
  • 当元素触碰到容器左边界（x < 0）时，把位置修正为1（避免元素完全移出容器），然后反转速度方向（vx = -vx），让元素开始向右移动
  • 当元素触碰到容器右边界时，需要结合容器宽度和元素宽度来判断（x > 容器宽度 - 元素宽度），同样修正位置并反转速度，触发向左移动的逻辑

完整核心代码 #

var x = 50;
var vx = 5;
// 获取容器和元素的DOM节点及尺寸信息
var container = document.querySelector('.container');
var bouncingElement = document.querySelector('.bouncing-element');
var containerWidth = container.offsetWidth;
var elementWidth = bouncingElement.offsetWidth;

var step = function(){
  // 更新元素位置
  x = x + vx;
  
  // 左边界处理
  if(x < 0) {
    x = 1;
    vx = -vx;
  }
  // 右边界处理
  if(x > containerWidth - elementWidth) {
    x = containerWidth - elementWidth - 1;
    vx = -vx;
  }
  
  // 应用位置到元素上
  bouncingElement.style.left = `${x}px`;
  
  // 持续触发下一帧动画
  requestAnimationFrame(step);
};

// 启动动画
requestAnimationFrame(step);

小细节说明 #

• 为什么用requestAnimationFrame而不是setInterval？因为它会和浏览器的刷新周期同步，能最大程度保证动画的流畅度，避免出现掉帧或者不同步的问题
• 修正位置时用1和容器宽度-元素宽度-1，是为了防止元素刚好卡在边界值上，导致每帧都触发边界判断，出现抖动的情况

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