svg配合css3动画_使用纯HTML和CSS对SVG进行动画处理

最新推荐文章于 2024-07-04 12:43:30 发布

weixin_26746861

最新推荐文章于 2024-07-04 12:43:30 发布

阅读量583

点赞数

文章标签： css svg html css3 vue ViewUI

原文链接：https://medium.com/swlh/animating-svgs-with-pure-html-and-css-e69eab12a5e

版权

svg配合css3动画

Before I begin, I should mention that SVG animations can be made within JS framework packages as well as external software. Many of them work great, if you want to check out some of the available tools, check these links here & here.

在开始之前，我应该提到可以在JS框架包以及外部软件中制作SVG动画。它们中的许多都很好用，如果您想查看一些可用的工具，请在此处和此处检查这些链接。

This tutorial is an alternative to abstract the creation of animations and also offer a more customizable animation when these packages become limiting, and in some cases, to avoid a paywall. I’ll be creating the SVG animation below:

本教程是对动画创建进行抽象的一种替代方法，并且在这些程序包变得有限(在某些情况下，避免收费墙)时，还提供了更可自定义的动画。我将在下面创建SVG动画：

Image for post — It may seem choppy, but rest assured its just the gif!

One of the main issues I found when working with JS packages, was that a majority of the animation were based off line strokes. It would create a great animation, but would only animate the outside shape of the SVG, similar to a drawing:

我在使用JS软件包时发现的主要问题之一是，大多数动画都是基于脱机描边的。它可以创建出色的动画，但只能为SVG的外部动画，类似于图形：

However I wanted to animate specific parts of an SVG, and smoothly loop it. Using the techniques described in this guide, I was able to create the following animations:

但是，我想为SVG的特定部分制作动画，并使其平滑循环。使用本指南中描述的技术，我能够创建以下动画：

The second animation was created using the same techniques with a bit more complexity. You can make custom animations as complex as needed with multiple moving parts.

第二个动画是使用相同的技术创建的，但有点复杂。您可以根据需要使用多个移动部件使定制动画变得复杂。

1.确定动画的路径 (1. Decide Paths to Animate)

The first step is majorly dependant on the SVG file you will be using. Most SVGs will have separate <path> elements when there are non-connected paths. For example, both the cogs and the head are distinctly their own paths relative to each other. That being said, they are bound together in a single <svg> tag because all of these paths together make up the SVG image.

第一步主要取决于您将使用的SVG文件。当存在未连接的路径时，大多数SVG将具有单独的<path>元素。例如，嵌齿轮和头部都是相对于彼此的路径。就是说，它们被绑定在单个<svg>标签中，因为所有这些路径共同构成了SVG图像。

Within the HTML, the <path> elements are hard to attribute to what shape they create- especially when the SVG is uniform in colour and fairly complex.

在HTML中， <path>元素很难归因于它们创建的形状-尤其是当SVG颜色均匀且相当复杂时。

If the SVG you are trying to animate is already broken into appropriate <path> elements and you are aware of which path is responsible for which shape, jump to Step 2.

如果您要制作动画的SVG已被分解为适当的<path>元素，并且您知道哪个路径负责哪种形状，请跳至步骤2 。

To distinguish paths from each other, you can use the fill (or stroke) attribute within the element like below, these can be removed once you know whats what.

为了彼此区分路径，可以在如下所示的元素内使用fill (或stroke )属性，一旦知道了什么就可以将其删除。

N.B. If you want to animate part of an SVG that isn’t it’s own distinct path, you will need to directly edit the SVG, see Step 2.

注意：如果要为SVG的一部分创建动画，这不是它自己的独特路径，则需要直接编辑SVG，请参阅步骤2 。

2.编辑路径位置(可选) (2. Edit Path Positions (optional))

There are a couple of reasons you’d want to edit your SVG paths directly:

您要直接编辑SVG路径的原因有两个：

If you need to create a distinct path from a clumped SVG; i.e. break down one SVG into multiple paths to animate one (or more) path(s).
如果您需要从成簇的SVG创建不同的路径，请执行以下操作：也就是说，将一个SVG分解为多个路径以为一个(或多个)路径设置动画。
For combining extra paths into one SVG (not to be confused with merging them; rather placing additional paths into a single SVG). I’ll be editing my SVG for this reason: adding an additional cog to give a total of 3 separate paths.
用于将额外的路径合并到一个SVG中(不要与合并它们混淆；而是将额外的路径放入单个SVG中)。由于这个原因，我将编辑SVG：添加一个额外的齿轮，以提供总共3条单独的路径。
Artistic freedom; maybe you want to simply tweak the SVG as it’s not pointy or round enough to your standard. You can be the judge.
艺术自由；也许您只是想调整SVG，因为它不够尖锐或不够符合您的标准。你可以当法官。

If you are already happy with your SVG and all the path positions as is, you can skip this step and jump to Step 3.

如果您已经对SVG和所有路径位置都满意了，则可以跳过此步骤并跳到步骤3 。

I used Adobe Illustrator for my SVG editing, this can also be done with an online SVG editor (a free editor can be found here).

我使用Adobe Illustrator进行SVG编辑，这也可以通过在线SVG编辑器(可在此处找到免费的编辑器)来完成。

I created a copy of the cog and placed all the individual SVGs where needed. Within Illustrator, you can export your file as an SVG, and additional paths you created will be added.

我创建了齿轮的副本，并将所有单个SVG放置在需要的地方。在Illustrator中，您可以将文件导出为SVG，并将添加您创建的其他路径。

N.B. If using Illustrator, the SVG file you’ll export will have an additional element defining the styling (any custom colours etc.) wrapped in a<defs> tag. Illustrator will also add custom classes to each path which reference the styling (<defs>) associated with that path. I would recommend removing the <defs> tag. The custom classes can be kept and used later when we’ll be defining animations and colours within CSS. If you create additional unknown paths, you can use the technique in Step 1 to find out which path is which.

注意：如果使用Illustrator，将导出的SVG文件将包含一个附加元素，用于定义包装在<defs>标记中的样式(任何自定义颜色等)。 Illustrator还将向每个路径添加自定义类，这些自定义类引用与该路径关联的样式( <defs> )。我建议删除<defs>标记。自定义类可以在以后在CSS中定义动画和颜色时保留并使用。如果创建其他未知路径，则可以使用第1步中的技术来找出哪个路径。

After exporting my SVG, removing the <defs> tags, and adding my own id to the <path>&<g> tags, I end up with the following SVG:

导出我的SVG，删除<defs>标签并将我自己的ID添加到<path>和<g>标签之后，我得到了以下SVG：

(<g> tags are group tags; these define sub groups within the SVG- so the cog is actually composed of an inner circle and the outer ridged wheel. The grouping means you can define styling and animations to both separate parts simultaneously)

( <g>标签是组标签；它们在SVG-中定义子组，因此cog实际上由一个内圆和一个外脊轮组成。分组意味着您可以同时为两个单独的部分定义样式和动画。)

3.使用CSS制作动画 (3. Animate using CSS 😄)

The fun part!

有趣的部分！

So far, we have all parts of our SVG deconstructed and we know what is what. Now the choice of how to animate your desire paths is up to you.

到目前为止，我们已经解构了SVG的所有部分，我们知道什么是什么。现在，如何为您的欲望之路制作动画取决于您自己。

I break up the animation into 2 parts:

我将动画分为两部分：

Define the animation(s) you want. For example, I want one cog to rotate clockwise (0° to 360°) and the other, anticlockwise (360° to 0°).
定义所需的动画。例如，我希望一个齿轮顺时针旋转(0°至360°)，而另一个齿轮逆时针旋转(360°至0°)。

Defining both my clockwise and anticlockwise animations.

定义我的顺时针和逆时针动画。

If the animation is to be looped: you must get the SVG to its original position by the end of the animation. This is easy in the example above; the cog rotates back to its original position after it completes a 360° loop.

如果要循环播放动画：必须在动画结束之前将SVG移至其原始位置。在上面的示例中，这很容易。完成360°循环后，齿轮会旋转回到其原始位置。

If more variation and flexibility are required, percentages can be used instead:

如果需要更多的变化和灵活性，可以使用百分比代替：

The example above is the same animation, alternatively the object will start at 0°, and reach the halfway point of rotation(180°), 30% of the way through the animation. The object would then complete the remaining rotation to 360° for the remaining duration of the animation.

上面的示例是相同的动画，或者对象将从0°开始，并到达旋转一半(180°)，距离动画的30％。然后，对象将在动画的剩余持续时间内完成到360°的剩余旋转。

2. Assign the animations to the path(s) you want. Below, I’ve assigned the animations (defined above) to the appropriate id attribute.

2.将动画分配给所需的路径。下面，我已经将动画(上面定义的)分配给了适当的id属性。

Piecing everything together, you should get this lovely animated SVG:

将所有内容拼接在一起，您应该得到这个可爱的动画SVG：

The freedom you have with these animation are huge; it’s possible to animate almost any CSS property ( e.g. opacity, colouring, as well as 2D & 3D translations) and for not just SVGs but any section of your page.

这些动画具有很大的自由度；几乎可以对所有CSS属性(例如，不透明度，颜色以及2D和3D翻译)进行动画处理，并且不仅可以对SVG进行动画处理，还可以对页面的任何部分进行动画处理。

Hopefully this tutorial has made the process of animating SVGs more understandable whilst also giving you the tools to make more complex alternatives to the stroke (drawing) animations.

希望本教程使SVG动画制作过程更容易理解，同时还为您提供工具，以对笔触(绘制)动画进行更复杂的替代。

For further information on CSS animations:

有关CSS动画的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations