需要 SVG 动画指导答案

【问题标题】：SVG animation guidance needed需要 SVG 动画指导
【发布时间】：2021-07-19 01:50:25
【问题描述】：

我今天阅读了这本 SVG 袖珍指南，从中学到了很多，但是……它不包括动画。我需要一些关于如何制作简单动画的指导。我不需要帧之间的任何过渡，我只想为第一帧定义形状，为第二帧定义形状等。

<!-- https://svgpocketguide.com/book/#section-4 -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
    <!-- the doctype and svg need to be like this to render in Firefox -->
    <rect width="1080" height="1080" fill="white"/>

<!-- delay frames by waiting 0.5 seconds between frames -->

    <animation frame 1>
        <line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
        <line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
        <circle cx="10" cy="50" r="5" fill="black" />
        <circle cx="75" cy="75" r="5" fill="black" />
        <circle cx="175" cy="475" r="5" fill="black" />
    </animation frame 1>

    <animation frame 2>
        <line x1="75" y1="75" x2="10" y2="50" stroke="hsl(0,82%,56%)" stroke-width="3"/>
        <line x1="75" y1="75" x2="175" y2="475" stroke="hsl(236,82%,56%)" stroke-width="3"/>
        <circle cx="10" cy="50" r="5" fill="black" />
        <circle cx="75" cy="75" r="5" fill="black" />
        <circle cx="175" cy="475" r="5" fill="black" />
    </animation frame 2>

</svg>

【问题讨论】：

这不是真的SMIL works
我找到了这个。关键字是“关键帧”，但它显示了应用于形状的转换。不在形状之间切换。
这是我发现的最接近关键帧的东西：oak.is/thinking/animated-svgs
离散 calcMode 是我需要的，我的意思是“关键帧”。 developer.mozilla.org/en-US/docs/Web/SVG/Attribute/calcMode

标签： animation svg svg-animate

【解决方案1】：

<!-- https://svgpocketguide.com/book/#section-4 -->
<!-- https://oak.is/thinking/animated-svgs/ -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="1080" height="1080">
    <rect width="1080" height="1080" fill="white"/>

    <line x1="400" y1="400" x2="10" y2="515" stroke="hsl(250,82%,56%)" stroke-width="3">
        <animate
            attributeName="x1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="y1"
            dur="0.5s"
            values="50;100;200;350;400"
            calcMode="discrete"
            repeatCount="1"
        />
        <animate
            attributeName="stroke"
            dur="0.5s"
            values="hsl(50,82%,56%);hsl(100,82%,56%);hsl(150,82%,56%);hsl(200,82%,56%);hsl(250,82%,56%)"
            calcMode="discrete"
            repeatCount="1"
        />
    </line>

    <circle cx="50" cy="50" r="5" fill="black" />
    <circle cx="100" cy="100" r="5" fill="black" />
    <circle cx="200" cy="200" r="5" fill="black" />
    <circle cx="350" cy="350" r="5" fill="black" />
    <circle cx="400" cy="400" r="5" fill="black" />

</svg>

【讨论】：

【解决方案2】：

这个问题展示了一种在 SVG 中实现基于帧的动画的方法。它使用 CSS 动画，但您可以使用 SMIL 实现相同的效果。但是，CSS 方式在 IMO 上更简洁一些。

SIMPLE – Animate Multiple SVGs in Sequence (like a looping GIF)

这是另一个答案，可能会有所帮助：SVG frame-based animation

【讨论】：