如何实现JS往复循环动画：从-150到150平滑反向过渡？

嘿，我明白你想要的那种无缝往复动画效果了——原来的模运算逻辑确实会导致生硬的跳转，因为它没办法自动反向遍历数值区间。咱们来改一改代码，实现你要的-150→0→150→0→-150→0的平滑循环！

问题根源 #

你原来的代码用(liquifyVal + 1) % 150来更新数值，当liquifyVal到149时，加1变成150，模150直接回到0，跳过了从150往回降到0的过程，这就导致了动画的生硬跳转。

解决方案：用方向变量控制往复 #

我们可以引入一个direction变量，控制数值的增减方向：当数值到达150时，切换为递减；到达-150时，切换为递增。这样就能形成平滑的往复运动，完全避免跳转。

改进后的代码 #

JavaScript部分

let liquifyVal = -150;
let direction = 1; // 1表示递增，-1表示递减

window.setInterval(function() {
  liquifyVal += direction;
  
  // 到达边界时切换方向
  if (liquifyVal === 150) {
    direction = -1;
  } else if (liquifyVal === -150) {
    direction = 1;
  }
  
  document.getElementById('liquid').setAttribute('scale', liquifyVal);
}, 25);

完整代码整合

<h1> Hello </h1>
<svg id="svgeffects">
  <defs>
    <filter class="safari_only" id="liquify">
      <feTurbulence baseFrequency="0.015" numOctaves="2" result="warp" type="fractalNoise"></feTurbulence>
      <feDisplacementMap id="liquid" in="SourceGraphic" in2="warp" scale="150" xChannelSelector="R" yChannelSelector="B"></feDisplacementMap>
    </filter>
  </defs>
</svg>

<style>
h1 {
  filter: url("#liquify");
  font-size: 100px;
}
</style>

<script>
let liquifyVal = -150;
let direction = 1;

window.setInterval(function() {
  liquifyVal += direction;
  
  if (liquifyVal === 150) {
    direction = -1;
  } else if (liquifyVal === -150) {
    direction = 1;
  }
  
  document.getElementById('liquid').setAttribute('scale', liquifyVal);
}, 25);
</script>

更流畅的优化：使用requestAnimationFrame #

如果你想让动画更流畅（避免setInterval可能出现的掉帧问题），可以用requestAnimationFrame代替setInterval，它会在浏览器的每一帧渲染前执行回调，动画效果更丝滑：

let liquifyVal = -150;
let direction = 1;

function updateLiquify() {
  liquifyVal += direction;
  
  if (liquifyVal === 150) {
    direction = -1;
  } else if (liquifyVal === -150) {
    direction = 1;
  }
  
  document.getElementById('liquid').setAttribute('scale', liquifyVal);
  requestAnimationFrame(updateLiquify);
}

// 启动动画
requestAnimationFrame(updateLiquify);

把上面的JS代码替换原来的setInterval部分即可，效果会更平滑。

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