Javascript:动态改变正弦波速度

Question

可能我很笨，但我需要帮助做一件简单的事情。

我想在单击按钮时将正弦波的速度从正常的 2 更改为 10。仅此而已，但我不知道该怎么做。

SineWave.js 的 Github 链接:Sinewave.js

代码:

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: 30
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30
    },
        {
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40
    }
  ],

  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");

    var index = -1;
    var length = this.waves.length;
      while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }

    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

Codepen 示例:

https://codepen.io/anon/pen/GxEKJZ?editors=1010

请帮助我，因为这个我现在快要死了...... (甚至可能是一个很小的变化)

Answer 1

这是一个使用 jQuery 的实现:

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: 30
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30
    },
		{
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40
    }
  ],
 
  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");
    
    var index = -1;
    var length = this.waves.length;
	  while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }
    
    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

$("#change_speed").click(function(){
	waves.options.speed = 10;
});

<script src="https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="waves" width="300" height="180"></canvas>
<button id='change_speed'>Change Speed</button>

更新:

如果您不尝试通过 resizeEvent 函数保留渐变，这里有一个更改颜色的示例:

var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [{
      timeModifier: 4,
      lineWidth: 1,
      amplitude: -25,
      wavelength: 25,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 2,
      lineWidth: 1,
      amplitude: -10,
      wavelength: 30,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    }
  ]
});

$("#change_color").click(function() {
  waves.waves[0].strokeStyle = 'rgba(0, 0, 255, 0.9)';
  waves.waves[1].strokeStyle = 'rgba(255, 0, 255, 0.9)';
  waves.waves[2].strokeStyle = 'rgba(255, 0, 0, 0.9)';
  waves.waves[3].strokeStyle = 'rgba(0, 255, 0, 0.9)';
  waves.waves[4].strokeStyle = 'rgba(0, 255, 225, 0.9)';
  waves.waves[5].strokeStyle = 'rgba(255, 255, 0, 0.9)';
});

<script src="https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="waves" width="300" height="180"></canvas>
<button id='change_color'>Change Color</button>