正弦波动画
Sine Wave Animation
这是我想要达到的效果:link
我得到了四个波浪,它们确实是动画的,但我一直坚持为每个波浪赋予略微不同的动画效果。在当前点,所有曲线以相同的速度、相同的方向移动并且也在相同的位置切换。它们在所有这些方面都应该略有不同。我正在寻找的最终结果非常像我发布的 link ,不同之处在于每个波最多只能有一个周期,即上升一次和下降一次。谢谢您的意见。
下面是我的代码:
function start() {
var canvas = $("canvas");
console.log(canvas);
canvas.each(function(index, canvas) {
var context = canvas.getContext("2d");
canvas.width = $(".box").eq(index).width();
canvas.height = $(".box").eq(index).height();
context.clearRect(0, 0, canvas.width, canvas.height);
drawCurves(context, step);
step += 1;
});
requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.lineWidth = 2;
for (i = 0; i < 4 ; i++) {
var x = 0;
var y = 0;
ctx.beginPath();
if (i === 0 ) {
ctx.strokeStyle = "red";
var amplitude = 20;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
} if ( i === 1) {
ctx.strokeStyle = "blue";
var amplitude = 30;
var frequency = (height / (2 * Math.PI));
console.log(i, frequency);
} if ( i === 2) {
ctx.strokeStyle = "green";
var amplitude = 40;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
} if (i === 3) {
ctx.strokeStyle = "yellow";
var amplitude = 50;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
}
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
while (y < height) {
x = (width / 2) + (amplitude * Math.sin((y + step) / frequency)) ;
ctx.lineTo(x, y);
y++;
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
$(document).ready(function() {
start();
})
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">
<canvas id="canvas"></canvas>
</div>
<div class="box">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
还有一个Code Pen
您的代码只绘制了一个正弦波。
我会建议你这些要点:
_如果你想要不同的(同时)波,你必须在绘图点使用不同的 x/y 值。
_你使用 $(document).ready(function() 作为动画循环,这不是更好的方法。对于动画你应该设置一个 setInterval 或者更好地使用 requestAnimationFrame 来创建动画。在每个动画循环中绘制 4 条正弦线,我会忘记使用对象而不是我认为更好的步骤,但这并不重要。我没有时间尝试您的代码,但使用 requestAnimationFrame(start) 时它在做什么()) 而不是 $document.ready ?
显然在每个动画中使用 clearRect(width,height); 清除绘图位置;例如。
_这4步在同一个笛卡尔方程中将+1到+4加到y。在人眼无法真正看到的正弦曲线中,因为它的变化非常微小。您可以对每个 step/object 使用不同的正弦方程使用不同的方程,即 Math.sin(y)+10 或 Math.sin(y)*10 等...甚至每个不同的增量值不同的对象。
_我将避免翻译并使用 for 循环来增加 x 值并使用 sin(x) 和您需要的任何方程式获得 y 值,这是个人选择,但将避免编写 .translate() 行并将使用法线坐标而不是移动坐标,因此您可以轻松地在 console.log 中看到 canvas 区域中的真实坐标。
_与之前一样,如果您在数组中使用对象(并循环它)并为 4 个对象中的每一个设置样式颜色和权重,则可以在程序开始时丢弃检查 IF。
希望对您有所帮助,没时间编写干净的代码。
@enxaneta 感谢您的输入!按照我想要的方式得到它,下面是我的解决方案:
var step = 0;
function start(timestamp) {
var canvas = $("canvas");
canvas.each(function(index, canvas) {
var context = canvas.getContext("2d");
canvas.width = $(".box").eq(index).width();
canvas.height = $(".box").eq(index).height();
context.clearRect(0, 0, canvas.width, canvas.height);
if (canvas.height > 1000 ) {
drawWave(context, 20,"sin");
drawWave(context, 60,"cos");
drawWave(context, 40,"sin");
drawWave(context, 80,"cos");
}
if (canvas.height < 1000 ) {
drawWave(context, 10,"sin");
drawWave(context, 30,"cos");
drawWave(context, 20,"sin");
drawWave(context, 40,"cos");
}
step = timestamp / 7;
});
window.requestAnimationFrame(start);
}
function drawWave(ctx,amplitude,trig){
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "blue";
var x = 0;
var y = 0;
var frequency = height / (2 * Math.PI);
ctx.save();
ctx.translate(-amplitude * Math[trig](step / frequency), 0);
while (y < height) {
x = width / 2 + amplitude * Math[trig]((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
// ctx.closePath();
ctx.stroke();
ctx.restore();
}
$(document).ready(function() {
start();
});
canvas {
background-color: wheat;
position: absolute;
}
.box {
width: 500px;
height: 2000px;
border: solid;
}
.box.t {
width: 500px;
height: 200px;
border: solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box t">
<canvas id="canvas"></canvas>
</div>
<div class="box">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
这是我想要达到的效果:link
我得到了四个波浪,它们确实是动画的,但我一直坚持为每个波浪赋予略微不同的动画效果。在当前点,所有曲线以相同的速度、相同的方向移动并且也在相同的位置切换。它们在所有这些方面都应该略有不同。我正在寻找的最终结果非常像我发布的 link ,不同之处在于每个波最多只能有一个周期,即上升一次和下降一次。谢谢您的意见。
下面是我的代码:
function start() {
var canvas = $("canvas");
console.log(canvas);
canvas.each(function(index, canvas) {
var context = canvas.getContext("2d");
canvas.width = $(".box").eq(index).width();
canvas.height = $(".box").eq(index).height();
context.clearRect(0, 0, canvas.width, canvas.height);
drawCurves(context, step);
step += 1;
});
requestAnimationFrame(start);
}
var step = -1;
function drawCurves(ctx, step) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.lineWidth = 2;
for (i = 0; i < 4 ; i++) {
var x = 0;
var y = 0;
ctx.beginPath();
if (i === 0 ) {
ctx.strokeStyle = "red";
var amplitude = 20;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
} if ( i === 1) {
ctx.strokeStyle = "blue";
var amplitude = 30;
var frequency = (height / (2 * Math.PI));
console.log(i, frequency);
} if ( i === 2) {
ctx.strokeStyle = "green";
var amplitude = 40;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
} if (i === 3) {
ctx.strokeStyle = "yellow";
var amplitude = 50;
var frequency = height / (2 * Math.PI) ;
console.log(i, frequency);
}
ctx.save();
ctx.translate(-amplitude * Math.sin(step / frequency), 0);
while (y < height) {
x = (width / 2) + (amplitude * Math.sin((y + step) / frequency)) ;
ctx.lineTo(x, y);
y++;
}
ctx.closePath();
ctx.stroke();
ctx.restore();
}
}
$(document).ready(function() {
start();
})
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box">
<canvas id="canvas"></canvas>
</div>
<div class="box">
<canvas id="canvas"></canvas>
</div>
</body>
</html>
还有一个Code Pen
您的代码只绘制了一个正弦波。 我会建议你这些要点:
_如果你想要不同的(同时)波,你必须在绘图点使用不同的 x/y 值。
_你使用 $(document).ready(function() 作为动画循环,这不是更好的方法。对于动画你应该设置一个 setInterval 或者更好地使用 requestAnimationFrame 来创建动画。在每个动画循环中绘制 4 条正弦线,我会忘记使用对象而不是我认为更好的步骤,但这并不重要。我没有时间尝试您的代码,但使用 requestAnimationFrame(start) 时它在做什么()) 而不是 $document.ready ? 显然在每个动画中使用 clearRect(width,height); 清除绘图位置;例如。
_这4步在同一个笛卡尔方程中将+1到+4加到y。在人眼无法真正看到的正弦曲线中,因为它的变化非常微小。您可以对每个 step/object 使用不同的正弦方程使用不同的方程,即 Math.sin(y)+10 或 Math.sin(y)*10 等...甚至每个不同的增量值不同的对象。 _我将避免翻译并使用 for 循环来增加 x 值并使用 sin(x) 和您需要的任何方程式获得 y 值,这是个人选择,但将避免编写 .translate() 行并将使用法线坐标而不是移动坐标,因此您可以轻松地在 console.log 中看到 canvas 区域中的真实坐标。
_与之前一样,如果您在数组中使用对象(并循环它)并为 4 个对象中的每一个设置样式颜色和权重,则可以在程序开始时丢弃检查 IF。
希望对您有所帮助,没时间编写干净的代码。
@enxaneta 感谢您的输入!按照我想要的方式得到它,下面是我的解决方案:
var step = 0;
function start(timestamp) {
var canvas = $("canvas");
canvas.each(function(index, canvas) {
var context = canvas.getContext("2d");
canvas.width = $(".box").eq(index).width();
canvas.height = $(".box").eq(index).height();
context.clearRect(0, 0, canvas.width, canvas.height);
if (canvas.height > 1000 ) {
drawWave(context, 20,"sin");
drawWave(context, 60,"cos");
drawWave(context, 40,"sin");
drawWave(context, 80,"cos");
}
if (canvas.height < 1000 ) {
drawWave(context, 10,"sin");
drawWave(context, 30,"cos");
drawWave(context, 20,"sin");
drawWave(context, 40,"cos");
}
step = timestamp / 7;
});
window.requestAnimationFrame(start);
}
function drawWave(ctx,amplitude,trig){
var width = ctx.canvas.width;
var height = ctx.canvas.height;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "blue";
var x = 0;
var y = 0;
var frequency = height / (2 * Math.PI);
ctx.save();
ctx.translate(-amplitude * Math[trig](step / frequency), 0);
while (y < height) {
x = width / 2 + amplitude * Math[trig]((y + step) / frequency);
ctx.lineTo(x, y);
y++;
}
// ctx.closePath();
ctx.stroke();
ctx.restore();
}
$(document).ready(function() {
start();
});
canvas {
background-color: wheat;
position: absolute;
}
.box {
width: 500px;
height: 2000px;
border: solid;
}
.box.t {
width: 500px;
height: 200px;
border: solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="box t">
<canvas id="canvas"></canvas>
</div>
<div class="box">
<canvas id="canvas"></canvas>
</div>
</body>
</html>