SVG画运动的曲线

1）首先是如何生成起点到终点的抛物线，贝赛尔曲线是用来生成平滑的抛物线的，所以首先了解下贝塞尔曲线的原理。
贝塞尔曲线是通过起点和中间增加控制点来生成的，如果把起点和终点链接起来是一条直线，如果在起点和终点中间的地方增加控制点，那么线会朝着点的方向以曲线来扭曲，于是就产生了抛物线，可以通过控制点的数量和坐标来控制曲线的形状。
可以参考这个网站，这个网址的控制点可以拖动，可以通过修改控制点来直观的了解贝塞尔曲线
https://www.jasondavies.com/animated-bezier/

2）svg提供了生成了贝塞尔曲线的方式，可以参考这个网址，
https://www.cnblogs.com/yjstonestar/p/5003715.html

3）如果曲线一成不变，那么就很枯燥，曲线的变动可以通过修改起点、终点、控制点来完成
比如下面这条贝塞尔曲线

我可以通过修改pat的属性d的数值，比如如果我把起点修改，那么曲线就会变动，
为了达到好的效果，尽量起点和控制点的位置都变动
比如我修改如下

起点有（10，10）变成（20，20），第一个控制点由（20，20）变成（30，20）
那么在网页上就会产生曲线起点移动的效果。

4）曲线变动也比较枯燥，可以在曲线上增加一个小球，
svg可以设置一个元素沿着某种方式来运动，如果把元素的运动方式设置成跟随曲线，那么就会产生元素沿着曲线运动的效果。
设置运动属性href属性。
可以参考下面的网址
https://segmentfault.com/q/1010000010875025

5）这里给一个例子程序：
html

<svg width="50cm" height="10cm"  viewBox="0 0 600 600">
  <path id="path1" d="M100,500 C 300,200 400,200 500,500"
        fill="none" stroke="blue" stroke-width="5"  />
</svg>

<script>
    $(function () {
        var svg = $("svg");
        var circle = document.createElementNS("http://www.w3.org/2000/svg","circle");
        circle.setAttribute("r", "15");
        circle.setAttribute("fill", "red");
        var ani = document.createElementNS("http://www.w3.org/2000/svg","animateMotion");
        ani.setAttribute("dur", "5s");
        ani.setAttribute("repeatCount", "indefinite");
        ani.setAttribute("rotate", "auto");
        var mpath = document.createElementNS("http://www.w3.org/2000/svg","mpath");
        //设置沿着贝塞尔取消运动
        mpath.setAttributeNS ("http://www.w3.org/1999/xlink", "href", "#path1");
        ani.appendChild(mpath);
        circle.appendChild(ani);
        svg.append(circle);
        x = 100;
        y = 500;
        x1 = 300;
        y1 = 200;
        x3 = 400;
        y3 = 200;
        //启动一个timer来修改贝塞尔曲线起点和控制点的位置，以达到变动曲线起点和曲线形状的目的
        setInterval(function () {
            x=x+1;
            y=y+1;
            x1 = x1 +1;
            y1 = y1 +1;
            x3 = x3 +1;
            y3 = y3 +1;
           var data = "M"+x+","+y+" C "+x1+","+y1+" "+x3+","+y3+" 500,500";
           $("#path1").attr("d",data);
        },100)
    })
</script>