Svg animate with keyspline 不移动

Question

我创建了一个svg动画↓

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
    viewBox="0 0 400 379" width="40%" >
    <circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />

    <path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
        style="fill:#fff;">
        <animate attributeName="d" dur="3000ms" repeatCount="indefinite" id="logo2a1" values="
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
    </path>

</svg>

我想让白线的移动看起来更自然，所以我想在animate标签上添加一些带有keySpline属性的ease-in/ease-out效果↓，但是动画没有发生的时间更长。

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
    viewBox="0 0 400 379" width="40%" >
    <circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />

    <path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
        style="fill:#fff;">
        <animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
            keyTimes="0;0.5;1;1.5;2;2.5;3.0"
            keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
    </path>

</svg>

我该怎么做才能使动画再次运行，并使白线具有 ease-in/ease-out 效果？

Answer 1

Keytimes 运行从 0 到 1。超出此范围的数字无效。

更正似乎可以使事情正常进行。

<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;" 
    viewBox="0 0 400 379" width="40%" >
    <circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />

    <path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
        style="fill:#fff;">
        <animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
            M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
            M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
            M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
            keyTimes="0;0.16;.3;.4;.6;.8;1.0"
            keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
    </path>

</svg>

Svg animate with keyspline 不移动

Svg animate with keyspline is not moving

html

svg

smil

svg-animate