SVG和SMIL动画Ball弹跳3次并与墙壁碰撞

Question

我需要为一个反弹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>

实际上下面的内容是我所期待的，因为我是该地区的新手，感谢任何指导或支持。

Answer 1

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

此外，您不需要线性计时功能。线性计时功能意味着元素将在整个动画中以相同的速度移动。但是，球越接近弹跳的顶点，球越慢。还要考虑它在最高反弹的开始和结束时比在最短反弹的开始和结束时更快。

基于前面关于弹跳球行为的信息，我们可能会猜测一次弹跳的计时功能应该如下所示：

它开始快速，慢下来，然后再次加速。

此图表示三次贝塞尔曲线，也称为样条曲线。这个特定的立方贝塞尔曲线可以写成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" - 我决定将路径分成三个部分，每个部分与开始和结束时间（来自keyTimes）和计时功能（来自keySplines）。值介于0和1之间，由分号分隔，其中0是路径的起点，1是路径的终点。
• keyTimes="0;0.35;0.6;1" - 根据这些时间对动画的总持续时间进行细分。应该与keyTimes完全相同keyPoints次。值介于0和1之间，由分号分隔，其中0开始，1是动画的总持续时间。
• calcMode="spline" - 表示我们希望计时函数为cubic-bezier。将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 1}}，有三个 for(int g =4; g>=1; g--){ //changed this line double Sum=0; for(int h=7; h>=0; h-- ){ char s = parts[g].charAt(h); int y = Character.getNumericValue(s); Sum = Sum+(Math.pow(2,7-h)*y); } Double d = new Double(Sum); int i = d.intValue(); System.out.print(i+"."); } 值，因为轨迹有三条腿。（同样，我使用的实际值需要改进，但这是一般的想法。）

Answer 2

如果您希望圆圈遵循路径，则需要圆的位置为（0,0），因为运动动画将相对于圆的当前位置： <circle cx="0" cy="0"...

您也可以删除rotate="auto"，因为在这种情况下它没有任何用处。

请参阅jsfiddle