如何向 SVG SMIL 动画添加缓动?
How do you add easing to an SVG SMIL animation?
我一直在为 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>
我一直在为 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>