js怎样实现元素弹性动画 5种弹性运动公式让交互更生动-js教程-PHP中文网

js怎样实现元素弹性动画 5种弹性运动公式让交互更生动

穿越時空

发布： 2025-06-25 13:46:02

原创

1040人浏览过

实现javascript元素弹性动画的关键在于使用requestanimationframe结合弹性运动公式，主要包括5种常用方法：1. 阻尼振动公式，通过刚度和阻尼系数模拟弹簧震荡；2. 基于时间的缓动函数（如easeoutelastic），提供类似弹性的过渡效果；3. 弹簧物理模型，引入质量参数更真实地模拟弹簧运动；4. 过阻尼弹簧，通过增大阻尼避免震荡；5. 临界阻尼弹簧，通过计算最优阻尼值使物体快速平稳到达目标位置。选择合适的公式取决于所需效果，调整stiffness、damping、mass等参数可控制动画特性，优化方面包括减少dom操作、合理设置停止条件、使用硬件加速，应用场景涵盖下拉刷新、按钮反馈、滚动反弹、拖拽回位等交互设计。

js怎样实现元素弹性动画 5种弹性运动公式让交互更生动

实现JavaScript元素的弹性动画，关键在于理解和应用弹性运动的公式。简单来说，就是模拟弹簧的运动规律，让元素在目标位置附近来回震荡，最终稳定下来。

解决方案

实现弹性动画的核心是使用JavaScript的requestAnimationFrame来创建动画循环，并根据弹性运动公式来更新元素的位置。下面提供5种常用的弹性运动公式，并附带代码示例，让你的交互更生动。

阻尼振动公式（Damped Harmonic Motion）

这是最常用的弹性动画公式，模拟物体在阻力作用下的振动。

公式：acceleration = -stiffness * displacement - damping * velocityvelocity += accelerationposition += velocity
- stiffness：刚度系数，影响弹簧的弹性。
- displacement：位移，当前位置与目标位置的差值。
- damping：阻尼系数，影响阻力的大小。
- velocity：速度。
- acceleration：加速度。
- position：当前位置。
代码示例：

Symanto Text Insights
基于心理语言学分析的数据分析和用户洞察

84

查看详情

function animate(element, target, stiffness, damping) {
  let position = parseFloat(element.style.left) || 0;
  let velocity = 0;

  function update() {
    const displacement = target - position;
    const acceleration = -stiffness * displacement - damping * velocity;
    velocity += acceleration;
    position += velocity;

    element.style.left = position + 'px';

    if (Math.abs(displacement) > 0.1 || Math.abs(velocity) > 0.1) { // 停止条件
      requestAnimationFrame(update);
    } else {
      element.style.left = target + 'px'; // 最终位置
    }
  }

  requestAnimationFrame(update);
}

const element = document.getElementById('myElement');
const targetPosition = 300; // 目标位置
const stiffness = 0.08; // 刚度
const damping = 0.2;   // 阻尼

animate(element, targetPosition, stiffness, damping);

登录后复制

基于时间的缓动函数 (Easing Functions)

虽然不是严格意义上的弹性公式，但某些缓动函数可以模拟弹性效果，例如easeOutElastic。

公式： (这里使用一个常见的easeOutElastic实现)

function easeOutElastic(x) {
  const c4 = (2 * Math.PI) / 3;

  return x === 0
    ? 0
    : x === 1
    ? 1
    : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;
}

登录后复制

代码示例：

function animateEaseOutElastic(element, target, duration) {
  const start = parseFloat(element.style.left) || 0;
  const startTime = performance.now();

  function update(currentTime) {
    const timeElapsed = currentTime - startTime;
    let progress = timeElapsed / duration;
    if (progress > 1) progress = 1;

    const easedProgress = easeOutElastic(progress);
    const position = start + (target - start) * easedProgress;

    element.style.left = position + 'px';

    if (progress < 1) {
      requestAnimationFrame(update);
    } else {
      element.style.left = target + 'px';
    }
  }

  requestAnimationFrame(update);
}

const element = document.getElementById('myElement');
const targetPosition = 300;
const duration = 1000; // 动画时长，毫秒

animateEaseOutElastic(element, targetPosition, duration);

登录后复制

Spring Physics (弹簧物理模型)

更接近真实的弹簧模型，考虑了质量（mass）的影响。

公式：

force = -stiffness * displacementacceleration = force / mass - damping * velocityvelocity += acceleration * deltaTimeposition += velocity * deltaTime
- mass：质量，影响惯性。
- deltaTime：时间间隔，通常是1/60秒。
代码示例：

function animateSpring(element, target, stiffness, damping, mass) {
  let position = parseFloat(element.style.left) || 0;
  let velocity = 0;
  const deltaTime = 1 / 60; // 假设帧率为60fps

  function update() {
    const displacement = target - position;
    const force = -stiffness * displacement;
    const acceleration = force / mass - damping * velocity;
    velocity += acceleration * deltaTime;
    position += velocity * deltaTime;

    element.style.left = position + 'px';

    if (Math.abs(displacement) > 0.1 || Math.abs(velocity) > 0.1) {
      requestAnimationFrame(update);
    } else {
      element.style.left = target + 'px';
    }
  }

  requestAnimationFrame(update);
}

const element = document.getElementById('myElement');
const targetPosition = 300;
const stiffness = 80;
const damping = 10;
const mass = 1;

animateSpring(element, targetPosition, stiffness, damping, mass);

登录后复制

Overdamped Spring (过阻尼弹簧)

当阻尼足够大时，物体不会振荡，而是直接回到目标位置。

公式： 与Spring Physics相同，但damping值较大。
代码示例： (与Spring Physics代码相同，但增加阻尼)

// 使用与Spring Physics相同的animateSpring函数，但修改阻尼值
const element = document.getElementById('myElement');
const targetPosition = 300;
const stiffness = 80;
const damping = 30; // 增加阻尼
const mass = 1;

animateSpring(element, targetPosition, stiffness, damping, mass);

登录后复制

Critically Damped Spring (临界阻尼弹簧)

阻尼刚好能阻止振荡，使物体以最快速度回到目标位置。寻找合适的阻尼值比较麻烦，通常需要根据stiffness和mass进行计算，使得阻尼系数满足临界阻尼的条件。

公式：

damping = 2 * Math.sqrt(stiffness * mass) (计算临界阻尼) 其他公式与Spring Physics相同。
代码示例：

function animateCriticalDampedSpring(element, target, stiffness, mass) {
  let position = parseFloat(element.style.left) || 0;
  let velocity = 0;
  const deltaTime = 1 / 60;
  const damping = 2 * Math.sqrt(stiffness * mass); // 临界阻尼计算

  function update() {
    const displacement = target - position;
    const force = -stiffness * displacement;
    const acceleration = force / mass - damping * velocity;
    velocity += acceleration * deltaTime;
    position += velocity * deltaTime;

    element.style.left = position + 'px';

    if (Math.abs(displacement) > 0.1 || Math.abs(velocity) > 0.1) {
      requestAnimationFrame(update);
    } else {
      element.style.left = target + 'px';
    }
  }

  requestAnimationFrame(update);
}

const element = document.getElementById('myElement');
const targetPosition = 300;
const stiffness = 80;
const mass = 1;

animateCriticalDampedSpring(element, targetPosition, stiffness, mass);

登录后复制

如何选择合适的弹性公式？

选择哪种公式取决于你想要的效果。阻尼振动和Spring Physics更适合需要弹性震荡效果的场景，而过阻尼和临界阻尼则适合快速平滑过渡到目标位置的场景。基于时间的缓动函数则提供了更简单的控制方式。

如何调整弹性动画的参数？

stiffness (刚度)：值越大，弹性越强，震荡频率越高。
damping (阻尼)：值越大，阻力越大，震荡幅度越小，收敛速度越快。
mass (质量)：值越大，惯性越大，震荡幅度越大，收敛速度越慢。
duration (持续时间)：仅在使用基于时间的缓动函数时有效，值越大，动画持续时间越长。

如何优化弹性动画的性能？

避免频繁的DOM操作： 尽量减少element.style.left = position + 'px'的调用次数。
使用requestAnimationFrame： 这是浏览器提供的优化API，能确保动画流畅运行。
合理设置停止条件： 当元素足够接近目标位置时，停止动画，避免不必要的计算。可以通过判断Math.abs(displacement) > 0.1 || Math.abs(velocity) > 0.1这样的条件来停止动画。
使用硬件加速： 通过CSS的transform: translate3d(x, y, z)来触发硬件加速，提高动画性能。