2

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

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

在此处输入图像描述

4

2 回答 2

4

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

弹跳轨迹

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

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

在此处输入图像描述

它开始快速，减速，然后再次加速。

此图表示三次贝塞尔曲线，也称为样条曲线。这个特殊的三次贝塞尔曲线可以写成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是 start ，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值，因为轨迹有三条腿。（再次，实际值我曾经需要改进，但这是一般的想法。）
于 2016-02-18T20:38:18.363 回答
0

如果你想让你的圆圈跟随路径，你需要圆圈的位置为 (0,0)，因为运动动画将相对于圆圈的当前位置： <circle cx="0" cy="0"...

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

见jsfiddle

于 2014-08-26T12:48:30.970 回答