如何通过点击按钮动态修改SineWave.js的正弦波速度

嘿，我来帮你解决这个点击按钮没法修改正弦波速度的问题！其实方法很简单，咱们一步步来：

第一步：先准备好触发按钮 #

首先你得有个能触发速度修改的按钮，比如在HTML里加这么一行：

<button id="speedUpBtn">把速度调到10</button>

第二步：给按钮绑定事件，修改速度值 #

接下来在你的JS代码里，给这个按钮加个点击事件处理函数，直接修改waves实例的speed属性就行——因为SineWave.js的动画循环会实时读取这个属性，改完马上就生效：

document.getElementById('speedUpBtn').addEventListener('click', function() {
  // 直接把速度改成10
  waves.speed = 10;
  // 要是改完没反应，试试加下面这行（部分旧版本库可能需要重启动画）
  // waves.restart();
});

为啥之前的尝试没成功？ #

你之前可能踩了这两个坑：

• 实例引用不对：得确保waves这个变量在事件函数里能访问到——要么把它设成全局变量，要么让事件函数和它处于同一个作用域。
• 旧版本库需要重启动画：有些早期的SineWave.js版本，改完属性得调用restart()才能让新配置生效，要是直接改speed没效果，就把上面注释的那行代码打开试试。

完整示例代码给你参考 #

<div id="waves"></div>
<button id="speedUpBtn">把速度调到10</button>

<script src="sine-waves.min.js"></script>
<script>
// 初始化正弦波实例
var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [
    { timeModifier: 4, lineWidth: 1, amplitude: -25, wavelength: 25 },
    { timeModifier: 2, lineWidth: 1, amplitude: -10, wavelength: 50 }
  ]
});

// 绑定按钮点击事件
document.getElementById('speedUpBtn').addEventListener('click', function() {
  waves.speed = 10;
  // 可选：如果上面的代码不生效，取消下面这行的注释
  // waves.restart();
});
</script>

这样点击按钮之后，正弦波的速度就会从默认的2变成10啦！

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