1

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

这是我到目前为止所拥有的： https ://codepen.io/madmaxhayden/pen/qBmrGNM

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;
});

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

4

0 回答 0