我正在尝试确定如何有效地反转此 SVG 动画(使用 SMIL),它使用 animateMotion
和 path
上的 d
属性元素。我需要动画围绕形状逆时针运行。
当前动画可以查here相关代码如下。
document.getElementById("svgobject").pauseAnimations();
<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve">
<g>
<path fill="none" stroke="black"
d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/>
<rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)">
<animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" />
</rect>
</g>
<!--start and stop animation-->
<g onclick="document.getElementById('svgobject').unpauseAnimations()"
transform="translate(160 100)">
<rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
<text style="font: 16px Arial Black; fill: white; stroke: black;"
transform="translate(2 20)">START</text>
</g>
<g onclick="document.getElementById('svgobject').pauseAnimations()"
transform="translate(260 100)">
<rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
<text style="font: 16px Arial Black; fill: white; stroke: black;"
transform="translate(5 20)">STOP</text>
</g>
</svg>
我明白我可以手动反转 SVG 路径数据命令,包括 moveto (M,m)、lineto (L,l)、curveto (C,c) 等。
考虑到我需要反转的路径坐标数量(除了这个动画中的那些),我正在尝试确定是否有更有效的方法来执行此操作。
最佳答案
您可以使用 keyPoints
和 keyTimes
属性反转动画的方向。
<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
fill="freeze" keyPoints="1;0" keyTimes="0;1">
这里我们告诉运动从 1(路径的终点)到 0(路径的起点)。
这在 Firefox 中有效,但遗憾的是在 Chrome 中无效。 Chrome 似乎有问题。
更新:
我发现了与此相关的 Chrome 错误:https://code.google.com/p/chromium/issues/detail?id=353108
如果 calcMode 为“paced”(默认设置),则 keyTimes 似乎已损坏。如果您将其更改为其他内容,例如“线性:动画在 Chrome 中也能正常工作。
<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">
关于javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28057539/