使用 web 动画 API (waapi) 在几个元素上切换动画的播放率

问题描述

我正在尝试制作一个控制 SVG 动画的切换按钮。它需要在正常和快速播放速度之间切换。理想情况下，最终目标是还设置一个计时器，以便它也能减慢启动/停止速度 - 但我似乎无法将回放速率应用于我存储在 var 中的元素数组。我不是 JS 专家，但我认为我的数组有问题，或者只是没有定义我尝试应用 playbackRate 的实际动画。

这是我目前所拥有的： here (3)

var alldashes = document.getElementsByClassName('dash');
allwaves = Array.prototype.slice.call(alldashes);
// console.log(allwaves);

//var waveframes = {strokeDashoffset: 0,stroke: "#19D8FF",strokeDashoffset: 2000}
var timings =  {duration: 2000,easing: "linear",direction: "normal",iterations: Infinity,fill: 'both',playbackRate: 20}

// Set playback speed
function slowdown() {
  setInterval( function() {
    allwaves.playbackRate = 0.5;
  },3000);
}


// Toggle Button for Animation
var playbutton = document.getElementById('playsample');
var isPlaying = true;

function getRandomInt(min,max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min) + min);
}

playbutton.addEventListener("click",function() {
  if(isPlaying) {
    console.log("fast");  
    
    allwaves.forEach(function(el,i) {
    timings.delay = i * getRandomInt(0,500);
      el.animate([
        {strokeDashoffset: 0},{stroke: "#19D8FF"},{strokeDashoffset: 2000}
      ],timings);
      });
    
    
} else {
  console.log("slow");
  slowdown();


}
isPlaying = !isPlaying;
});

播放按钮对每个元素的动画应用随机延迟..但减速功能似乎没有任何效果。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）