svg配合css3动画_使用CSS和Snap.svg的SVG动画

svg配合css3动画

Today I wanted to share with you the ease of animation in SVG with the tools we have available to us today. SVG is still one of those subjects that can scare away a lot of developers, but I'm here to show you hopefully just how easy it can be.

今天，我想与大家分享我们今天可用的工具中SVG中动画的简便性。 SVG仍然是可以吓走很多开发人员的主题之一，但是我在这里是希望向您展示它多么容易。

While doing my usual search on the internet for inspiration, I came across this great post on From Up North. As you can see, there are some beautiful illustrations by Miguel Sousa aka Heymikel, Snack Studio, Martín Feijoó & Sara Enríquez. As soon as I saw the animations, the first thing that came to mind was how these could be made into SVG animations to be used freely on the internet.

当我在互联网上进行常规搜索以寻找灵感时，我在From Up North上看到了这篇很棒的文章 。 如您所见，Miguel Sousa aka Heymikel，Snack Studio，MartínFeijoó和SaraEnríquez提供了一些精美的插图。 当我看到动画时，首先想到的是如何将这些动画制作为SVG动画，以便在互联网上免费使用。

View Demos 查看演示

让我们开始吧 (Let's get to it)

There are a few different implementations, some with the focus more on the Snap.svg side of things, then also combining both Snap.svg and CSS animations.

有几种不同的实现，其中一些更着重于Snap.svg方面，然后还结合了Snap.svg和CSS动画。

制备 (Preparation)

The first part of any SVG project should be spent optimising your SVG's, hopefully in your case you have either created them yourself or will have a nice SVG supplied by your design team. Now rather than putting the vast subject of optimisation into this particular article. We recommend you check out this article by Sara Soueidan which has some great tools to help you out.

SVG项目的第一部分应该花在优化SVG上，希望在您的情况下，您可以自己创建它们，也可以由设计团队提供不错的SVG。 现在，而不是将广泛的优化主题放入此特定文章中。 我们建议您查看Sara Soueidan的 这篇文章 ，其中有一些很棒的工具可以帮助您。

The biggest thing that will make working with SVG a breeze is to be very organised with your layering and grouping. Remove all unused layers and group elements that you feel will be linked together in animation.

使SVG轻而易举的最大事情就是将您的分层和分组组织得井井有条。 删除所有您感觉将在动画中链接在一起的未使用的图层和组元素。

设置Snap.svg (Setting up Snap.svg)

The beauty of Snap.svg is that it is simple to get set up and gives us a tremendous amount of functionality out of the box to manipulate our SVG's. First step is to include it in our project; there are many ways to do this, which you can find here

Snap.svg的优点是易于设置，并为我们提供了开箱即用的大量功能来操作SVG。 第一步是将其包含在我们的项目中； 有很多方法可以做到这一点，您可以在这里找到

初始化Snap SVG元素 (Initialise Snap SVG element)

// HTML
<svg class="hill-valley article"></svg>

// JS
var s = ne