如何解决是否可以制作正弦曲线的连续 react-native-svg 动画？
我正在尝试使正弦曲线缓慢移动并连续出现，就像这样（右侧的）：
有可能吗？如果是这样，我将如何处理？
解决方法
绘制正弦波的 JavaScript 函数使用 Math.sin() 函数，该函数在 y 轴上给定不同起点时重复调用。请参阅下面的简单图。在这种情况下，draw() 函数通过 window.requestAnimationFrame(draw).
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0,500,500);
showAxes(context);
context.save();
plotSine(context,step,50);
context.restore();
step += 4;
window.requestAnimationFrame(draw);
}
还有一些需要补充的，自己去理解吧。
最终代码
<!DOCTYPE html>
<html>
<head>
<title>Sine Wave</title>
<script type="text/javascript">
function showAxes(ctx,axes) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var xMin = 0;
ctx.beginPath();
ctx.strokeStyle = "rgb(128,128,128)";
// X-Axis
ctx.moveTo(xMin,height/2);
ctx.lineTo(width,height/2);
// Y-Axis
ctx.moveTo(width/2,0);
ctx.lineTo(width/2,height);
// Starting line
ctx.moveTo(0,0);
ctx.lineTo(0,height);
ctx.stroke();
}
function drawPoint(ctx,y) {
var radius = 3;
ctx.beginPath();
// Hold x constant at 4 so the point only moves up and down.
ctx.arc(4,y,radius,2 * Math.PI,false);
ctx.fillStyle = 'red';
ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
}
function plotSine(ctx,xOffset,yOffset) {
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var scale = 20;
ctx.beginPath();
ctx.lineWidth = 2;
ctx.strokeStyle = "rgb(66,44,255)";
// console.log("Drawing point...");
// drawPoint(ctx,yOffset+step);
var x = 4;
var y = 0;
var amplitude = 40;
var frequency = 20;
//ctx.moveTo(x,y);
ctx.moveTo(x,50);
while (x < width) {
y = height/2 + amplitude * Math.sin((x+xOffset)/frequency);
ctx.lineTo(x,y);
x++;
// console.log("x="+x+" y="+y);
}
ctx.stroke();
ctx.save();
console.log("Drawing point at y=" + y);
drawPoint(ctx,y);
ctx.stroke();
ctx.restore();
}
function draw() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0,500);
showAxes(context);
context.save();
plotSine(context,50);
context.restore();
step += 4;
window.requestAnimationFrame(draw);
}
function spirograph() {
var canvas2 = document.getElementById("canvas2");
var context = canvas2.getContext("2d");
showAxes(context);
context.save();
// var imageData = context.getImageData(0,canvas.width,canvas.height);
var step = 4;
for (var i = -4; i < canvas.height; i += step) {
// context.putImageData(imageData,0);
plotSine(context,i,54 + i);
}
}
function init() {
window.requestAnimationFrame(draw);
spirograph();
}
var step = -4;
</script>
</head>
<body onload="init()">
<h3>Oscillating Sine Wave</h3>
<canvas id="canvas" width="500" height="100"></canvas>
<p/>
<h3>Multiple Sine Waves</h3>
<canvas id="canvas2" width="500" height="100"/>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
