Javascript+；svg，在两个给定点之间绘制窦（波）线

我正在尝试用svg编写javascript加载程序。这个想法是，它是一个从底部到顶部在两侧均匀填充的圆，加载器的顶线是一个从左到右连续移动的正弦波

我能够根据百分比为加载器创建一个弧，如下所示：

    var d_arc = function(x, y, r, sa, ea) { // calculate arc path from given parameters
        var start = pfa(x, y, r, ea),
            end = pfa(x, y, r, sa),
            sw = ea - sa <= 180 ? '0' : '1';

        return '<path d="M ' + start.x + ' ' + start.y + ' A ' + r + ' ' + r + ' 0 ' + sw + ' 0 ' + end.x + ' ' + end.y + '" class="path-progress"></path>';
    };

var d_弧=函数（x，y，r，sa，ea）{//根据给定参数计算弧路径
var启动=pfa（x，y，r，ea），
结束=pfa（x，y，r，sa），
sw=ea-sa此示例通过正弦波的参数方程创建多段线动画。它还使用了Paul Lebeau对遮罩圆的建议。它将根据百分比选择在圆上下移动



正弦波动画
设置正弦波动画，使用参数化方程构建多段线。通过百分比选择将其上移/下移一圈。
百分比：
10%
30%
50%
80%
正弦波函数（振幅）
{
//---遮罩填充圆的底部
var startPoint=[0400]
var端点=[400400]
var originX=0
var percent=parseFloat（percentSelect.options[percentSelect.selectedIndex].value）
原始风险值=400*（百分之一）
可变宽度=400
变量点间距=1
var angularFrequency=.02
无功相位角=90
变量原点={//轴的原点
x:originX，
y:原创
}
变量点=[]
点。推（起始点）
变量x，y
对于（变量i=0；i<宽度/点间距；i++）
{
x=i*点间距+原点.x
y=数学sin（角度频率*（i+相位角度））*振幅+原点y
点。推送（[x，y]）
}
点推送（端点）
sineWave.setAttribute（“点”，points.join（“”））
}
函数animateSineWave（）
{
var范围=60/--振幅+/----
var FPS=120/---每秒帧数---
var持续时间=2000/--ms，2秒---
//----核心动画功能---
新动画(
{
延迟：1000/FPS，
持续时间：持续时间，
delta：线性，
输出：函数（增量）
{
如果（增量1）进度=1
这个。进步=进步
var delta=选项。delta（进度）
选项。输出（增量）
如果（进度==1）清除间隔（iT）；
}，选项。延迟）
}
此示例通过正弦波的参数方程创建多段线动画。它还使用Paul Lebeau关于遮罩圆的建议。它将根据百分比选择在圆上下移动



正弦波动画
设置正弦波动画，使用参数化方程构建多段线。通过百分比选择将其上移/下移一圈。
百分比：
10%
30%
50%
80%
正弦波函数（振幅）
{
//---遮罩填充圆的底部
var startPoint=[0400]
var端点=[400400]
var originX=0
var percent=parseFloat（percentSelect.options[percentSelect.selectedIndex].value）
原始风险值=400*（百分之一）
可变宽度=400
变量点间距=1
var angularFrequency=.02
无功相位角=90
变量原点={//轴的原点
x:originX，
y:原创
}
变量点=[]
点。推（起始点）
变量x，y
对于（变量i=0；i<宽度/点间距；i++）
{
x=i*点间距+原点.x
y=数学sin（角度频率*（i+相位角度））*振幅+原点y
点。推送（[x，y]）
}
点推送（端点）
sineWave.setAttribute（“点”，points.join（“”））
}
函数animateSineWave（）
{
var范围=60/--振幅+/----
var FPS=120/---每秒帧数---
var持续时间=2000/--ms，2秒---
//----核心动画功能---
新动画(
{
延迟：1000/FPS，
持续时间：持续时间，
delta：线性，
输出：函数（增量）
{
如果（增量1）进度=1
这个。进步=进步
var delta=选项。delta（进度）
选项。输出（增量）
如果（进度==1）清除间隔（iT）；
}，选项。延迟）
}
在我看来，您链接到的示例几乎可以满足您的所有需要。为什么不修改它，使其具有可配置的startX和endX？请参阅：不幸的是，这就是结果，您认为它可以修复吗？它似乎只在您设置50%时起作用，在任何其他情况下它都会被破坏，这就是为什么我最初考虑使用bezier曲线，一种它将完美地附着在起点和终点，并从那里开始挥舞。你应该使用固定宽度的波浪，并用圆圈遮住它。在我看来，你链接的示例几乎可以满足你的所有需要。为什么不修改它，使其具有可配置的startX和endX？请参阅：不幸的是，这是结果，你认为它可以修复吗d？只有当你设定50%时，它才会起作用，在任何其他情况下它都会被破坏，这就是为什么我一开始考虑使用贝塞尔曲线，因为它会完美地附着在起点和终点，并从那里开始挥动。你应该使用固定宽度的波浪，并用一个圆遮住它。