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.1 0.8 1 0.3-第一个控制点（P1）的x和y坐标，然后是第二个控制点（P2）的x和y坐标。
结合轨迹和计时功能：
jsfiddle。时机需要稍微调整一下，但这是总的想法。
<animateMotion>元素需要四个附加属性才能实现这一点：
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"-我决定将路径分成三个部分，每个部分都与开始和结束时间（fromkeyTimes）和计时功能（fromkeySplines）相关。值介于0和1之间，用分号分隔，其中0是路径的开始，1是路径的结束。
keyTimes="0;0.35;0.6;1"-动画的总持续时间根据这些时间分段。应该有和keyTimes一样多的keyPoints次。值介于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"-轨迹的每一段都有自己的计时功能。（因此，应该比keySplines少一个keyTimes值。在这里，我对每个都使用了相同的计时功能，0.3 0.5 0.8 0.7。因为有四个keyTimes，所以有三个keySplines值，因为轨迹有三条腿。（同样，我使用的实际值需要改进，但这是一般的想法。）

关于javascript - SVG和SMIL动画球反弹3次并与墙碰撞，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25472656/