Question

可能我很愚蠢，但我需要一些简单的帮助。

我想在点击一个按钮时将正弦波的速度从正常2改为10。没有更多，但我无法弄清楚如何做到这一点。

Github链接到SineWave.js：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

如果您查看wave对象，您会看到它在选项中有一个速度参数，因此您可以更改速度：


INSERT INTO PortalMap (CompanyID, Position, Title, Description, Url, Expanded, IsFolder, ScreenID, CompanyMask, NodeID, ParentID, CreatedByID, CreatedByScreenID, CreatedDateTime, LastModifiedByID, LastModifiedByScreenID, LastModifiedDateTime)
SELECT CompanyID, 1036, Title, Description, Url, Expanded, IsFolder, ScreenID, CompanyMask, NodeID, '84351BC9-BF6C-48B5-9DEA-F8207283B64A', CreatedByID, CreatedByScreenID, CreatedDateTime, LastModifiedByID, LastModifiedByScreenID, LastModifiedDateTime FROM SiteMap WHERE ScreenID = 'AU000000' AND CompanyID = 1

Answer 2

这是一个使用jQuery的实现：

＆＃13;

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

＆＃13;

<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>

＆＃13;

<强>更新

如果您没有尝试通过resizeEvent函数保留渐变，那么这是一个更改颜色的示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Javascript：动态更改正弦波速度

2 个答案: