要在值更改时重置动画，可以使用stop方法中断正在进行的动画，然后使用新字符串重新启动它。

var testText = $('.test-text');
var animationInterval;

function wallpaperMediaPropertiesListener(event) {
  // event.title receives a random string at a random time.
  if (!event.title) {
    testText.text('\u200B');
  } else {
    if (animationInterval) {
      // If there is an ongoing animation, stop it
      testText.stop();
      clearInterval(animationInterval);
    }

    testText.text(event.title);

    var textWidth = testText.outerWidth();
    let gapSize = 30;

    if (textWidth > $('#line2').width()) {
      var testTextCopy = $('<div></div>')
        .addClass('test-text-copy')
        .css({
          'margin-left': gapSize,
        })
        .insertAfter(testText)
        .text(testText.text());

      function animateText() {
        animationInterval = setInterval(function() {
          testText.animate({ 'margin-left': -(textWidth + gapSize) }, {
            duration: textWidth * 30,
            easing: 'linear',
            complete: function() {
              testText.css('margin-left', 0);
            }
          });
        }, 1000);
      }

      animateText();
    }
  }
}

window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);

字符串

animationInterval变量用于跟踪正在进行的动画。当接收到新字符串时，它会检查是否有正在进行的动画（设置了animationInterval），并使用**testText.stop（）和clearInterval（animationInterval）停止动画。**之后，它会使用新字符串重新启动动画。
更新

问题是textWidth和testTextCopy在动画循环中没有正确更新。

var testText = $('.test-text');
var animationInterval;

function wallpaperMediaPropertiesListener(event) {
  // event.title receives a random string at a random time.
  if (!event.title) {
    testText.text('\u200B');
  } else {
    if (animationInterval) {
      // If there is an ongoing animation, stop it
      testText.stop();
      clearInterval(animationInterval);
    }

    testText.text(event.title);

    var textWidth = testText.outerWidth();
    let gapSize = 30;

    if (textWidth > $('#line2').width()) {
      var testTextCopy = $('<div></div>')
        .addClass('test-text-copy')
        .css({
          'margin-left': gapSize,
        })
        .insertAfter(testText)
        .text(testText.text());

      function animateText() {
        testText.animate({ 'margin-left': -(textWidth + gapSize) }, {
          duration: textWidth * 30,
          easing: 'linear',
          step: function(now) {
            // Update text and width for each step of the animation
            var progress = now / -(textWidth + gapSize);
            var currentWidth = testText.outerWidth();
            textWidth = currentWidth > textWidth ? currentWidth : textWidth;
            testTextCopy.text(testText.text());
          },
          complete: function() {
            // Reset margin-left for the next cycle
            testText.css('margin-left', 0);

            // Restart the animation
            animateText();
          }
        });
      }

      // Add a delay before starting the animation
      setTimeout(function() {
        animateText();
      }, 1000);
    }
  }
}

window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);

型
您可以使用requestAnimationFrame对动画进行更平滑的控制。

var testText = $('.test-text');
var animationFrame;
var animationStartTime;
var animationDuration = 3000; // Adjust the duration as needed
var animationDelay = 1000; // Delay before starting animation

function wallpaperMediaPropertiesListener(event) {
  if (!event.title) {
    testText.text('\u200B');
  } else {
    if (animationFrame) {
      // If there is an ongoing animation, cancel it
      cancelAnimationFrame(animationFrame);
    }

    testText.text(event.title);

    var textWidth = testText.outerWidth();
    let gapSize = 30;

    if (textWidth > $('#line2').width()) {
      var testTextCopy = $('<div></div>')
        .addClass('test-text-copy')
        .css({
          'margin-left': gapSize,
        })
        .insertAfter(testText)
        .text(testText.text());

      function animateText(timestamp) {
        if (!animationStartTime) {
          animationStartTime = timestamp;
        }

        var progress = (timestamp - animationStartTime) / animationDuration;
        var marginLeft = -(progress * (textWidth + gapSize));

        testText.css('margin-left', marginLeft);

        if (progress < 1) {
          // Continue the animation
          animationFrame = requestAnimationFrame(animateText);
        } else {
          // Reset values for the next cycle
          testText.css('margin-left', 0);
          animationStartTime = null;

          // Restart the animation after a delay
          setTimeout(function() {
            animateText();
          }, animationDelay);
        }
      }

      // Start the animation after a delay
      setTimeout(function() {
        animateText();
      }, animationDelay);
    }
  }
}

window.wallpaperRegisterMediaPropertiesListener(wallpaperMediaPropertiesListener);

型