如何为 SVG SMIL 动画添加缓动？

问题描述

我一直在试验用于 SVG 动画的 SMIL 方法，但是我在添加缓动方面遇到了麻烦。

动画显示了一个绘制多边形的十字准线。

这是没有缓动的工作动画：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
        height="100%">

        <g id="crosshair_01" transform="translate(-15 -15)">
            <line x1="25" y1="15" x2="5" y2="15"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
            <line x1="15" y1="5" x2="15" y2="25"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
        </g>

        <path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
            stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
            d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />


        <animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidepolygon_01.end" from="1000"
            id="revealpolygon_01" dur="2s" xlink:href="#polygon_01" to="2000" />

        <animate attributeName="stroke-dashoffset" fill="freeze" begin="revealpolygon_01.end" from="0"
            id="hidepolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />

        <animateMotion xlink:href="#crosshair_01" begin="0s; hidepolygon_01.end" dur="2s" repeatCount="indefinite"
            additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
            <mpath xlink:href="#polygon_01" />
        </animateMotion>



    </svg>
</div>

这里我尝试使用 keyTimes 和 keySplines 添加缓动：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
        height="100%">

        <g id="crosshair_01" transform="translate(-15 -15)">
            <line x1="25" y1="15" x2="5" y2="15"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
            <line x1="15" y1="5" x2="15" y2="25"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
        </g>

        <path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
            stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
            d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />


        <animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidepolygon_01.end" from="1000"
            id="revealpolygon_01" dur="2s" xlink:href="#polygon_01" to="2000" calcMode="spline" values="1000; 1332; 1498; 1664; 1830; 2000;" keyTimes="0; 0.16; 0.33; 0.49; 0.66; 0.83; 1;" 
            keySplines="0.42 0 1 1;
                0.42 0 1 1;
                0.42 0 1 1;
                0.42 0 1 1;
                0.42 0 1 1;
                0.42 0 1 1;" />

        <animate attributeName="stroke-dashoffset" fill="freeze" begin="revealpolygon_01.end" from="0"
            id="hidepolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />

        <animateMotion xlink:href="#crosshair_01" begin="0s; hidepolygon_01.end" dur="2s" repeatCount="indefinite"
            additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
            <mpath xlink:href="#polygon_01" />
        </animateMotion>



    </svg>
</div>

出于某种原因，它使路径消失。有人有什么建议吗？

到目前为止，我只尝试为第一个动画添加缓动，我显然希望在复制到其他动画之前让它工作。

解决方法

您的 values 属性中有错误的条目数。

对于 n 个样条，您需要：

n+1 values 个条目
n+1 keyTimes 个条目
n keySplines 个条目

您的 values 属性中只有六个条目。你需要七个。

此外，您在列表中使用的尾随分号在技术上是非法的。但我认为浏览器都对此表示宽容。 更正：某些浏览器是。

<div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2" width="100%"
        height="100%">

        <g id="crosshair_01" transform="translate(-15 -15)">
            <line x1="25" y1="15" x2="5" y2="15"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
            <line x1="15" y1="5" x2="15" y2="25"
                style="fill:none;stroke:#005a84;stroke-miterlimit:10;stroke-width:2px" />
        </g>

        <path stroke-dasharray="1000" stroke="#58595B" pathLength="1000" fill="none" stroke-linejoin="round"
            stroke-dashoffset="1000" stroke-linecap="round" marker-start="url(#bm)" stroke-width="2" id="polygon_01"
            d="M 72.1 13.4 46.3 40.6 4.9 55.3 33 86.6 74.3 72.6 95.1 28.3 72.1 13.4" marker-end="url(#bm)" />


        <animate attributeName="stroke-dashoffset" fill="freeze" begin="0s; hidePolygon_01.end" 
            id="revealPolygon_01" dur="2s" xlink:href="#polygon_01" calcMode="spline"
            values="1000; 1167; 1333; 1500; 1667; 1833; 2000"
            keyTimes="0; 0.16; 0.33; 0.49; 0.66; 0.83; 1" 
            keySplines="0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1; 0.42 0 1 1" />
/>

        <animate attributeName="stroke-dashoffset" fill="freeze" begin="revealPolygon_01.end" from="0"
            id="hidePolygon_01" dur="2s" xlink:href="#polygon_01" to="1000" />

        <animateMotion xlink:href="#crosshair_01" begin="0s; hidePolygon_01.end" dur="2s" repeatCount="indefinite"
            additive="replace" calcMode="linear" keyTimes="0 ; 1" keyPoints="1 ; 0">
            <mpath xlink:href="#polygon_01" />
        </animateMotion>

    </svg>
</div>

animation animation smil svg