时间戳

首页 > 解决方案 > 需要 SVG 动画指导

animation - 需要 SVG 动画指导

问题描述

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

https://svgpocketguide.com/book/

<!-- 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>

标签： animationsvgsvg-animate

解决方案

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

SIMPLE – 按顺序为多个 SVG 制作动画（如循环 GIF）

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

推荐阅读