Javascript SVG和SMIL为球反弹3次并与墙碰撞设置动画

我需要动画一个圆圈，反弹3次，击中墙壁，然后返回。它应该遵循给定的路径。我已经用

animateMotion

试过了。到目前为止是这样的

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>animation</title>

 <!--<rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">-->
     <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
  <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
     </circle>
   <!--</rect>-->
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,
       -31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12 Z"
       stroke-width="5" stroke="#000000" fill="none"/>
</svg>

动画

事实上，下面的内容正是我所期待的，因为我是这个领域的新手，非常感谢任何指导或支持

---

如果希望圆沿着路径，则需要圆的位置为（0,0），因为运动动画将相对于圆的当前位置：

---

为了给人一种球在有机地反弹的印象，你可能需要一个看起来更像这样的轨迹：


此外，您不需要线性计时函数。线性计时功能意味着元素将在整个动画中以相同的速度移动。但是，球离反弹顶点越近，球的速度就越慢。此外，考虑到在最高反弹的开始和结束时，它的速度比在最短反弹的开始和结束时要快。p>
根据上述关于弹跳球行为的信息，我们可能会猜测一次弹跳的计时函数应如下所示：


它开始时速度很快，速度变慢，然后再次加速

此图表示三次贝塞尔曲线，也称为样条曲线。这个特定的三次贝塞尔可以写成
0.10.8 1 0.3
——第一个控制点（P1）的x和y坐标，然后是第二个控制点（P2）的x和y坐标

结合轨迹和计时功能：
. 时间需要调整一点，但这是总体思路

元素需要四个附加属性才能实现这一点：


keyPoints=“0；0.5；0.75；1”
keyTimes=“0；0.35；0.6；1”
calcMode=“spline”
keySplines=“0.3 0.5 0.8 0.7；0.3 0.5 0.8 0.7；0.3 0.5 0.8 0.7”

这意味着什么：

keyPoints=“0；0.5；0.75；1”
-我决定将路径分为三个部分，每个部分与开始和结束时间（从
keyTimes
）和计时功能（从
keypline
）关联。值介于
0
和
1
之间，用分号分隔，其中
0
是路径的开始，
1
是路径的结束
keyTimes=“0；0.35；0.6；1”
-动画的总持续时间根据这些时间分段。
关键点的次数应与
关键点的次数相同。值介于
0
和
1
之间，用分号分隔，其中
0
为开始，
1
为动画的总持续时间
calcMode=“spline”
-表示我们希望计时函数为三次贝塞尔函数。将
calcMode
设置为
spline
意味着我们还必须在此元素上设置
keySplines

keySplines=“0.3 0.5 0.8 0.7；0.3 0.5 0.8 0.7；0.3 0.5 0.8 0.7”
-轨迹的每条航段都有自己的计时功能。（因此，
键样条
值应该比
键时
少一个。在这里，我对每个键样条使用了相同的计时函数，
0.3 0.5 0.8 0.7
。因为有四个
键时
，所以有三个
键样条
值，因为轨迹有三条腿。（同样，我使用的实际值需要细化，但这是总体思路。）
试试看，这是我的答案，不能解决您的问题吗？