我想对 animateMotion 标记应用缓动。
我对哪些属性与动画形状相关感到困惑:如果我理解得很好的话，需要 calcMode="spline" 以及 keyTimes 的定义和keySplines；但是如何使用keySplines和值呢？
但是，我尝试将计时插入动画中，但出了问题:
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
我的目标是申请this example从 this one 等工具中提取的时间
最佳答案
您正在指定 calcMode="spline"，但尚未提供 keySplines 属性。
keySplines 的值可以从样条线编辑工具复制。
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
完整演示(我放慢了动画速度，以便您可以看到它正在运行)。
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
animation-fill-mode:forwards;
}
@keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(-60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
</svg>
</body>
</html>关于animation - 在 SVG 中缓和 animateMotion，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55652253/