JS循环向前运行，到达终点然后无限期地向后和向前运行

Question

我正在使用一些改变HTML属性值的JS，它使用setInterval，从0到150，达到150并再次回到0。

我正在努力研究是否有可能达到目的，然后向后跑，如：

-150 ==＆gt; 0 ==＆gt; 150 ==＆gt; 0 ==＆gt; -150 ==＆gt; 0等

这是我目前正在使用的代码：

roll_out = gru(h0, step_number = 10)

var liquifyVal = -150
window.setInterval(function() {
  liquifyVal = (liquifyVal + 1) % 150;
  document.getElementById('liquid').setAttribute('scale', liquifyVal);
}, 25);

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

在此处https://jsfiddle.net/8efk2a1q/（认为这仅适用于Chrome）

设计解释明智，因此动画没有震撼的结束，而是有一个无缝的后退和前进。

任何帮助都会很棒！

感谢。

Answer 1

您可以在循环之外声明increment变量，并在达到峰值/谷值时为其分配1或-1。只选择一次中的元素，而不是每次间隔运行时反复选择元素也会更好：

const liquid = document.getElementById('liquid');
let liquifyVal = -150;
let increment = 1;
setInterval(() => {
  liquifyVal += increment;
  if (liquifyVal === 150) increment = -1;
  else if (liquifyVal === -150) increment = 1;
  liquid.setAttribute('scale', liquifyVal);
}, 25);

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

<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>