svg动画制作

I've been reading David Walsh's blog for years. The tips and tutorials he shares have helped me fix a lot of problems. I love that I get to support him now by advertising TrackJS on his site. Plus, I get a chance to build some cool SVG animations!I'm not a designer or a marketer by trade. I'm a software developer, but as an entrepreneur I end up doing a bit of everything. I spent a lot of time sketching and googling to figure out how this works. I'd like to share what I've learned about designing and building animated SVG ads, like this one right here:

多年来，我一直在阅读David Walsh的博客。 他分享的技巧和教程帮助我解决了许多问题。 我喜欢现在通过在他的网站上投放TrackJS来支持他。 另外，我有机会制作一些很酷的SVG动画！我不是行业的设计师或营销商。 我是一名软件开发人员，但是作为一名企业家，我最终做了很多事情。 我花了很多时间进行素描和谷歌搜索来弄清楚它是如何工作的。 我想分享一下我在设计和制作SVG动画广告时所学到的知识，就像下面这样：

SVG的优势 (Advantages of SVG)

SVG, or Scalable Vector Graphic, an XML-based structure that defines the shapes, lines, and colors of an image in such a way that it can be viewed at any size and still retain a crisp look. SVG is not well suited to display photography images, but it is excellent for drawings, text, and shapes.

SVG或可伸缩矢量图形，这是一种基于XML的结构，它定义了图像的形状，线条和颜色，从而可以以任何大小查看它并保持清晰的外观。 SVG不太适合显示摄影图像，但是它非常适合绘制图形，文字和形状。

It is also a fantastic platform for animations, as the same CSS technologies that drive animation on the web can also animate the markup for SVGs.

它也是一个很棒的动画平台，因为在网络上驱动动画的相同CSS技术也可以为SVG标记添加动画。

SVG images are well supported by web browsers today, although Internet Explorer 9 and earlier may have some problems (big surprise).

如今 ，尽管Internet Explorer 9和更早版本可能存在一些问题(令人惊讶)，但Web浏览器很好地支持SVG图像 。

规格 (The Spec)

David gave us a standard banner spot at the top of content. The ad should be responsive from mobile to desktop sizes, up to the standard banner dimensions of 728px by 90px.

大卫在内容顶部为我们提供了一个标准的横幅广告。 广告应在移动设备尺寸和台式机尺寸之间做出响应，最大标准横幅尺寸为728px x 90px。

Our ad needs to quickly describe TrackJS and how we can help. We monitor your JavaScript for bugs and give you awesome error reports when they happen. We need to figure out a way to say this concisely and with a bit of humor.

我们的广告需要快速描述TrackJS以及我们如何提供帮助。 我们会监控您JavaScript中的错误，并在发生错误时为您提供出色的错误报告。 我们需要找到一种简洁而又幽默的说法。

We also need to be a responsible advertiser:

我们还需要成为负责任的广告客户：

1. Clearly differentiate from the page.
   与页面明显区分开。
2. Do not block or slow the content from loading.
   不要阻止或减慢内容的加载速度。
3. Do not distract the visitor from the content.
   不要分散访问者的注意力。

我的第一个动画广告 (My First Animated Ad)

I wanted to build something that plays off of "bugs". We had some Adobe Illustrator assets of a bug getting squashed for an earlier sticker that we can probably reuse. Maybe the bugs can fly over the ad and get squashed by the "free trial" button.

我想构建一些可以消除“错误”的东西。 我们压缩了一些Adobe Illustrator资产，以便减少一个错误，以便我们可以重新使用较早的标签。 这些错误可能会飞过广告，并被“免费试用”按钮压倒。

I started fumbling my way around the internet to figure out how to make this happen. I defined an SVG element in an HTML file and started learning. I set the height and width for the banner. Double that for the viewBox, which is like the window into the drawing, so that everything looks sharp on high-density displays.

我开始在互联网上摸索，弄清楚如何做到这一点。 我在HTML文件中定义了SVG元素并开始学习。 我设置横幅的高度和宽度。 将viewBox的尺寸加倍，就像进入图形中的窗口一样，以便在高密度显示器上一切看起来都很清晰。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="720px" height="90px" viewBox="0 0 1456 180" style="background-color:#2c3237"></svg>

And now I had a nice grey box! Small accomplishments.

现在我有了一个漂亮的灰色盒子！ 小成就。

Most of the ad was going to be static: our logo, description, and tagline. I drew those with Photoshop in the fonts and colors I wanted and exported it as an SVG. I copied the shape definitions that came out of that and pasted it into my SVG element as a new path.

大多数广告都是静态的：我们的徽标，说明和标语。 我用Photoshop用我想要的字体和颜色绘制了这些内容，然后将其导出为SVG。 我复制了其中的形状定义，并将其作为新路径粘贴到我的SVG元素中。

I made a button too, but I exported that as a separate SVG so that I could manipulate it separately later. I had something like this:

我也做了一个按钮，但是我将其导出为单独的SVG，以便以后可以单独操作。 我有这样的事情：

<svg xmlns="http://www.w3.org/2000/svg">
<path class="tjs-logo" d="..."/>
<path class="tjs-button" d="..."/>
</svg>

用CSS制作SVG动画 (Animating SVG With CSS)

Now to make some animations. I exported the bug animation from Adobe Illustrator as an SVG and grabbed the path data. I wanted to have a few bugs, but I didn't want to have multiple copies of the path data, as it was quite large. Fortunately, I found the SVG Symbol element, which lets us define shapes that can be instantiated many times. Just what I needed.

现在制作一些动画。 我从Adobe Illustrator中将错误动画导出为SVG，并获取了路径数据。 我想要一些错误，但是我不想拥有路径数据的多个副本，因为它非常大。 幸运的是，我发现了SVG Symbol元素，该元素使我们可以定义可以实例化多次的形状。 正是我所需要的。

<defs>
<symbol id="tjs-bug">
<g class="tjs-bug">
<path d="..." />
<path d="..." />
<path d="..." />
</g>
</symbol>
</defs>

Symbols get instantiated with the <use> element, which I created three of. I added a transform to each of them to reduce them down to 0% size so that they wouldn't be visible on the page right away.

符号由<use>元素实例化，我创建了三个元素。 我为每个按钮添加了一个转换，以将其缩小到0％，这样就不会在页面上立即显示它们。

<use class="tjs-bug-1" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-2" xlink:href="#tjs-bug" transform="scale(0)" />
<use class="tjs-bug-3" xlink:href="#tjs-bug" transform="scale(0)" />

I'd done a few things with CSS Animations, so it was great that you can embed CSS directly inside the SVG markup. You just need to surround the rules with the CDATA syntax so that it continues to be valid XML (although most browsers are very forgiving of this).

我已经使用CSS动画完成了一些工作，因此可以将CSS直接嵌入SVG标记中非常好。 您只需要使用CDATA语法来包围规则，以使它继续是有效的XML(尽管大多数浏览器对此都是非常宽容的)。

I defined a CSS keyframe for each of the three bugs that had the bug "fly" across the ad. Using a midway stop point in the keyframe and the ease tween to make it feel like the bug stopped and landed before moving on. Then finally attached the keyframe to the class name on each use element.

我为三个错误中的每个错误定义了一个CSS keyframe ，这些错误在整个广告中“飞”起来。 在关键帧中使用中间的停止点并进行ease补间，以使其感觉像虫子在继续前进之前就停下来了。 然后最后将关键帧附加到每个use元素上的类名称。

<svg …>
<style type="text/css"><![CDATA[
@keyframes flight-1 {
0% {
transform: translate(-100px, -40px) scale(2.5) rotate(105deg)
}
66% {
transform: translate(500px, 0) scale(2.5) rotate(85deg)
}
100% {
transform: translate(1800px, -60px) scale(2.5) rotate(85deg)
}
}
.tjs-bug-1 {
animation: 1.8s flight-1 1s forwards ease;
transform: scale(0)
}
  ]]></style>
<...>
</svg>

I used the same flow to export a bug squash drawing from Adobe Illustrator and add it to the SVG. I timed another keyframe animation to have it appear and grow just as the button slides down from the top. The whole thing happens fast enough that it feels like the button squashes one of the bugs.

我使用相同的流程从Adobe Illustrator导出错误南瓜图，并将其添加到SVG。 我为另一个关键帧动画设置了时间，使其随着按钮从顶部向下滑动而出现并增长。 整个过程发生得足够快，以至于感觉到按钮消除了其中一个错误。

Here's the final result from it. This version below is not minified or obfuscated, so you can pop-open your dev tools and see all the details of the final implementation.

这是它的最终结果。 以下版本未精简或混淆，因此您可以弹出您的开发工具并查看最终实现的所有详细信息。

下一代 (The Next Generation)

Building the first one was a lot of fun, and I learned a lot about SVGs along the way. This ad has been running for several months but now it's time for an update. This time, I wanted to tell a story that recognizes that JavaScript creeps into our apps in all sorts of unexpected ways, and when it fails it can have nasty consequences. JavaScript Happens.

构建第一个非常有趣，而且我在此过程中学到了很多有关SVG的知识。 这则广告已经投放了几个月，但现在该更新了。 这次，我想讲一个故事，该故事认识到JavaScript会以各种意想不到的方式渗入我们的应用程序，而当JavaScript失败时，可能会带来不良后果。 JavaScript发生了。

<object data="animated-happens.svg" type="image/svg+xml" style="width:100%;pointer-events:none;"></object>

For this ad, I worked with a talented illustrator to bring it to life. Spelunking through his code, I saw two important patterns that I had missed.

对于这则广告，我与一位才华横溢的插画家合作，使之栩栩如生。 通过他的代码，我看到了我错过的两个重要模式。

1.使用<animate>元素代替CSS (1. Using <animate> Elements instead of CSS)

Rather than using a large, embedded set of CSS rules to handle animating all the different elements, he included <animate> and <animateTransform> elements nested inside of the drawings to be animated. I can instantly see the utility of doing this, as I spent lots of time scrolling back and forth during my original development tweaking the timing.

他没有使用大量的嵌入式CSS规则来处理所有不同元素的动画，而是包括了嵌套在要动画的图形内部的<animate>和<animateTransform>元素。 我可以立即看到执行此操作的实用程序，因为在最初的开发过程中，我花了大量时间来回滚动调整时间。

Keeping the animation rules close to the objects to be animated is a huge win for productivity during the development, and any future maintenance that might be needed.

将动画规则保持在要动画的对象附近，这对于开发过程中的生产率以及将来可能需要的任何维护都是一个巨大的胜利。

2.将SVG引用为<object> (2. Referencing the SVG as an <object>)

Rather than including the SVG markup directly in the HTML document, as I had done, he had referenced an external SVG file using the <object> element. This allows for the SVG markup to be externally included and referenced in the DOM.

他没有像我所做的那样直接在HTML文档中包含SVG标记，而是使用<object>元素引用了一个外部SVG文件。 这允许SVG标记从外部包含并在DOM中引用。

<object data="animated-happens.svg" type="image/svg+xml"></object>

If we had referenced the SVG file using an <img> element instead, this creates a strict boundary between the SVG and the DOM. The implication of this is that the "load" event will not trigger after the SVG is loaded into cache, and the animation will only ever play once.

如果我们改用<img>元素引用了SVG文件，则会在SVG和DOM之间创建严格的边界。 这意味着在将SVG加载到缓存后，不会触发“加载”事件，并且动画只会播放一次。

结语 (Wrapping Up)

SVG animations are cool. They load fast, have lots of powerful options, and are widely compatible. When used responsibly, we can use them to tell short, impactful stories, then get out of the user's way.

SVG动画很棒。 它们加载速度快，具有许多强大的选项，并且具有广泛的兼容性。 负责任地使用时，我们可以使用它们来讲述简短而有影响力的故事，然后摆脱用户的视线。

The web gets better every day. When it breaks, I'm so proud to be part of making it better and fixing its bugs. I'd love to help you too, grab a totally free, no credit card or anything, trial of TrackJS today.

网络每天都在变得更好。 当它崩溃时，我为能更好地改进它和修复其错误而感到自豪。 我也想为您提供帮助，立即获得TrackJS的完全免费，无需信用卡或其他任何服务。

翻译自: https://davidwalsh.name/building-animated-svg-banners

svg动画制作