svg配合css3动画_与Sarah Drasner一起使用CSS，JS和SVG进行动画处理，并避免倦怠

svg配合css3动画

In this episode of the Versioning Show, Tim and David are joined by Sarah Drasner, a teacher, author, consultant and staff writer at CSS-Tricks. They discuss animating with CSS, JavaScript and SVG, the advantages of animating with SVG over static graphics, SVG 2 and mesh gradients, staving off burnout, public speaking and writing, understanding better through teaching, paid vs community work, teaching in the Greek islands, and drawing snakes and lizards and dead things for encyclopedias.

在Versioning Show的这一集中，Tim和David与CSS-Tricks的老师，作家，顾问和职员作家Sarah Drasner一起参加了会议。 他们讨论了使用CSS，JavaScript和SVG进行动画处理，使用SVG进行动画处理优于静态图形，SVG 2和网格渐变，避免倦怠，公开演讲和写作，通过教学更好地理解，有偿与社区工作，在希腊岛屿上进行教学的优势，并为百科全书画蛇和蜥蜴以及死亡的东西。

Subscribe on iTunes | Subscribe on Stitcher

在iTunes上订阅 | 在订书机上订阅

Thank you to HelloSign for sponsoring this episode.

感谢HelloSign赞助此剧集。

显示笔记 (Show Notes)

• HelloSign API – Embed documents directly on your website with just a few lines of code

  HelloSign API –仅需几行代码即可将文档直接嵌入您的网站

• Sarah on Twitter: @Sarah_Edo

  莎拉(Twitter)： @Sarah_Edo

• SVG Animation

  SVG动画

• Sarah on CodePen

  莎拉在CodePen上

• Web Animations Workshop

  网络动画工作室

• Sarah’s website

  莎拉的网站

• GreenSock

  绿袜子

• mo.js

  mo.js

• Web Animations API

  Web动画API

• D3.js

  D3.js

• React-Motion

  React运动

• Field Museum

  野战博物馆

• Stack Overflow

  堆栈溢出

• CSS-Tricks

  CSS技巧

• David Walsh Blog

  David Walsh博客

• Amelia Bellamy-Royds

  阿米莉亚·贝拉米·罗伊斯

• Vue

  Vue

• Say hello on Twitter: @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

  在Twitter上问好： @mdavidgreen | @tevko | @versioningshow | @sitepointdotcom

对话重点 (Conversation Highlights)

the thing that I reminded myself when I went into consulting was the worst-case scenario is I get a job. It’s not like there aren’t engineering jobs out there or out there for my skill set, especially my experience history. The worst-case scenario was just going back to what I was doing. That wasn’t so bad either.

当我进入咨询行业时，我想起的最糟糕的情况是我找到了一份工作。 并不是因为我的技能，尤其是我的经验，没有或没有工程工作。 最坏的情况就是回到我正在做的事情。 也不错。

---

---

animation, when done well, is really, really powerful to guide your users. You can actually change your lead conversion, because loaders have huge impacts on perceived performance.

动画制作得很好，可以非常有效地指导用户。 实际上，您可以更改销售线索转换，因为装载机会对感知的性能产生巨大影响。

---

---

To stave off burnout, I would make little projects for myself on the weekends. I was just like, “Okay. It’s Sunday afternoon. I have a mimosa. My significant other and I are going hang out and watch TV. I’m just going to code a silly SVG animation.”

为了避免倦怠，我会在周末为自己做一些小项目。 我就像，“好吧。 今天是星期天下午。 我有含羞草。 我的重要同伴和我要出去玩，看电视。 我只是要编写一个愚蠢的SVG动画。”

---

---

the world of SVG opens the door to so much stuff that is just either complicated or impossible to do with static graphics — especially for a UI/UX animation.

SVG的世界打开了这么多东西的大门，这些东西对于静态图形来说要么是复杂的，要么是不可能的，尤其是对于UI / UX动画而言。

---

---

I started off as a scientific illustrator, which means that I drew snakes and lizards and dead things for encyclopedias.

我最初是作为科学插图画家开始的，这意味着我为百科全书画了蛇，蜥蜴和尸体。

---

---

The thing I always try to remind them is that I haven’t been doing the speaking part that long. It’s just become a rolling ball, and that they shouldn’t feel bad if they don’t have that much experience, because that’s something that you can always still get.

我一直想提醒他们的事情是，我从事演讲的时间还不够长。 这只是一个滚滚球，如果他们没有那么多经验，他们应该不会感到难过，因为那是您始终可以得到的东西。

---

---

I would find something out or start to learn something, and then if I could write it down for other people, I had this two birds with one stone thing of not only could I grasp it better but other people could do stuff with it too. And that’s super exciting to me

我会发现一些东西或开始学习一些东西，然后如果我可以把它写下来给别人，我就拥有了这两只鸟，只有一块石头，不仅可以更好地理解它，而且其他人也可以用它做些事情。 这让我非常兴奋

---

---

I tried really, really hard to cover a gamut of technology, a gamut of techniques and address some concerns that designers have about optimization and how you work with this stuff to reduce path points and make it performant.

我真的非常努力地介绍了全部技术，全部技术，并解决了设计师对优化以及如何使用这些东西以减少路径问题并提高性能的担忧。

---

---

The mesh gradient part is, “Ah, what the web could be,” kind of thing. For me, like an SVG person, that’s the equivalent to a layout person really being into CSS Grid. It’s like a total game changer.

网格渐变部分是“啊，网络可能是什么”之类的东西。 对我而言，就像一个SVG人员一样，这等效于实际上是CSS Grid中的布局人员。 就像彻底改变游戏规则。

成绩单 (Transcript)

Tim: 蒂姆：

Hey, what’s up everybody? This is Tim Evko …

嘿，大家好吗？ 这是Tim Evko…

David: 大卫：

… and this is M. David Green …

…这是大卫·格林(M. David Green)…

Tim: 蒂姆：

… and you’re listening to episode number 31 of the Versioning Podcast.

…，您正在收听Versioning Podcast的第31集。

David: 大卫：

This is a place where we get together to discuss the industry of the web from development to design, with some of the people making it happen today, and planning where it’s headed in the next version.

在这里，我们可以聚在一起讨论从开发到设计的网络行业，其中一些人将其付诸实践，并计划下一个版本的发展方向。

Tim: 蒂姆：

Today, we’re talking with Sarah Drasner, who is a writer at CSS-Tricks. She is an author, a consultant, and gives some pretty excellent talks on SVG and animations. We’re going to talk to her today about all of those things and much more. So let’s go ahead and get this version started.

今天，我们正在与CSS-Tricks的作家Sarah Drasner进行交谈。 她是作家，顾问，并就SVG和动画进行了一些非常出色的演讲。 今天，我们将与她谈谈所有这些事情以及更多。 因此，让我们开始安装该版本。

David: 大卫：

Hey, Sarah. Welcome to the show.

喂，莎拉。 欢迎参加演出。

Sarah: 莎拉：

Hi. Thanks for having me.

你好 感谢您的款待。

David: 大卫：

Thank you for joining us. This is the Versioning Show, and we usually like to start the show with a philosophical question. And your philosophical question for the day is: in your current career, what version are you, and why?

感谢您加入我们。 这是版本显示，我们通常希望从一个哲学问题开始显示。 您今天的哲学问题是：在您当前的职业中，您是哪个版本，为什么？

Sarah: 莎拉：

Well … that’s a good question. I think I’ve probably gone through a breaking change at some point. [Laughter] This is probably 2.0 or something, or 3.0, but not because it’s super advanced, but just because they were breaking versions.

好吧……这是一个好问题。 我想我可能已经经历了重大变革。 [笑声]这可能是2.0或类似的东西，或者是3.0，但这并不是因为它非常先进，而是因为它们是最新版本。

David: 大卫：

How do you describe what your career is these days? Because you’re doing a lot of different things.

您如何描述这几天的职业？ 因为您正在做很多不同的事情。

Sarah: 莎拉：

Yeah, I am. I kind of like that. I’m a naturally curious person. I have been a developer and designer for 15 years, so I kind of started when those things weren’t very separate, actually, and things were done in tables and all the neckbeardy things. I have been working ever since. For the majority of my time working as a dev, I was really a generalist and worked on anything from WordPress theme development to managing giant component libraries, to being a lead front end. Projects ranging from … for typical front-end kind of duties, and a bit of back end but not super full stack or anything.

对我是。 我有点喜欢 我是一个天生好奇的人。 我从事开发人员和设计师已有15年，所以我开始的时候这些东西并不是很分开，实际上是在表格中完成的，而所有麻烦的事情都是在表格中完成的。 从那以后我一直在工作。 在我作为开发人员的大部分时间里，我确实是一名通才，并且从事从WordPress主题开发到管理巨型组件库，再到前端的工作。 项目范围从…来完成典型的前端任务，到一点后端，但不是超满栈或其他任何东西。

Last year, I quit my job at Trulia. I was a manager of UX design and engineering there, and decided to go consultant freelance, because I was working on a lot of stuff and there were a lot of opportunities arising, and I’m pretty happy doing this, and businesses is booming. So it’s pretty nice. I work on different projects. I’m curious all the time, so I get to try out different things constantly, which I really enjoy.

去年，我辞去了Trulia的工作。 我当时是UX设计和工程部的经理，并决定选择自由顾问，因为我正在从事很多工作，并且有很多机会，我对此感到非常高兴，并且生意兴隆。 因此非常好。 我从事不同的项目。 我一直都很好奇，所以我会不断尝试各种不同的东西，这是我真正喜欢的。

David: 大卫：

This is cool. You’ve basically re-released yourself as a freelancer to the world?

这很酷。 您基本上已经重新成为自由职业者了吗？

Sarah: 莎拉：

Yeah. I did that about a year ago.

是的 我大约一年前做了。

Tim: 蒂姆：

Was that a challenging process for you?

这对您来说是一个具有挑战性的过程吗？

Sarah: 莎拉：

I think it was a little scary at first, because I was getting a lot of offers to do consultant work and Val Head and I started a company called Web Animations Workshop, where we were going to start doing workshops together. It was like, okay, well, I have work for now, but what’s going to happen in four months from now when I don’t? That was a little bit intimidating at the time, but actually it’s been the opposite problem, where I have more work that I know what to do with — which is a good problem to have. I’ve been pleasantly surprised at how it’s gone. I think the only unpleasant surprise is my taxes. Consultant taxes — spoiler alert! — is really complicated. [Laughs]

我认为起初有点吓人，因为我得到了很多从事顾问工作的要约，而瓦尔·海德和我创办了一家名为Web Animations Workshop的公司，我们将在这家公司一起开始进行研讨会。 就像，好吧，好吧，我现在工作了，但是从现在起的四个月后，如果我没有工作，将会发生什么？ 当时这有点令人生畏，但实际上这是相反的问题，我需要做更多的工作，知道该怎么做，这是个好问题。 我对它的消失感到惊讶。 我认为唯一令人不快的是我的税。 顾问税-扰流板警报！ -真的很复杂。 [笑]

David: 大卫：

We could do an entire show just about how to manage your business as an independent consultant!

我们可以做一个关于如何作为独立顾问来管理您的业务的整个展览！

Sarah: 莎拉：

It’s so true.

是真的

David: 大卫：

One nice thing about the way you’re working now — you have pushed away the illusion of security that comes from working with the company, because whether you’re working for a big brand or small, you never know if in the next four months there’s going to be more work for you or if the company is going to go in a different direction.

关于您现在的工作方式的一件好事–您已经摆脱了与公司合作带来的安全性幻想，因为无论您是为大品牌还是小品牌工作，您都不知道接下来的四个月是否如果您要为公司工作，或者公司的发展方向有所不同，将会有更多工作要做。

Sarah: 莎拉：

Totally. I’ve worked for giant companies, but I’ve also worked for small startups where it’s like, “Oh, we have our seed round. That’s good for now,” kind of stuff. [Laughs] It’s the nature of the business, but I think also the thing that I reminded myself when I went into consulting was the worst-case scenario is I get a job. It’s not like there aren’t engineering jobs out there or out there for my skill set, especially my experience history. The worst-case scenario was just going back to what I was doing. That wasn’t so bad either.

完全。 我曾为大型公司工作，但也曾为小型初创公司工作，就像：“哦，我们进行了种子融资。 到目前为止，这很好。” [笑]这是业务的本质，但我认为我进入咨询行业时提醒自己的是，最糟糕的情况是我找到了一份工作。 并不是因为我的技能，尤其是我的经验，没有或没有工程工作。 最坏的情况就是回到我正在做的事情。 也不错。

David [4:13]: 大卫[4:13] ：

That’s very true. It’s exciting too, because you’re putting yourself in charge of your career. I’m really interested in these web animation workshops.

没错 这也很令人兴奋，因为您正在掌控自己的职业生涯。 我对这些网络动画研讨会非常感兴趣。

Sarah: 莎拉：

Basically Val and I go around … It used to be just around the country, now it’s going to be around the world when we hit Paris this year. Do these two day workshops or one day workshops where we have a plethora of material that we cover. We’re like a Venn diagram of interest and abilities when it comes to web animation. We just naturally noticed we tend to agree a lot on stuff. It came naturally. We were friends first, and started talking about web animation, and when we’d hangout and stuff we’re like, “Man, we’re really closely aligned on a lot of stuff.” So the workshop was actually pretty easy to put together.

基本上，Val和我四处逛逛...过去只是在全国范围内，而当我们今年在巴黎开业时，它将遍及世界各地。 在这两天的工作坊或一天的工作坊中，我们涵盖了很多材料。 关于网络动画，我们就像维恩的兴趣和能力图。 我们只是自然地注意到，我们倾向于就某些东西达成一致。 它是自然而然的。 我们首先是朋友，然后开始谈论网络动画，当我们进行视频群聊和诸如此类的事情时，我们会说：“伙计，我们在很多事情上都保持紧密联系。” 因此，研讨会实际上很容易组合在一起。

David: 大卫：

What does the workshop entail?

研讨会需要什么？

Sarah: 莎拉：

We cover the gamut. We start off with some theory. She goes over some theory about animation as a whole, and what can be learned from the history of animation, and what can be learned about the history of easings and timings and spacings and things like that. I tend to go into some UI/UX considerations for animation. We talk a little bit about getting buy-in, or integrating into a design system.

我们涵盖了整个范围。 我们从一些理论开始。 她介绍了有关动画整体的一些理论，可以从动画的历史中学到什么，以及关于缓动，定时和间距以及类似事物的历史可以学到的东西。 我倾向于对动画进行一些UI / UX考虑。 我们谈论有关获得认可或集成到设计系统中的内容。

Then we start to pull into at first CSS animation, then we go to JavaScript animation with GreenSock. Then we do mo.js, then we do React implementations, and then we talk about web animation performance. And if we have time, we have the slides and stuff for Web Animations API and also D3, but we tend to get to one of those not the other one. We have tons of material.

然后，我们首先开始介绍CSS动画，然后使用GreenSock进入JavaScript动画。 然后我们执行mo.js ，然后执行React实现，然后讨论网络动画性能。 如果有时间，我们会提供Web动画API和D3的幻灯片和资料，但我们倾向于其中之一而不是另一个。 我们有大量的材料。

Tim: 蒂姆：

I was going to say, it sounds like there’s not much to cover at all really.

我要说的是，听起来好像真的没有太多要讲的。

[Chuckling]

[咯咯笑]

Sarah: 莎拉：

There’s a lot to keep into consideration. Oh, we talk about React-Motion also and SVG animation. God, I’m missing whole swaths of our workshop. We go over what it’s like to animate SVG and optimize and stuff.

有很多需要考虑的地方。 哦，我们也谈论React-Motion和SVG动画。 上帝，我想念我们整个工作坊。 我们讨论了对SVG进行动画处理以及优化和填充的过程。

Tim: 蒂姆：

It’s very interesting, given that there’s so much material about animation to go over. Because, in my experience, I’m a lead front-end engineer where I work right now. I’m implementing all these designs that I get from our design team, but it always seems like animation is never really given much thought.

鉴于涉及动画的材料太多，这非常有趣。 因为根据我的经验，我是一名前端前端工程师，现在我在这里工作。 我正在实施从设计团队获得的所有这些设计，但是似乎从来没有真正考虑过动画。

Sarah: 莎拉：

That’s why we focus on it and why we talk about it, because actually animation, when done well, is really, really powerful to guide your users. You can actually change your lead conversion, because loaders have huge impacts on perceived performance. There’s just a ton of reasons. Users are building spatial awareness. If you can hide and display things as they need then you clean up the space, you make it much more engaging for them. But when it’s done poorly, it can be jarring, which I think why it gets a bad rap sometimes.

这就是为什么我们专注于它，也为什么谈论它，因为实际上，动画如果做得很好，就可以非常有效地指导用户。 实际上，您可以更改销售线索转换，因为装载机会对感知的性能产生巨大影响。 有很多原因。 用户正在建立空间意识。 如果您可以根据需要隐藏和显示事物，则可以清理空间，使它们更具吸引力。 但是，如果做得不好，可能会令人不快，我想为什么有时候会收到不好的说唱。

So it’s really important to do it well, and that’s what we study. The thing about animation too is that you really need to be using the right tool for the job. If you are working with CSS animation when CSS animation is just not going to cut it and you need to move to JavaScript, that’s something that you have to work through.

因此，做好它确实很重要，这就是我们研究的内容。 关于动画的一件事是，您确实需要为工作使用正确的工具。 如果您正在使用CSS动画，而CSS动画不会被剪切，而您需要转向JavaScript，那是您必须要完成的工作。

React-Motion is really good at a certain type of motion that‘s interruptible, it’s a single gesture, but it’s not good at sequential movement, and that’s part of the way that the author designed it. We go over when to use what, where: this is really good for this kind of thing, this is really good for this text stack. Get your hands on it, work with it a little bit. The students can see for themselves what we mean when we say that. It’s not just like, “Take us at our word.” It’s like, “Okay. You play around with it, see what you think,” because there’s a lot of considerations. You don’t want to put a huge thing into a library or make an investment there and realize it’s the wrong choice for your needs or your customer’s needs.

React-Motion确实擅长于某种可中断的动作，它是单个手势，但不擅长顺序运动，这是作者设计动作的一部分。 我们回顾一下什么时候在什么地方使用什么：这对这种事情真的很有用，对这个文本堆栈真的很有用。 动手操作它，一点点地使用它。 当我们说这些话时，学生们可以自己理解我们的意思。 这不仅仅像是“相信我们”。 就像，“好吧。 您可以尝试一下，看看您的想法，”因为有很多考虑因素。 您不想将巨大的东西放入图书馆或在那里进行投资，而意识到这是满足您或客户需求的错误选择。

Tim [8:16]: 提姆[8:16] ：

That is very, very good advice. I’ve more than once gotten bitten by approaching an animation with the wrong strategy from the get-go. I’m curious, though, how you got in to the subject of animation to begin with?

那是非常非常好的建议。 我不止一次地被一开始用错误的策略逼近动画。 不过，我很好奇，您是如何开始动画的？

Sarah: 莎拉：

That’s actually interesting. I was a lead front end and also managing giant component libraries, and at times I would get burned out — not just because there’s so much work to do, and just giant systems are complicated, and there’s social politics between design and engineering that you have to navigate if you’re going to work with both worlds. To stave off burnout, I would make little projects for myself on the weekends. I was just like, “Okay. It’s Sunday afternoon. I have a mimosa. My significant other and I are going hang out and watch TV. I’m just going to code a silly SVG animation.”

这实际上很有趣。 我是前端前端，还管理大型组件库，有时我会精疲力尽–不仅是因为要做的工作太多，大型系统也很复杂，而且设计和工程之间存在着社会政治导航是否要同时使用两个世界。 为了避免倦怠，我会在周末为自己做一些小项目。 我就像，“好吧。 今天是星期天下午。 我有含羞草。 我的重要同伴和我要出去玩，看电视。 我只是要编写一个愚蠢的SVG动画。”

It was at first, I was just curious and just interested in it, and then I noticed it really helped. Even though I had worked some during the weekend, I would come back to work feeling super jazzed. You think, that doesn’t quite make sense. You’d think that the more time off you have, the better you’d feel, but I was noticing that even if I took a vacation, I would feel better for a little while and then start to feel like, “Ugh.” Again soon, two weeks later, three weeks later. What I was really missing was the excitement.

起初，我只是好奇并且对它感兴趣，然后我发现它确实很有帮助。 即使我在周末工作过一些，我也会回到工作现场，感觉超级爵士。 您认为，这不太有意义。 您可能会认为，休假时间越长，您的感觉就会越好，但是我注意到，即使休假了，我也会感到好一阵子，然后开始感觉像“丑”。 又过了两周，又过了三周。 我真正想念的是兴奋。

That dopamine rush of like, “Wow. I got this thing to work and it’s super strange and maybe a little ridiculous.” I think I initially got into it because of that, and also because of UX and UI concerns. There were so many things to consider when we were dealing with animation at work, and I really wanted to do it well. I think some of this stuff did immediately translate to something I could use at my job, and that was like doubly rewarding. I’m making something ridiculous and silly on the weekend and then I can also apply it once I got to work and be like, “Look, everyone. We can do this now.” They’re like, “Whoa. Okay cool.” That was probably one of the biggest shifts in my career.

像这样的多巴胺热潮，“哇。 我让这件事起作用了，这非常奇怪，也许有些荒谬。” 我想我最初是因为这个原因，也因为用户体验和UI的问题。 当我们在工作中处理动画时，有很多事情要考虑，我真的很想做得好。 我认为其中一些东西确实可以立即转化为我可以在工作中使用的东西，这就像加倍的报酬。 周末我在做一些荒谬而愚蠢的事情，然后我一上班就可以应用它，就像“看，每个人。 我们现在可以做到这一点。” 他们就像，“哇。 好吧，酷。” 那可能是我职业上最大的转变之一。

David: 大卫：

Everybody who just heard this: SVG animation is addictive.

刚刚听到此内容的每个人：SVG动画令人上瘾。

Sarah: 莎拉：

It is definitely addictive!

绝对上瘾！

[Laughter]

[笑声]

David: 大卫：

It’s funny, because I think of SVG primarily as — it’s the scalable, vector-based way of presenting images on the screen, but I don’t think of it immediately as an alternative for animation. And yet, it offers a number of advantages in certain contexts. I’m curious, what have you discovered to be the advantages for SVG animation?

这很有趣，因为我主要将SVG视为—这是一种可扩展的，基于矢量的在屏幕上呈现图像的方式，但我不认为立即将其作为动画的替代方法。 但是，它在某些情况下具有许多优势。 我很好奇，您发现SVG动画的优势是什么？

Sarah: 莎拉：

SVG animation is not an alternative to animation. SVG animation is animation, and it uses the same tools. But you have different concerns with SVG. If you’re manipulating a

or a bitmap — like you’re used to working with maybe PNGs or JPEGs for graphics. The thing about them is they’re flat. If you have to move around specific pieces of a JPEG, like let’s say you have an ocean scene with a boat in it, you’d have to actually cut up the boat from the sea and move them around separately, kind of thing.

SVG动画不能替代动画。 SVG动画是动画，它使用相同的工具。 但是您对SVG有不同的担忧。 如果您要操纵

或位图-就像您习惯使用PNG或JPEG用于图形一样。 关于他们的事情是他们很平坦。 如果您必须在JPEG的特定部分周围移动，例如假设您的海洋场景中有船，则实际上必须将船从海中切下并分开移动，这是一种事情。

It gets a little hacky. You have to do some positioning. Maybe you have a position: relative on the containing unit. You have a position: absolute inside to have the boat moving. SVG is a graphic that has a navigable DOM. It’s built with math. There is an ability to dive right into it, grab a piece of it and move it around in a way that a static graphic can’t do. It opens up doors for accessibility. You can play with it like a piece of string, because you actually literally have these Béziers that are the curve commands that you can manipulate with requestAnimationFrame().

它有点hacky。 您必须进行一些定位。 也许您有一个position: relative包含单位上的position: relative 。 您有一个position: absolute要让船运动。 SVG是具有可导航DOM的图形。 它是用数学构建的。 可以直接潜水，抓取一部分并以静态图形无法实现的方式移动它。 它为无障碍打开了大门。 您可以像一段字符串一样玩它，因为实际上您实际上拥有这些Béziers，它们是可以使用requestAnimationFrame()操纵的曲线命令。

There’s so many cool and interesting things you can do with it. All of the things that you know about CSS animation or JavaScript animation can be applied to SVG animation. They’re not two different things. But the world of SVG opens the door to so much stuff that is just either complicated or impossible to do with static graphics — especially for a UI/UX animation. If we’re talking , that’s a whole other thing, but if you’re talking about manipulating stuff on the page, SVGs are really powerful, and they’re super small, so they’re really performant.

您可以使用它完成很多有趣的事情。 您对CSS动画或JavaScript动画了解的所有知识都可以应用于SVG动画。 他们不是两回事。 但是SVG的世界打开了这么多东西的大门，这些东西对于静态图形来说要么是复杂的，要么是不可能的，尤其是对于UI / UX动画而言。 如果我们正在谈论 ，那完全是另一回事，但是如果您正在谈论操纵页面上的东西，那么SVG确实非常强大，而且它们非常小，因此它们确实具有出色的性能。

David [12:52]: 大卫[12:52] ：

I love that. That’s a really clear way of explaining why it’s important for people to understand this particular approach to presenting this information.

我喜欢那个。 这是一种非常清晰的方式，可以解释为什么人们理解这种呈现信息的特殊方法很重要。

Tim: 蒂姆：

Also I really hope someone makes a t-shirt with the phrase, “SVG, it’s built with math,” on it, because I’ll buy five of those.

我也真的希望有人在上面印上“ SVG，它是用数学构建的”字样的T恤，因为我会买其中的五个。

[Laughter]

[笑声]

Sarah: 莎拉：

That would actually be a really fun one to do. If you got a designer who could do really crazy mathy kind of graphics, that would be nice.

这实际上是一件非常有趣的事情。 如果您有一位可以做出真正疯狂的数学图形的设计师，那将是很好的。

David: 大卫：

Maybe somebody who had a background in scientific design.

也许有人具有科学设计背景。

Sarah: 莎拉：

That’s true.

确实如此。

David: 大卫：

Which I believe is one of your backgrounds.

我相信这是您的背景之一。

Tim: 蒂姆：

I was going to say, speaking of backgrounds, I think we have yet to hear about yours.

我要说的是背景，我想我们还没有听说过您的背景。

Sarah: 莎拉：

Oh, yeah. I started off as a scientific illustrator, which means that I drew snakes and lizards and dead things for encyclopedias. My parents are scientists, and I was getting into art at the time, so that was my way of rebelling. But of course, the way to be the most nerdy as possible while drawing is to be a scientific illustrator. You can’t get that far away from your parents. I started working at the Field Museum in Chicago. It’s the Field Museum of Natural History. They are really a cool museum. They have that giant SUE T-Rex thing.

哦耶。 我最初是作为科学插图画家开始的，这意味着我为百科全书画了蛇，蜥蜴和尸体。 我的父母是科学家，那时我正进入艺术领域，所以这是我的反叛方式。 但是，当然，在绘画时要尽可能保持书呆子的方式是成为科学插图画家。 父母离你太远了。 我开始在芝加哥的菲尔德博物馆工作。 这是菲尔德自然历史博物馆。 他们真的是一个很酷的博物馆。 他们拥有SUE T-Rex巨型物品。

The reason why people used to use drawings instead of, say, a photo, is that a photo necessarily has a depth of field. So if you have something that’s small, you have an aperture and something is blurry always. That’s why they would hire people like me to draw drawings. But, while I was working there, they invented a type of camera that took images at every level of the thing and then composited them together to make a totally crisp image and I was soon not really that employable anymore. Even if that machine is expensive, they buy it once and they don’t have to buy it again.

人们之所以使用图纸而不是照片来代替，是因为照片一定具有景深。 因此，如果您的物体很小，那么您的光圈就会很大，并且物体总是模糊的。 这就是为什么他们会雇用像我这样的人来绘制图纸的原因。 但是，当我在那儿工作时，他们发明了一种照相机，可以在事物的各个层面上拍摄图像，然后将它们合成在一起，从而得到完全清晰的图像，我很快就失去了工作能力。 即使那台机器很昂贵，他们也只需购买一次，而不必再次购买。

But they liked me, I think. They were like, “Oh, we want to keep you on. Can you build websites?” This is back in 2000. It’s a while ago. That was back in the days where you could pick up a book like HTML for Dummies and learn in a weekend kind of thing. The tech stack was not complicated; it was really, really simple. It was table layouts. It was inline JavaScript — which is cool again! People weren’t even — at the museum at the time — people weren’t even using CSS yet. It was still kind of like, “This is controversial.” [Chuckles]

但是我认为他们喜欢我。 他们就像，“哦，我们想让您继续。 您可以建立网站吗？” 这是2000年的事。 那是在过去，您可以拿起诸如HTML的傻瓜书之类的东西，并在周末学习一些东西。 技术栈并不复杂。 这真的非常非常简单。 这是表格布局。 那是内联JavaScript-再次很棒！ 人们甚至都没有(当时在博物馆里)人们甚至还没有使用CSS。 仍然有点像，“这是有争议的。” [笑声]

I started to learn table layouts, but the webmaster there taught me more and taught me industry standard practices and stuff. I started building sites for them, and then I built sites for … Once I was in the scientific community, people knew about me so I built sites for UCSF and Stanford and like a couple of other nerdy places. Then I went to grad school, and then I became a professor in the Greek islands. I was a study abroad professor there for four years, and took students around to the different islands and taught them about the histories there and did some digital studies.

我开始学习表格布局，但是那里的网站管理员教了我更多的知识，并教了我行业标准的做法和知识。 我开始为他们建立网站，然后为……建立网站。当我进入科学界后，人们对我有所了解，所以我为UCSF和斯坦福以及其他几个书呆子的地方建立了网站。 然后我上了研究生院， 然后成为希腊诸岛的教授。 我是在那里的留学教授四年，并带学生到了不同的岛屿，并向他们传授了那里的历史，并进行了一些数字研究。

I still did website stuff on the side, because I was paid $10K a year, I think — like really, really low teacher salary. It turns out you can’t not pay your student loans for that long. I eventually did have to get a real job. I came back to the States and started working for an agency here. Then I’ve just been working in the San Francisco tech scene ever since.

我仍然在做网站方面的工作，因为我认为我的年薪是1万美元，就像老师的工资真的很低一样。 事实证明，您不能长期支付学生贷款。 我最终确实必须找到一份真正的工作。 我回到美国，开始在这里工作。 从那时起，我就一直在旧金山的技术领域工作。

Tim [16:35]: 蒂姆[16:35] ：

I have to say, in 31 episodes, that’s probably one of the more interesting origin stories that we’ve heard so far.

我必须说，在31集中，这可能是我们迄今为止所听到的最有趣的起源故事之一。

Sarah: 莎拉：

[Chuckles] I’m a little older, so I have more time to generate stories.

[笑声]我年龄大一点，所以我有更多的时间来创作故事。

David: 大卫：

I love how you’ve put it together. But you left out one part that I find particularly interesting, which is that you went into public speaking and writing, which isn’t something that a lot of nerdy tech people tend to go into.

我喜欢你把它放在一起的方式。 但是您遗漏了一个我觉得特别有趣的部分，那就是您参加了公开演讲和写作，这不是很多书呆子技术人员都喜欢的内容。

Sarah: 莎拉：

Yeah. I guess that stuff really only started the last year or so. It’s gotten really fast. I’m invited to a lot of stuff now, which is really awesome, but when people ask me about … A lot of people contact me wanting to speak, especially like women in tech, and for advice and mentorship. The thing I always try to remind them is that I haven’t been doing the speaking part that long. It’s just become a rolling ball, and that they shouldn’t feel bad if they don’t have that much experience, because that’s something that you can always still get. Put that word out there that if you want to speak, definitely keep trying. It’s not like the first time you submit, you get all the speaking engagements. It’s like you try and then you show up for it and it comes as it goes.

是的 我猜这些东西实际上只是在去年左右才开始的。 它真的很快。 现在，我受邀参加很多工作，这确实很棒，但是当人们问我有关问题时……很多人想与我联系，尤其是像从事科技行业的女性一样，并希望获得建议和指导。 我一直想提醒他们的事情是，我从事演讲的时间还不够长。 这只是一个滚滚球，如果他们没有那么多经验，他们应该不会感到难过，因为那是您始终可以得到的东西。 把这个词放在那儿，如果您想说，一定要继续尝试。 这与您第一次提交时并没有获得所有演讲机会一样。 就像您尝试然后出现在屏幕上一样。

David: 大卫：

I know you’ve also been writing for a bit longer than that though, right?

我知道您的写作时间还不止于此，对吗？

Sarah: 莎拉：

I guess writing and teaching for me has always been a way to understand things better, too. I was a professor before, so I’m familiar with the teaching format. And what I’ve noticed is, I grasp a concept much more when I have to write it down. When I worked for big companies, that wasn’t a lot of times in the form of documenting what I was making — like writing a bunch of code, then documenting what we did for a giant system or something like that.

我想对我来说写作和教学也一直是一种更好地理解事物的方式。 我以前是一名教授，所以我熟悉教学形式。 我注意到的是，当我不得不写下来一个概念时，我会掌握的更多。 当我在大公司工作时，这并不经常以记录我所做的事情的形式进行–例如编写一堆代码，然后记录我们为大型系统所做的工作或诸如此类的事情。

When it comes to community work, what I thought was cool was like, I would find something out or start to learn something, and then if I could write it down for other people, I had this two birds with one stone thing of not only could I grasp it better but other people could do stuff with it too. And that’s super exciting to me, especially when I see SVG animations and somebody is like, “I learned this from reading Sarah’s thing.” That’s the coolest feeling in the world — that somebody is able to do something because of something that you taught them, especially because the community has taught me personally so much stuff.

当谈到社区工作时，我认为很酷，就像我会发现一些东西或开始学习一些东西，然后如果我可以把它写下来给其他人写下来，那么我有两只鸟，不仅拥有一块石头，而且我可以更好地掌握它，但是其他人也可以用它做些什么。 这让我感到非常兴奋，尤其是当我看到SVG动画并且有人说：“我从阅读Sarah的东西中学到了这一点。” 这是世界上最酷的感觉-某人之所以能够做某事，是因为您教给他们的东西，尤其是因为社区亲自教了我很多东西。

Stack Overflow — I am indebted to them for the rest of my life, and same with CSS-Tricks and same with David Walsh Blog. There’s so many concepts that I’ve learned because the community is so open, that giving back felt pretty good.

堆栈溢出 -我一辈子都对他们感激不尽， CSS-Tricks和David Walsh Blog也一样 。 我学到了很多概念，因为社区是如此开放，回馈的感觉很好。

David: 大卫：

It sounds like that can be addictive too.

听起来这也会让人上瘾。

Sarah: 莎拉：

Yeah, definitely.

是的，当然。

David: 大卫：

What kind of problems do you see people coming to you with around the issues that you’ve been teaching?

您看到人们围绕您一直在教的问题遇到什么样的问题？

Sarah [19:36]: 莎拉[19:36] ：

People come to me with a bunch of different things. I would say that the work that they come to me with for contract work is a little bit different from the community work that I do. For contract work, it’s usually either how do I get animation into this giant system and can you come teach us how to do that, and what the concerns are. Sometimes people hire me to teach them about SVG, or sometimes people mocked up an SVG animation for a client and then couldn’t figure out how to do it.

人们带着很多不同的东西来找我。 我要说的是，他们从事合同工作时带给我的工作与我从事的社区工作略有不同。 对于合同工作，通常要么是如何将动画导入到这个庞大的系统中，要么您可以教会我们如何做到这一点，以及所关注的问题。 有时人们雇用我来教他们有关SVG的知识，有时人们为客户模拟SVG动画，然后又不知道该怎么做。

Sometimes I’m called in as a last ditch thing to fix the thing. I get a myriad of stuff and some are just animation user flows, microinteraction kind of things. The community work that people usually ask me to do is more along the lines of someone tweeting at me at 2:00 AM, “I can’t figure this out. I don’t know why the stroke is not there. This has to be shipped for production tomorrow. Please help. Here’s a CodePen.”

有时，我被称为最后解决问题的东西。 我得到了无数的东西，有些只是动画用户流，是微交互之类的东西。 人们通常要求我做的社区工作更多是类似于某人在凌晨2:00时向我发推文，“我无法弄清楚。 我不知道为什么没有中风。 这必须明天发货生产。 请帮忙。 这是一个CodePen。”

Those are a little bit more like tiny bits of bugs or tiny bits of interaction that they didn’t quite get or something like that. I would say that of course the stuff that people hire me for are bigger projects, and the stuff that people are asking for in the community are just to clarify something, or debug something.

这些有点像他们没有得到的小缺陷或交互作用之类的东西。 我想说的当然是人们雇用我的东西是更大的项目，而人们在社区中要求的东西只是为了澄清一些东西或调试一些东西。

Tim: 蒂姆：

I’ve sent that please help me with this SVG tweet, I think to Joni Trythall, at least twice.

我已发送过此邮件，请帮助我，至少我两次向Joni Trythall致谢。

[Laughter]

[笑声]

Sarah: 莎拉：

Yeah, she’s a great one too, and Amelia Bellamy-Royds. She’s probably the smartest person I know. She did the technical edits for my book, and there was like one thing in hundreds, hundreds of things that she wrote that was not quite accurate, and for a day I was like, “What did I get wrong here? I don’t understand. It can’t be that Amelia is wrong,” because she’s literally never wrong. She’s just super on it all the time, and can dig down and debug really, really well.

是的，她也很出色，还有Amelia Bellamy-Royds 。 她可能是我认识的最聪明的人。 她对我的书进行了技术编辑，结果在她写的几百本书中有几百篇并不十分准确，有一天我就说：“我在这里出错了吗？ 我不明白 不可能是阿米莉亚(Amelia)错了，”因为她从不错。 她一直都很精通，可以很好地进行挖掘和调试。

Tim: 蒂姆：

So, speaking of this book that you wrote, can you give us a little bit more of an update on what that is all about, and the process and all those things?

因此，谈到您所写的这本书，您能否为我们提供更多有关内容，过程以及所有这些方面的更新？

Sarah: 莎拉：

Sure, yeah. It just came out a couple of weeks ago. I’m super stoked. If you are following me on Twitter, I’m sorry, because I’m retweeting and tweeting about it all the time, and I know I’m probably annoying people at this point, but I’ve never written a book before and I’m really excited to see it out. The tweets of people actually receiving it are really exciting to me, too. I worked on it for two years. Actually the demos in it are a whole other year of work, so it’s actually like the combined effort of a lot of time.

当然可以 它刚在几周前问世。 我超级激动。 如果您在Twitter上关注我，很抱歉，因为我一直在转推和推文，并且我知道我现在可能会让人讨厌，但是我以前从未写过书，看到它真的很兴奋。 实际收到它的人的推文对我来说也真的很令人兴奋。 我工作了两年。 实际上，其中的演示是整整一年的工作，因此，实际上就像是大量时间的共同努力。

I tried really, really hard to cover a gamut of technology, a gamut of techniques and address some concerns that designers have about optimization and how you work with this stuff to reduce path points and make it performant. And then that developers have about how to animate all of the tools available to you. I run from, here’s how you work with it in Illustrator, to here’s how to work with these tools, to here’s a bare metal implementation with just requestAnimationFrame() and just creating an SVG and JavaScript — if that’s your bag. I tried to make it as cohesive as possible.

我真的非常努力地介绍了全部技术，全部技术，并解决了设计师对优化以及如何使用这些东西以减少路径问题并提高性能的担忧。 然后，开发人员将了解如何为您提供所有可用工具的动画。 我从这里开始，这是您在Illustrator中使用它的方式，这里是如何使用这些工具的地方，这里是仅使用requestAnimationFrame()并仅创建SVG和JavaScript的裸机实现-如果您需要的话。 我试图使其尽可能地具有凝聚力。

David: 大卫：

It sounds pretty comprehensive. I was going to ask you where you recommend people look to start learning about these things, but I think I know the answer to that now.

听起来很全面。 我想问你，人们在哪里建议开始学习这些东西，我想我现在知道答案了。

Sarah: 莎拉：

I mean I did try to make it the thing that I could point to when people have questions and stuff, too, because I get that question a lot. Like, I want to start learning this but I’m not sure how. The book is really meant to take you on that journey.

我的意思是我确实尽力使之成为人们在遇到问题和东西时可以指向的东西，因为我经常听到这个问题。 就像，我想开始学习这个，但是我不确定如何。 这本书的真正目的是带您踏上那段旅程。

Tim: 蒂姆：

I think I do have an actual technical question, and that question is what happened to SVG 2?

我认为我确实有一个实际的技术问题，这个问题是SVG 2发生了什么？

Sarah [23:37]: 萨拉[23:37] ：

Ah, I can answer that, actually. Just like a lot of browser specs, it was proposed. People didn’t really see the use for it that much, because it’s kind of a catch-22. There’s a lot of stuff in there that’s really super … you won’t know that you need this unless you are really super into SVG, which rightfully the browsers were like … people aren’t really there yet kind of stuff. There’s one piece of the spec, though, that I’m sad isn’t going through, or I hope gets implemented eventually, and it’s the mesh gradient.

嗯，我可以回答。 就像许多浏览器规格一样，它也被提出了。 人们并没有真正看到它的用途，因为它有点像22。 那里有很多真正超级的东西……除非您真的非常喜欢SVG，否则您将不知道需要这些东西，这些浏览器理所应当……人们真的还没有真正的东西。 不过，规范中有一部分让我感到难过，或者我希望最终实现，这是网格渐变。

Right now, we can define radial gradients and we can define linear gradients and you can combine them with opacity or something, but what a mesh gradient would allow you to do is basically map out gradients on a coordinate system and make, like the name suggests, a mesh of different colors that blend in to each other. You can make full faces, you can make robots, machines and all sorts of really beautifully dimensional textures without a lot of data.

现在，我们可以定义径向渐变，也可以定义线性渐变，并且可以将它们与不透明度或其他方式结合使用，但是网格渐变允许您执行的操作基本上是在坐标系上绘制渐变并进行绘制，如名称所示，一种相互融合的不同颜色的网格。 您可以制作整张脸，也可以制作机器人，机器以及各种非常精美的尺寸纹理而无需大量数据。

It’s really, really small, and really, really rich. That’s the part that I cry about not being … I think the rest of SVG 2, I’m excited for it, but nothing is going to make or break my life. The mesh gradient part is, “Ah, what the web could be,” kind of thing. For me, like an SVG person, that’s the equivalent to a layout person really being into CSS Grid. It’s like a total game changer. There’s this catch-22 of like, “Well, nobody is using it", but there’s no implementation, so nobody can use it. That part’s a little bit hard for me.

它真的非常很小，而且真的非常丰富。 这就是我为没有成为自己而哭泣的部分……我认为SVG 2的其余部分让我感到很兴奋，但是没有什么能影响我的生命。 网格渐变部分是“啊，网络可能是什么”之类的东西。 对我而言，就像一个SVG人员一样，这等效于实际上是CSS Grid中的布局人员。 就像彻底改变游戏规则。 有一个问题22，例如“嗯，没人在使用它”，但是没有实现，所以没人能使用它。这部分对我来说有点难。

David: 大卫：

I think that’s true about every web standard out there. You can’t know if anybody is going to use it until it’s there and it’s available.

我认为对于每种Web标准都是如此。 您无法知道是否有人会使用它，直到它在那里并且可用。

Sarah: 莎拉：

Right, exactly. It’s not even like available under a flag or available in some browser. It’s not available anywhere.

是的，完全正确。 它甚至不像带有标志的内容或某些浏览器中的内容。 它在任何地方都不可用。

David: 大卫：

How can people find you, and find out more about what you’ve been teaching, also find your book?

人们如何找到您，并进一步了解您所教的内容，还找到您的书？

Sarah: 莎拉：

I’m on Twitter. I’m @Sarah_Edo, E-D-O, on Twitter. Sarah with an H. I tweet there like I tweet my articles or my talks or any resources that I work on, or other people’s resources that I think are cool. My book is available on Amazon or O’Reilly. Either one works. It’s called SVG Animation, so it’s pretty easy to find. I also write for CSS-Tricks. I came out with a post today. I come out with about one or two a month. Some months, I go crazy and write five, and I wrote about Vue, which I’m wearing a t-shirt of right now, which is a JavaScript framework that I’m into.

我在Twitter上。 我是Twitter上的EDO @Sarah_Edo 。 萨拉(Sarah)的名字是H。我在那儿发推文就像在发推文，演讲，我从事的任何资源或其他人认为很酷的资源一样。 我的书可以在Amazon或O'Reilly上找到。 任一个作品。 它被称为SVG动画 ，因此很容易找到。 我也为CSS-Tricks编写。 我今天发布了一个帖子。 我每个月大约要出一两个。 几个月后，我发疯了，写了五个，然后写了一篇关于Vue的文章 ，我现在穿着T恤，这是我所喜欢JavaScript框架。

David: 大卫：

Represent.

代表。

Sarah: 莎拉：

Yeah, I love it. I also like React. People tend to think that it’s an either-or kind of thing, but it’s not. Oh, and CodePen of course. I do tons and tons of open-source work on CodePen, and make tons of demos, so that you can explore code and try to make a lot of resources there.

是的，我喜欢。 我也喜欢React。 人们倾向于认为这是一事无成的事情，但事实并非如此。 哦，当然还有CodePen 。 我在CodePen上进行了大量的开源工作，并进行了大量的演示，以便您可以探索代码并尝试在其中开发大量资源。

David: 大卫：

So many different places that you forget about them yourself.

太多不同的地方让您自己忘记了它们。

Sarah: 莎拉：

That’s usually the first one I mention. I can’t believe I forgot it.

通常是我提到的第一个。 我简直不敢忘记。

David: 大卫：

It’s an impressive portfolio, and I know that people are going to be out there looking for all of your stuff. Thank you so much for joining us on the show today.

这是一个令人印象深刻的产品组合，而且我知道人们会在那里寻找您的所有东西。 非常感谢您今天加入我们的节目。

Sarah: 莎拉：

Yeah. Thanks for having me.

是的 感谢您的款待。

[Musical interlude]

[音乐插曲]

---

---

David: 大卫：

Now I’m excited to tell you about a new sponsor of the show, HelloSign, with their developer-focused eSignature API.

现在，我很高兴地向您介绍该节目的新赞助商HelloSign，以及他们针对开发人员的eSignature API。

Long gone are the days where you’d have to mail or fax a contract or agreement to a client, partner or new hire, waiting days or weeks to confirm everyone was on the same page.

您必须将合同或协议邮寄或传真给客户，合作伙伴或新员工的日子已经过去了，等待几天或几周才能确认每个人都在同一页面上。

Thanks to platforms like HelloSign, you can get documents emailed, signed and projects under way in no time.

借助HelloSign之类的平台，您可以立即获取通过电子邮件发送，签名和进行中的项目。

But now you don’t even need to email them, with HelloSign’s eSignature API. The eSignature API allows you to bring HelloSign’s document signing platform to your site, making it even easier for partners or new hires to sign on to your next big project.

但是现在，您甚至不需要使用HelloSign的eSignature API通过电子邮件发送电子邮件。 使用eSignature API，您可以将HelloSign的文档签名平台带到您的站点，使合作伙伴或新员工更容易登录到您的下一个大型项目。

Integration is quick, the documentation is clean, and you can get documents embedded into your site or app with just a few lines of code. Now you can take advantage of HelloSign’s eSignature implementation, ranked #1 on G2Crowd, with the best API support you’ll ever need.

集成速度快，文档整洁，您只需几行代码就可以将文档嵌入到您的网站或应用中。 现在，您可以利用HelloSign的eSignature实现，它在G2Crowd上排名第一，并提供您所需的最佳API支持。

Go to hellosign.com/api, sign up, get signing, and get things moving.

转到hellosign.com/api ，进行注册，签名并推动一切。

---

---

David [28:20]: 大卫[28:20] ：

Wow. She’s amazing. She’s doing so much that she can’t even keep track of all of it herself.

哇。 她太赞了。 她做得太多了，以至于她自己都无法掌握所有情况。

Tim: 蒂姆：

Yeah. It was incredible hearing her background story. First off, I didn’t know there was such a thing as a — what was the term? — scientific illustrator. Did I get that right?

是的 听到她的背景故事真是令人难以置信。 首先，我不知道有什么东西-这个词是什么？ —科学插画家。 我说对了吗？

David: 大卫：

I hadn’t really heard of it until I read her bio, but once she described it, it made perfect sense.

直到我阅读了她的传记，我才真正听说过它，但是一旦她描述了它，它就非常有意义了。

Tim: 蒂姆：

There’s a need for that, right, at some point? Because when you think about old encyclopedias and things like that, you can envision those sorts of drawings.

在某个时候有必要吗？ 因为当您考虑旧的百科全书之类的东西时，您可以设想这些图纸。

David: 大卫：

She schooled me on SVG, too.

她也对我进行了SVG的教育。

Tim: 蒂姆：

First off, I have a big confession to make on my side. I don’t actually do that much animation with SVG. In fact, it’s not that I avoid it … Well, maybe it is, because I’ve never really done any SVG animation like on my own for fun, because it just sounds so hard. I mean really when you look at an SVG first off, it’s like you’re punched in the face with math. There’s just numbers everywhere. There are some people who can literally write SVGs by hand, which … don’t even get me started on that.

首先，我要站在自己的面前坦白。 我实际上并没有用SVG做那么多动画。 实际上，并不是我要避免它……嗯，也许是，因为我从来没有像自己一样真正地做过任何SVG动画，因为它听起来太难了。 我的意思是说真的，当您初看SVG时，就好像您对数学感到无所适从。 到处都是数字。 有些人可以手工编写SVG，这些……甚至没有让我开始。

But it is this intimidating thing when you look at it. It’s just a bunch of decimal points and there are paths and things like that, but it’s a lot of tedious stuff. There are weird properties that go on SVGs and things like that. But it seems like Sarah has really been able to make it this digestible and, dare I say, fun sort of thing.

但是当你看这是一件令人生畏的事情。 它只是一堆小数点，并且有类似的路径和东西，但其中有很多乏味的东西。 SVG上有一些奇怪的属性，诸如此类。 但似乎Sarah确实能够做到这一点，使其易于消化，而且我敢说，这很有趣。

David: 大卫：

If she can make it fun … I’m sure she can, and I’m going to go get her book and I’m going to try, because when I look at SVG, the thing that intimidates me and that stops me from moving forward with it is all of … Basically it brings me back to the early days of XML, when you’ve got all of this complex structure and it’s distinct. It’s separate from the structure that you have in your HTML document, and there are separate CSS properties that apply to the types of elements that live inside of an SVG that look like they’re doing the same things that the properties in CSS are doing to DOM elements, but they’re doing the same thing to an SVG element, so it’s a different property. I love CSS as it applies to HTML. I’m passionate about it. I enjoy it. But then I think, “Oh my god. I have to learn another one?”

如果她能使它变得有趣……我敢肯定，她会的，我将去拿书，然后去尝试，因为当我看着SVG时，会吓到我而阻止我前进的东西向前发展的一切……基本上，它带我回到XML的早期时代，那时，您已经拥有了所有这些复杂的结构并且与众不同。 它与HTML文档中的结构是分开的，并且有单独CSS属性适用于SVG内部的元素类型，这些元素看起来就像它们在做CSS中的属性一样DOM元素，但是它们对SVG元素执行相同的操作，因此它是不同的属性。 我喜欢CSS，因为它适用于HTML。 我对此充满热情。 我很喜欢。 但后来我想：“天哪！ 我必须学习另一个吗？”

Tim: 蒂姆：

Every now and then I’ll be fooling around in developer tools. In the CSS portion, you hit the one key and it auto fills for you. Every once in a while, I’ll accidentally hit Q or something, and I’ll get to CSS property and I’m like, “What is this for?” Sure enough, it’s some sort of thing that applies to SVG only.

我会不时地在开发人员工具中四处游荡。 在CSS部分中，您按下了一个键，它将自动为您填充。 偶尔，我会不小心碰到Q之类的东西，然后进入CSS属性，我会想：“这是做什么用的？” 当然，这仅适用于SVG。

David: 大卫：

Sometimes I get excited when I see those things and I think maybe I can do something with CSS on an HTML element that I didn’t know I could. No, it turns out it was only on SVG.

有时候，当我看到这些东西时会很兴奋，并且我想也许我可以对CSS元素做一些我不知道可以做的事情。 不，事实证明它仅适用于SVG。

Tim: 蒂姆：

Actually, Sara Soueidan speaks a lot about this — that in a lot of cases, SVG is better than the CSS hacks that we usually use. For example, a triangle as a decoration. SVG handles that so much better and so much more simply than a CSS pseudo attribute will. But, we don’t often reach for it first, because … and maybe this is just a part of if you were in the industry early enough to know what XML is. I mean it really does get associated at least in my head with XML, and when I think about the two things, I think, uck, I really don’t want to touch that because it’s just a complicated and weird and foreign.

实际上， Sara Soueidan谈到了很多–在很多情况下，SVG比我们通常使用CSS hack更好。 例如，三角形作为装饰。 SVG可以比CSS伪属性更好，更简单地进行处理。 但是，我们通常不会一开始就这样做，因为……如果您还很早就了解XML是什么，也许这只是其中的一部分。 我的意思是，至少在我看来，它确实确实与XML相关联，当我想到这两件事时，我想，我真的不想触及这一点，因为它只是一个复杂，怪异的东西。

David [32:07]: 大卫[32:07] ：

It’s not just that it’s complicated, weird and foreign, but some of us have been in the industry long enough that browser support for SVG was very iffy.

这不仅是复杂，怪异和陌生的，而且我们中的一些人已经在该行业工作了很长时间，以至于浏览器对SVG的支持非常不稳定。

Tim: 蒂姆：

Yeah, that’s very true. That’s one of the reasons why I asked Sarah about SVG 2, because … The only reason I actually know about that is because I wanted to learn SVG better maybe a year or two ago, and I started to write a mini-library that would help you do some SVG stuff easier with JavaScript. I started to make certain functions, and you add this method and you get this property out of an SVG.

是的，这是真的。 这就是我向Sarah询问SVG 2的原因之一，因为…我真正了解的唯一原因是因为我可能在一两年前想更好地学习SVG，并且我开始编写一个微型图书馆，该图书馆会对您有所帮助您可以使用JavaScript轻松完成一些SVG任务。 我开始做某些功能，然后添加此方法，然后从SVG中获得此属性。

I started looking at what are some more things that I could do with SVG for this library. So I pulled up MDN, and sure enough I saw a whole bunch of things that had no support and were just … this is just in a spec. This is maybe coming later. There’s a whole bunch of very interesting but complicated and obscure things that SVG 2 would be able to do. I mean I certainly don’t remember seeing anything about mesh gradients. I looked at it for a few minutes and I was like, No. No way. I’m not going to be able to do any of this stuff.

我开始研究使用该库的SVG还可以做些什么。 所以我拉起了MDN ，果然看到了很多没有支持的东西，只是……这只是规范。 这也许以后再来。 SVG 2可以完成很多非常有趣但又复杂又晦涩的事情。 我的意思是我当然不记得看到任何有关网格渐变的信息。 我看了几分钟，好像， 不行。 我将无法做任何这些事情。

That said, the browser support issue is a frustrating one, because there are properties where … Of course nobody is interested in his thing because we don’t know that it’s possible. Nobody’s even tried to use it before. If browser vendors implement it, it would change how we work with the web. How do you solve that problem? Because you just can’t go and build a polyfill for mesh gradients.

就是说，浏览器支持问题是一个令人沮丧的问题，因为其中有一些属性……当然，没有人对他的东西感兴趣，因为我们不知道这是可能的。 甚至没有人尝试过使用它。 如果浏览器供应商实施它，它将改变我们与网络的合作方式。 您如何解决这个问题？ 因为您无法建立用于网格渐变的polyfill。

David: 大卫：

The way our industry has been solving it for years is some browser developer decides that they’re going to be the first to implement this and if they’re Microsoft, maybe they’re going to do it to the exclusion of other companies that also have browsers, and try to get people to use their browser exclusively. I’m not sure that they’re still doing that, but they have been doing that in the past. Then that standard gets implemented in one place. They convince developers to start using it. People see that it works, and think they can use it elsewhere. It fails elsewhere, and then the other browser developers have to play catch up. I’m not sure that that’s really a good approach.

我们行业多年来一直在解决该问题的方法是，一些浏览器开发人员决定他们将率先实现此功能，如果他们是Microsoft，也许他们会这样做，以排除其他公司有浏览器，并尝试让人们专门使用他们的浏览器。 我不确定他们是否仍在这样做，但是他们过去一直在这样做。 然后，该标准在一个地方得到实施。 他们说服开发人员开始使用它。 人们看到它有效，并认为可以在其他地方使用它。 它在其他地方失败，然后其他浏览器开发人员必须赶上。 我不确定这是否是一个好方法。

Tim: 蒂姆：

Now that you mentioned it, that’s exactly what happened with responsive images. Yoav Weiss actually got crowdfunded to literally write the commit for Blink to enable responsive images according to the specification. That was maybe a few years ago, but for all of us nerds, it was a very exciting time, and it worked. Maybe we can have Yoav on the show and convince him to just do it all over again. I’m sure it was very stressful and a lot of hard work, but maybe we can make it happen.

既然您已经提到，响应式图像就是这样。 Yoav Weiss实际上已经获得了众筹资金，可以按照规范从字面上编写Blink的提交以启用响应图像。 那也许是几年前的事，但是对于我们所有人的书呆子来说，那是一段非常激动人心的时刻，而且奏效了。 也许我们可以让Yoav参加演出，并说服他再做一次。 我敢肯定这是非常压力和艰苦的工作，但也许我们可以实现。

David: 大卫：

It’s kind of terrifying, but that might actually be the only way that you can make something like this happen if you want to really force it on the community.

这有点令人恐惧，但实际上，如果您想将其强加给社区，那么这可能是实现这种情况的唯一方法。

Tim: 蒂姆：

Also, Yoav, if you’re listening, I apologize. I don’t mean that it has to be you. Yoav is an excellent guy. He one time was driving home from a conference, I think with his family somewhere in Europe, and I tweeted him with a question, and I’m not sure if I remember this correctly. I think he pulled over in the side of the road to answer my tweet, which I felt terrible about, but that was a thing that happened. That’s the type of person that it takes to just go on their own and add a new feature to the web for the whole world to use.

另外，约阿夫，如果您在听，我深表歉意。 我不是说一定是你。 约夫(Yoav)是个好人。 他有一次从会议上开车回家，我想和他的家人在欧洲的某个地方，我在推特上发了一个问题，我不确定我是否正确地记得这一点。 我认为他在路边停下来回答我的推文，这让我感到很恐怖，但是那件事发生了。 这就是只需要自己一个人并向网络添加新功能以供全世界使用的人员类型。

David: 大卫：

And Tim, you are making a reputation for yourself with everybody as the guy who’s tweeting that question.

蒂姆(Tim)，您在每个人中都以自己的声誉而著称，这是发布该问题的人。

Tim: 蒂姆：

That’s how I got here today. That’s how I’ve gotten to the position that I’m in. I just tweet the right people at the most random times.

那就是我今天到这里的方式。 这就是我所处位置的方式。我只是在最随意的时间向合适的人发送推文。

David: 大卫：

I think I like Sarah’s method better. She found things that she was passionate about, she dove in, she started building these things that were fun and got that little dopamine rush. By the way, I have to admit, I have said it before that I get a little thrill when I make a CSS thing work the way that I want it to work, but the way she described it, it was like she was looking to my soul and saying, “Oh, yes. This addictive personality that you have, it has a practical application, and here it is.”

我想我更喜欢莎拉的方法。 她发现了自己热衷的事物，投入其中，开始构建有趣的事物，并获得了少量的多巴胺热衷。 顺便说一句，我不得不承认，我之前曾说过，当我以自己想要的方式使CSS东西工作时，我会有些激动，但是她描述的方式，就像她一直在寻找我的灵魂说：“哦，是的。 您拥有的这种令人上瘾的个性，可以实际应用，就在这里。”

Tim [36:23]: 蒂姆[36:23] ：

In fact, she grouped burnout with working on something else as a cure burnout, and I think when she mentioned that, both of our heads cocked to the side like, “Wait. What? You were burned out, and then working on stuff that you do at work sort of helped you out of that?” But now that I think about it more, I’ve done that very same thing. In fact, sometimes when I get home from work or even on weekends, sometimes my wife and I will drive out to Long Island during the weekends and I’ll bring my laptop with me, and I’ve been in my spare time hidden away on GitHub. I’ve been building a stupid battleship game. It’s fully client side, service worker and all that stuff, but it’s just so much fun to work out these challenges. I’ve never made a game before. It’s probably all wrong, but the code looks very nice. It’s refreshing for some reason.

实际上，她将倦怠与其他工作归类为治愈倦怠，我想当她提到这一点时，我们的两个脑袋都向侧面翘起，例如：“等等。 什么？ 您精疲力尽，然后从事工作中所从事的工作对您有所帮助？” 但是现在，我考虑得更多了，我做了同样的事情。 事实上，有时候我下班回家或什至在周末时，有时我和妻子都会在周末开车去长岛，我会带上笔记本电脑，而我的业余时间一直在隐居在GitHub上。 我一直在制作一个愚蠢的战舰游戏。 它完全是客户端，服务人员以及所有这些东西，但是解决这些挑战真是太有趣了。 我以前从未玩过游戏。 可能全都错了，但是代码看起来非常不错。 由于某种原因，它令人耳目一新。

David: 大卫：

I can understand that. I’ve had that exact same experience. I’m working on a little animation thing myself on the side, not something that I can publish yet, but something that needs a live generative component to it as well as being visually compelling and engaging. Something that draws you in. You find that working on something like this — as opposed to working on the project that you’re fulfilling for somebody’s contract that you have to finish on a certain deadline according to somebody else’s specifications — it’s a very different experience. It massages different nodes in your brain.

我能理解 我也有同样的经历。 我自己正在制作动画方面的小东西，不是我现在还可以发布的东西，而是需要生动的生成成分以及视觉吸引力和吸引力的东西。 会吸引您的东西。您会发现，像这样进行工作-而不是按照别人的要求在一定的截止日期之前完成要为某个人的合同履行的项目，这是完全不同的体验。 它可以按摩大脑中的不同节点。

Tim: 蒂姆：

I think there’s a lot to be said about getting excited again as being the cure for burnout.

我认为要再次振作精神是解决倦怠的良方，还有很多话要说。

David: 大卫：

Sarah is a good embodiment of that. You can see the enthusiasm that she brings to her work right down to the point of crying over mesh gradients.

莎拉就是一个很好的体现。 您会看到她带给工作的热情，直到哭到网格渐变为止。

Tim: 蒂姆：

Yes. I’ve probably cried over lots of things on the web, but mesh gradients hasn’t been one of them.

是。 我可能已经在网上哭了很多，但是网格渐变并不是其中之一。

David: 大卫：

Now that I know about them, maybe I will, because it does sound like it’s a pretty cool concept.

现在，我了解了它们，也许我会知道，因为它听起来确实是一个很酷的概念。

Tim: 蒂姆：

Especially considering how small you can get with those mesh gradients. I haven’t seen this concept drawn out, but the way that Sarah described it, it almost sounds like it could good start to rival actual non-vector images.

特别要考虑使用这些网格渐变可以得到的尺寸。 我还没有看到这个概念的提出，但是莎拉(Sarah)描述它的方式几乎听起来像是可以与实际的非矢量图像相匹敌。

David: 大卫：

I’ve seen mesh gradients. I’ve used them myself in Adobe Illustrator, and I know how powerful they can be in terms of simulating real-world textures. The idea that you might be able to do that dynamically in a very small file using SVG 2 — talking to you guys who are controlling the standards … [Clears throat]

我看过网格渐变。 我在Adobe Illustrator中亲自使用了它们，并且我知道它们在模拟真实世界纹理方面可以发挥多大的作用。 您可能可以使用SVG 2在一个很小的文件中动态地执行此操作的想法-与控制标准的人交谈... [清除嗓子]

Tim: 蒂姆：

Those of you who listen to us ramble.

那些听我们说的人在胡闹。

David: 大卫：

[Laughter]

[笑声]

They’re out there, trust me. It sounds very compelling, and I can understand why that would be an important thing.

他们在外面，相信我。 听起来很引人注目，我可以理解为什么这会很重要。

Tim: 蒂姆：

The writing. Man, every time I hear somebody talk about how much writing they do, I feel a little bit convicted, because I know I should be, and I actually … I said that I would this, David, and I followed through with it. I launched my blog, but so far it only has one post, and that post says that I launched a blog.

写作。 伙计，每次我听到有人谈论他们做了多少写作时，我都会被判有罪，因为我知道自己应该成为，而且我实际上……我说我愿意，大卫，我一直坚持下去。 我启动了博客 ，但到目前为止，只有一个帖子，并且该帖子表明我已经启动了博客。

David: 大卫：

That’s the first step. There are other blogs out there that also have only one post, but yours won’t be one of those.

那是第一步。 还有其他博客也只有一个帖子，但您的博客不会是其中之一。

Tim: 蒂姆：

No. In fact, when I finish the game, which I’m rushing to do now, that’s going to be my second post, detailing about how I built that thing. Hopefully it’ll look good. Then hopefully I’ll get a third post out explaining my first attempt at animating an SVG.

不。事实上，当我完成游戏时，我现在急着要去做，这将是我的第二篇文章，详细介绍了我如何构建该游戏。 希望它看起来不错。 然后希望我能得到第三篇文章，解释我对SVG动画制作的第一次尝试。

David: 大卫：

I would recommend doing some little intervening posts that talk about the frustrations that you’ve been encountering along the way as you’ve been building your game, because I think now, we have a couple of people out here who might be interested in finding out how you built a battleship game, and what they’re going to stumble across while they’re trying to do that.

我建议您写一些简短的文章，讲述您在开发游戏过程中遇到的挫折感，因为我认为现在我们这里有一些人可能对寻找了解您如何制作战舰游戏，以及他们在尝试这么做时会遇到的困难。

Tim: 蒂姆：

Yes, definitely. That’s a very, very good point. Maybe I’ll get to work.

当然是。 这是非常非常好的一点。 也许我去上班。

David: 大卫：

Okay, everybody. Go out there and follow Tim’s blog, because you’re going to learn a lot.

好的，大家。 到那里去并关注Tim的博客，因为您将学到很多东西。

Tim: 蒂姆：

Or don’t. Just forget about it.

还是不要。 忘掉它。

David: 大卫：

Do you want me to edit that out of the show?

您要我从节目中删除吗？

Tim: 蒂姆：

No. You have to leave that in for authenticity’s sake.

不。为了真实性，您必须将其保留。

David: 大卫：

Okay, fair enough.

好吧，很公平

Tim: 蒂姆：

Well, thank you so much for listening, everybody. We always getting to talk technology with all of you.

好，非常感谢大家的倾听。 我们总是与所有人讨论技术。

David: 大卫：

We would also like to thank SitePoint.com, and our producers, Adam Roberts and Ophelie Lechat, with production help from Ralph Mason. Please feel free to send us your comments on Twitter — @versioningshow — and give us a rating on iTunes to let us know how we’re doing.

我们还要感谢SitePoint.com以及我们的制作人Adam Roberts和Ophelie Lechat，以及Ralph Mason的制作帮助。 请随时在Twitter( @versioningshow)上向我们发送您的评论，并在iTunes上给我们评分 ，让我们知道我们的情况。

Tim: 蒂姆：

We’ll see you next time, and we hope you enjoyed this version.

下次见，我们希望您喜欢这个版本。

翻译自: https://www.sitepoint.com/animating-with-css-javascript-and-svg/

svg配合css3动画