Question

如何反转SVG动画...需要从 TOP 动画到 BOTTOM ？

我希望在从顶部50px后（从0到 50px 它必须动画并且停止）停止回合

svg {
  border: 3px solid #eee;
  display: block;
  margin: 1em auto;
}
p {
  color: #aaa;
  text-align: center;
}

<svg width="100" height="200" viewBox="0 0 200 500">
<path id="motionPath" fill="none" stroke="#ED1E25" stroke-width="4" stroke-miterlimit="10" stroke-dasharray="10,8" d="M53.738,2243.583
c0,0,53.198-53.916,58.558-133.25S64.321,1976.33,49.655,1954.33s-44.331-55.33-44-122.664
c0.111-22.688,9.666-77.666,48.666-129.333c24.376-32.293,40.667-85.68,41.667-118.678c0,0,3.667-63.012-34.333-114.345
c-10.717-14.478-56.003-66.333-47.001-133c3.597-26.633,11.017-64.334,44.509-107s57.491-91.004,53.133-144.337
c-2.348-28.726-11.975-80.665-59.975-133.665C31.307,928.106-6.345,864.978,8.988,791.978c1.793-8.538,15.666-62.331,44.666-95.998
s47.334-113.995,41.334-147.995c-2.515-14.252-5-58.736-54.042-116.589c-16.472-19.432-39.65-81.737-20.958-134.07
c8.677-24.293,20-51.077,26.5-60.577s34-51.25,38-84.25c1.444-11.916,10.5-87-31-144.584"/>

<circle id="circle" r="10" cx="0" cy="0" fill="tomato" />

<animateMotion
xlink:href="#circle"
dur="5s"
begin="0s"
fill="freeze"
repeatCount="1">
<mpath xlink:href="#motionPath" />
</animateMotion>
</svg>

Answer 1

您可以使用以下方式撤消动画：

keyPoints="1;0" keyTimes="0;1" calcMode="linear"

在animationMotion定义中。使用这些属性，您还可以停止动画并返回到开始。我只是在~50px（50px +顶部的边距）上添加了一条黑线，并修改了圆圈在此线处转动的keyPoints。它＆＃39; S

keyPoints="1;0.952;1" keyTimes="0;0.5;1" calcMode="linear"

在你的情况下。这不是最干净的方式，因为它不完全是在50px之后，但是如果你不想添加一条新的路径，它具有所需的动画路径长度，你必须测试一点点。

工作小提琴：https://jsfiddle.net/df4qt9zz/

另外请记住，SVG是可扩展的，因此如果SVG的大小越来越大，50px将大约为100px。

SVG动画 - 从顶部50px后反转并停止

1 个答案: