如何使用SVG动画创建加载器图标

在本教程中，您将学习如何使用 svg 动画制作一个非常简单的加载器图标。我们将介绍的内容与css动画不同——SVG 动画驻留在实际的 SVG 标记中。让我们先看一下语法。

语法

大多数现代浏览器通过使用一种叫做“SMIL”的东西来支持动画 SVG，它代表“同步多媒体集成语言”。该语言允许您对SVG 的某些基础属性和转换属性进行动画处理。例如，您可以为 X 和 Y位置、旋转变换或元素的填充颜色设置动画。让我们看两个示例，它们将帮助您了解基础知识。

示例 1

对于我们的第一个示例，我们从一个<svg>元素开始，该元素设置了宽度、高度和 viewBox 属性。

<svg width="500px" height="500px" viewBox="0 0 500 500">  
</svg>

然后我们在其中放置一个矩形，其中包含一些定位值、尺寸和填充颜色。

<svg width="500px" height="500px" viewBox="0 0 500 500">
    <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    </rect>
    </svg>

为了动画这个矩形，<animate />我们将在<rect>.

在其中<animate />我们添加了一些属性，首先attributeName用于定义<rect>我们想要动画的 's 属性（在本例中为x位置）。

然后我们定义一个from值和一个to值。我们dur用来指定持续时间，并repeatCount说明我们希望动画具有什么样的重复。

<svg width="500px" height="500px" viewBox="0 0 500 500"> 
 
    <rect x="0" y="0" width="100" height="100" fill="#feac5e"> 
        <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" /> 
    </rect> 
     
</svg>

而已！您将在我们的演示中看到，我们现在在 SVG 中有一个动画元素。

See the Pen  Simple SVG <animate> Demo by Envato Tuts+ (@tutsplus)  on CodePen.

我们也可以为矩形上的多个属性设置动画；我们需要做的就是添加另一个<animate />指定另一个属性的。让我们也为宽度设置动画：

<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />

第三个怎么样？让我们也改变它的填充颜色。

<animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="fill" to="black" dur="2s" repeatCount="indefinite" />

See the Pen  Slightly More Advanced SVG <animate> Demo by Envato Tuts+ (@tutsplus)  on CodePen.

示例 2

第二个示例将为transform 属性设置动画。我们将从相同的开始<svg>，但略有不同<rect>：

<svg width="500px" height="500px" viewBox="0 0 500 500">
 
    <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
    </rect>
     
</svg>

这一次，<animate />我们将添加一个元素，而不是添加一个<animateTransform />元素。它的属性以a为目标attributeName，然后要求type转换。我们可以使用begin 来指定动画应该开始dur的时间，持续时间，然后以三个值的形式指定其坐标：角度x、 和y。在我们的例子中，我们使用这些坐标来指定旋转变换。

<svg width="500px" height="500px" viewBox="0 0 500 500">
 
    <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
        <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200" to="360 400 400" repeatCount="indefinite" />
    </rect>
     
</svg>

See the Pen  SVG <animateTransform> Demo by Envato Tuts+ (@tutsplus)  on CodePen.

与我们之前的示例一样，我们可以添加更多<animateTransform /> 元素来为多个属性设置动画。然而，在变换的情况下，我们只能按顺序运行它们——不可能同时为多个属性设置动画。

自己尝试一下，添加第二个动画目标scale：

<animateTransform attributeName="transform" type="scale" 
begin="0s" dur="3s" values="1,1; 2,2; 1,1" repeatCount="indefinite" />

这两个示例向您展示了使用 SVG 动画的基础知识。让我们用我们学到的东西来创建一个加载器动画。

创建动画加载器图标

加载器图标可以采用任何形式——我们真的只受我们想象力的限制。我将向您展示两个示例，我希望这将成为您将自己的想法变为现实的灵感。

示例 1

对于我们的第一个示例，我将从以下内容开始<svg>：

<svg width="51px" height="50px" viewBox="0 0 51 50"></svg>

现在让我们添加三个矩形，它们最终会改变它们的高度以表明正在加载某些东西。这是第一个：

<svg width="51px" height="50px" viewBox="0 0 51 50">
    <rect y="0" width="13" height="50" fill="#1fa2ff">
        <animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect></svg>

下面是后两个 - 你会注意到它们是相同的，但填充颜色不同，沿x轴移动，并且动画略有延迟：

<svg width="51px" height="50px" viewBox="0 0 51 50">
    <rect y="0" width="13" height="50" fill="#1fa2ff">
        <animate attributeName="height" values="50;10;50" begin="0s" dur="1s" repeatCount="indefinite" />
    </rect>
    <rect x="19" y="0" width="13" height="50" fill="#12d8fa">
        <animate attributeName="height" values="50;10;50" begin="0.2s" dur="1s" repeatCount="indefinite" />
    </rect>
    <rect x="38" y="0" width="13" height="50" fill="#06ffcb">
        <animate attributeName="height" values="50;10;50" begin="0.4s" dur="1s" repeatCount="indefinite" />
    </rect></svg>

See the Pen  SVG <animateTransform> Loader Demo i by Envato Tuts+ (@tutsplus)  on CodePen.

这给了我们一个很好的加载动画！让我们通过动画y每个矩形的位置来稍微改进它。为此，我们需要再添加三个<animate />元素：

See the Pen  SVG <animateTransform> Loader Demo ii by Envato Tuts+ (@tutsplus)  on CodePen.

示例 2

最后一个示例稍微复杂一些，因为它涉及在另一个程序中创建 SVG ，然后将其复制到代码编辑器，然后对其属性进行动画处理。

然而，我们将从熟悉的领域开始，通过手动编码<svg>：

<svg width="50" height="50" viewBox="0 0 50 50"></svg>

我们<svg>添加了<path>一些基本属性：

<svg width="50" height="50" viewBox="0 0 50 50">
    <path fill="#c779d0" d=""></path></svg>

对于我们的内容d （它定义了如何绘制路径），我们需要一点帮助，所以启动adobe illustrator并开始绘图（或者只是复制下面的代码，很明显..）

<svg width="50" height="50" viewBox="0 0 50 50">
    <path fill="#c779d0" d="M25,5A20.14,20.14,0,0,1,45,22.88a2.51,2.51,0,0,0,2.49,2.26h0A2.52,2.52,0,0,0,50,
    22.33a25.14,25.14,0,0,0-50,0,2.52,2.52,0,0,0,2.5,2.81h0A2.51,2.51,0,0,0,5,22.88,20.14,20.14,0,0,1,25,5Z"></path>
</svg>

现在让我们<path>通过旋转它来制作动画，就像我们在前面的示例中所做的那样。我们添加以下<animateTransform />. 

<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.5s" 
repeatCount="indefinite" />

而已！我们现在有一个简单的旋转加载器动画。看看您可以对其进行哪些改进！

See the Pen  SVG <animateTransform> Loader Demo iii by Envato Tuts+ (@tutsplus)  on CodePen.

结论

在本教程中，我们从 SVG 动画的基础知识开始，学习<animate />在简单的手工编码 SVG 中使用元素。然后我们通过引入<animateTransform />元素来构建它。接下来，我们利用我们学到的知识创建了我们自己的动画加载器图标。最后，我们创建了另一个，但使用的是<path>在 Adobe Illustrator 的帮助下生成的更复杂的元素。