Lively Wallpaper的HTML+JS轮播中函数内给transitionDuration赋值不生效

anime.js 初始化动画时仅会读取传入参数的当前瞬时值存储到实例内部，后续你修改全局变量 transitionDuration 不会自动同步到已创建的动画实例中，因此动画时长始终保留初始化时的3000值。

你需要先保存两个anime动画的实例，在配置回调中修改全局变量后，手动更新实例的时长配置并重启动画让新参数生效。

修改后的完整代码如下： #

var textEl = document.querySelector(".text");
var transitionDuration = 3000;
var imageInterval = 5000;
// 声明变量存储两个动画实例
var transitionAnim, scaleAnim;

function livelyPropertyListener(name, val)
{
    if(name =="transitionDuration")
    {
      // 转换为数字类型，避免滑块返回字符串导致计算错误
      transitionDuration = Number(val);
      textEl.innerHTML = val;

      // 手动更新两个动画实例的时长配置
      transitionAnim.duration = transitionDuration;
      scaleAnim.duration = imageInterval + 2 * transitionDuration;

      // 重启动画让新配置生效
      transitionAnim.restart();
      scaleAnim.restart();
    }
}

var ScaleEasingFunc = 'easeInQuad';

// 将动画实例赋值给变量
transitionAnim = anime({
  targets: '.transition',
  opacity:0,
  direction: 'alternate',
  loop: true,
  easing: 'easeInOutCubic',
  delay: imageInterval/2,
  endDelay: imageInterval/2,
  duration: transitionDuration,
  loopBegin: function(anim) {
    changeImage();
  },
});

scaleAnim = anime({
    targets: '.scale',
    scale:1.1,
    translateX: screen.width*-1/100,
    translateY: screen.width*1/100,
    direction: 'alternate',
    loop: true,
    easing: ScaleEasingFunc,
    duration: imageInterval + 2*transitionDuration,
});

• 如果重启动画出现画面跳变不符合预期，可以不用调用restart()，等待当前轮次动画结束后，下一轮循环会自动使用新的duration值生效。
• 注意确认滑块返回的val值为数字类型，避免字符串和数字拼接导致时长计算异常。

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