Donovan HutchinsonCSS动画，原型工具和灵感来源

In this episode of the Versioning Show, Tim and David are joined by Donovan Hutchinson, a developer, teacher and proprietor of CSSanimation.rocks. They discuss how teaching and speaking can help you learn, solving user problems, CSS animations and accessibility, bridging the design and development worlds, prototyping tools, browser compatibility, sources of inspiration, making whooshing sounds, and designing UIs for cats.

在Versioning Show的这一集中，Tim和David与CSSanimation.rocks的开发人员，老师和所有人Donovan Hutchinson一起参加了会议。 他们讨论了教学和演讲如何帮助您学习，解决用户问题，CSS动画和可访问性，桥接设计和开发领域，原型设计工具，浏览器兼容性，灵感来源，发出声音以及为猫设计UI。

Don’t forget to check out Donovan’s Animating with CSS course here on SitePoint!

不要忘记在SitePoint上查看Donovan的CSS动画课程！

Visit the Versioning Show Home Page

访问版本控制显示主页

Subscribe on iTunes | Subscribe on Stitcher | View All Episodes

在iTunes上订阅 | 订阅Stitcher | 查看所有剧集

显示笔记 (Show Notes)

• Donovan on Twitter: @DonovanH

  推特上的多诺万(Donovan)： @DonovanH

• CSSAnimation.rocks

  CSSAnimation.rocks

• CSS Animation Rocks on Twitter: @CSSanimation

  Twitter上CSS动画摇滚： @CSSanimation

• mp3.com

  mp3.com

• Donovan’s SitePoint course Animating with CSS

  Donovan的SitePoint课程使用CSS动画制作

• Framer

  成帧器

• Principle

  原理

• The 12 basic principles of aimation

  瞄准的12个基本原则

• Designing for crisis

  为危机而设计

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

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

对话重点 (Conversation Highlights)

I remember spending evenings trying to model my guitar or different parts of my house in the Amiga, and then leave it on overnight to render, of course.

我记得晚上曾尝试在Amiga中为吉他或房屋的不同部分建模，然后将其放置一整夜进行渲染。

---

---

a very inspiring CTO at a small startup … convinced me not just to try the new technologies and to embrace this interesting stuff that was going on in the web, but also to write about it.

一家小型初创公司的鼓舞人心的CTO…使我相信不仅要尝试新技术并接受网络上正在发生的有趣的事情，而且还要写这篇文章。

---

---

I had just begun reading about Angular. He suggested I should go give a talk about it at the end of that month at a local meetup. I had no idea I could learn enough to give a talk on the subject in just a few weeks, but it worked out, and it really showed me that taking the time to properly understand something enough that you could teach somebody about it is a great way to thoroughly understand something and appreciate it — much more than just using it on the surface.

我刚刚开始阅读有关Angular的文章。 他建议我应该在该月底的一次本地聚会上谈一谈。 我不知道我可以在短短几周内就学会有关该主题的演讲，但是它成功了，它确实向我表明，花点时间正确地理解足以让您教给别人的东西是很棒的彻底理解和欣赏事物的方式-不仅仅是在表面上使用它。

---

---

Where it all comes together for me is combining an interest in how things look and feel with how they’re built. And, for that, CSS kind of sits nicely in the middle there. It can be frustrating at times, and sure CSS is what it is, but it’s a great way to express layouts, and to understand the point at which people actually use our software.

对我而言，所有这些东西都结合在一起，将对外观和感觉以及其构建方式的兴趣结合在一起。 而且，为此，CSS恰好位于中间。 有时可能会令人沮丧，并且确定CSS是真正CSS，但这是表达布局并了解人们实际使用我们软件的要点的好方法。

---

---

I certainly don’t let the older browsers dictate what can be done with the new features.

我当然不会让旧版浏览器规定使用新功能可以做什么。

---

---

Often, even subtle animations can distract people to the point where they literally can’t even use the application anymore, because the movement is stopping them from getting past that part. We have to be very mindful of that, in terms of when we use animation, and when we start and stop and turn off animations when we want people to concentrate on something else.

通常，即使是微妙的动画也可能使人们分心，以至于他们甚至无法使用该应用程序，因为这种运动阻止了他们越过该部分。 关于何时使用动画，以及何时我们希望人们专注于其他事情，何时开始和停止以及关闭动画，我们必须非常注意。

---

---

The main two properties that animate extremely well are transform and opacity, which deal with things like position, with scaling, skewing objects, and dealing with how transparent or see-through they are.

主要的两个属性有生命的非常好，是transform和opacity ，其处理像位置，具有缩放，倾斜对象，以及处理如何透明或透视他们。

---

---

prototyping tools really help people communicate ideas.

原型工具确实可以帮助人们交流思想。

成绩单 (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 29 of the Versioning Podcast.

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

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: 蒂姆：

So, today, we are talking with Donovan Hutchinson, who is a developer, teacher and proprietor of CSSAnimation.rocks. So, we’re gonna talk to him about development and teaching, and CSS animations. So, let’s go ahead and get this version started.

因此，今天，我们正在与CSSAnimation.rocks的开发人员，老师和所有人Donovan Hutchinson进行交谈 。 因此，我们将与他谈谈开发和教学以及CSS动画。 因此，让我们继续进行此版本的启动。

David: 大卫：

Hey, Donovan, how are you doing today?

嘿，多诺万，你今天好吗？

Donovan: 多诺万：

I’m great, thanks.

我很好谢谢。

David: 大卫：

Good. Thanks for joining us on the Versioning Show.

好。 感谢您加入我们的Versioning Show。

Donovan: 多诺万：

It’s a pleasure. Thanks for having me on.

我的荣幸。 谢谢你让我参加。

David: 大卫：

Cool. So, since is the Versioning show, and we’re talking about the philosophy of web design and development, we always like to ask our guests a philosophical question. Your philosophical question today is this: in your current career, what version are you, and why?

凉。 因此，既然是Versioning展览，并且我们正在谈论Web设计和开发的哲学，我们总是喜欢向客人提出一个哲学问题。 您今天的哲学问题是：您目前的职业是什么版本，为什么？

Donovan: 多诺万：

Wow. Okay. I’d say, gosh, it’d have to be version three or four at this point. I’ve gone through a few different stages in my career to get to this point. It all began back in the late 90s when I was introduced to my first Amiga, and started using it to create, at the time, music and 3D graphics, and find myself using computers to create stuff … which, very quickly when the web took off, became a job on the web. For a long while there, I was what you might call a webmaster — which used to be a thing, before it became more of a developer. Then these days I’ve stepped across into more design. I guess that bridge between design and back-ends that people call front-end development.

哇。 好的。 我会说，天哪，此时必须是第三版或第四版。 为了达到这一点，我在职业生涯中经历了几个不同的阶段。 这一切都可以追溯到90年代末，当时我被介绍给我的第一台Amiga，并开始使用它来创建音乐和3D图形，并发现自己使用计算机来创建东西……当网络出现时，这很快离开，成为网上的一份工作。 在那儿很长一段时间，我就是您所说的网站站长 -在成为更多开发人员之前，它曾经是一件事。 然后，这些天我开始涉足更多设计。 我猜人们将设计和后端之间的桥梁称为前端开发。

David: 大卫：

Yeah, front-end development tracks a lot of us, I think, but I also have fond memories of my Amiga days back when I was starting out. Nowadays, I think you can emulate one in JavaScript, can’t you?

是的，我认为前端开发跟踪了我们很多人，但我也回想起我刚开始时的Amiga时光。 如今，我认为您可以在JavaScript中模拟一个，不是吗？

Donovan: 多诺万：

I believe I’ve seen something like that, yeah.

我相信我已经看到了类似的东西，是的。

David: 大卫：

So, I can understand going from Amiga to going to front-end. Did you always have an interest in the visual side? You said the audio was what attracted you to the Amiga in the first place.

因此，我可以理解从Amiga到前端的过程。 您一直对视觉方面感兴趣吗？ 您说音频首先吸引了您到Amiga。

Donovan: 多诺万：

I guess it was a mixture of things. When I really got into it originally, I used to create — or maybe copy — games from magazines into my ZX spectrum, and type them in one word at a time. It was really the ability to make something and then see the results. Or, in the case of audio, to make something and hear the results. The process was just as interesting to me regardless. So, when it came to audio, I loved collecting samples. I used to record hours of radio, and cut it down into small samples, and use that to make music. But, at the same time, 3D software was becoming a thing at the time, in terms of mass-market use. You could get free trials of quite powerful software on the front cover of a magazine at the time. I remember spending evenings trying to model my guitar or different parts of my house in the Amiga, and then leave it on overnight to render, of course.

我想这是事情的混合物。 当我真正真正接触到它时，我曾经将杂志中的游戏创建(或也许将其复制)到我的ZX谱中，然后一次用一个单词输入它们。 实际上，这是一种制造某种东西然后查看结果的能力。 或者，在音频的情况下，做点什么，然后听结果。 无论如何，这个过程对我来说都很有趣。 因此，谈到音频，我喜欢收集样本。 我曾经录制了数小时的广播，然后将其切成小样本，然后用来制作音乐。 但是，与此同时，就大众市场使用而言，3D软件在当时已成为一件事。 您当时可以在杂志的封面上免费试用功能强大的软件。 我记得晚上曾尝试在Amiga中为吉他或房屋的不同部分建模，然后将其放置一整夜进行渲染。

David: 大卫：

How did that lead you to web development and design, and particularly this front-end work you’ve been doing?

这是如何引导您进行Web开发和设计的，尤其是您一直在进行的前端工作？

Donovan: 多诺万：

I guess, initially, it was a place to share what I was creating, and being able to create a web presence then was part of sharing the music I was writing. I created some websites that shared the music, and then discovered mp3.com and used that. But the process of sharing a separate interest, in terms of making music on the web, got me interested in actually the mechanisms of building websites themselves. That branched across then into building for the web, rather than just using the web as a means of sharing.

我想，最初，它是一个共享我所创建的内容的地方，然后能够创建网络状态是共享我正在编写的音乐的一部分。 我创建了一些共享音乐的网站，然后发现并使用了mp3.com 。 但是，就在网络上制作音乐而言，共享兴趣的过程实际上使我对构建网站本身的机制产生了兴趣。 然后分支到构建网络，而不仅仅是将网络用作共享手段。

David: 大卫：

Was the web the first way that you tried sharing when the idea occurred to you, or were you sharing in other ways before that?

网络是您在想法出现时尝试共享的第一种方式，还是在此之前以其他方式共享？

Donovan: 多诺万：

We used to go around parties with cassettes. That was generally the way you’d share at that point.

我们过去经常用卡带聚会。 这通常是您当时分享的方式。

David: 大卫：

So, the audio work led to sharing, led to the web, led to getting involved with people. Then at some point, you started teaching as well.

因此，音频工作导致了共享，导致了网络，并导致了人们的参与。 然后在某个时候，您也开始教学。

Donovan: 多诺万：

That’s a more recent thing for me, and definitely something I’m very into at the moment. I guess it started maybe four or five years ago, when I was lucky enough to work with a very inspiring CTO at a small startup who convinced me not just to try the new technologies and to embrace this interesting stuff that was going on in the web, but also to write about it. That got me, in a way, learning things better, because in order to write about something, I had to better understand it. Then he actually urged me on to giving talks on the topics as well. For example, I was learning Angular at the time. I had just begun reading about Angular. He suggested I should go give a talk about it at the end of that month at a local meetup. I had no idea I could learn enough to give a talk on the subject in just a few weeks, but it worked out, and it really showed me that taking the time to properly understand something enough that you could teach somebody about it is a great way to thoroughly understand something and appreciate it — much more than just using it on the surface.

这对我来说是最近的事情，而且绝对是我现在很喜欢的事情。 我猜它可能是在四五年前开始的，那时我很幸运地在一家小型初创公司与一位鼓舞人心的CTO一起工作，他说服了我不仅尝试新技术并接受网络上正在发生的有趣事情，还要写一下。 从某种意义上讲，这使我学习起来更好，因为为了写点东西，我必须更好地理解它。 然后，他实际上敦促我也就这些话题进行演讲。 例如，我当时正在学习Angular。 我刚刚开始阅读有关Angular的文章。 他建议我应该在该月底的一次本地聚会上谈一谈。 我不知道我可以在短短几周内就学会有关该主题的演讲，但是它成功了，它确实向我表明，花点时间正确地理解足以让您教给别人的东西是很棒的彻底理解和欣赏事物的方式-不仅仅是在表面上使用它。

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

Yeah, I can understand how that teaching has become an important part of the way that you learn things. We’ve talked to a few folks who’ve talked about how the teaching process ends up being something that they learned from. One of the things that caught my attention when you said that was that you learned enough about Angular so that you could teach it, but it wasn’t as if you were presenting yourself as the Angular expert, in this case.

是的，我可以理解教学已成为您学习事物的重要组成部分。 我们与一些人进行了交谈，他们谈到了教学过程最终是他们从中学到的东西。 当您这么说时，引起我注意的一件事是您对Angular有了足够的了解，可以进行教学，但是在这种情况下，这并不是像您自己展示为Angular专家一样。

Donovan: 多诺万：

Yes. Far from it. I was presenting something I felt was interesting to people that I felt would enjoy hearing about it.

是。 离得很远。 我正在介绍一些令我觉得很有趣的东西，我觉得很高兴听到这些。

David: 大卫：

How did you get into Angular in the first place? I mean, there are lots of different directions that JavaScript’s been going in.

首先您是如何进入Angular的？ 我的意思是，JavaScript的发展方向很多。

Donovan: 多诺万：

At the time, when I was looking into the MVC frameworks, and looking for something that would be two-way bind with the data, I was building a back-end for a web application, and we needed something quite quick that would show edits in real-time across various views on a page. It just clicked with me really in terms of the way it was presented, and the way you could build using directives, quite complex functionality, into tags. The fact that it was backed by, I think, Google, that helped as well. I’ve moved on since then, and thankfully, the ecosystem around that has grown a lot. You have fantastic options like React, and lots of even faster options coming in as well. But, at the time, it was a great choice, I felt, for the problem we had at hand, and it gave me a chance to improve my JavaScript too, just to better understand really what I was doing when I built a front-end application using JavaScript.

当时，当我研究MVC框架并寻找与数据双向绑定的东西时，我正在为Web应用程序构建后端，我们需要非常快的东西来显示编辑内容实时跨页面上的各种视图。 就其呈现方式以及您可以使用指令(非常复杂的功能)构建到标记中的方式而言，它确实使我感到震惊。 我认为，它得到了Google的支持，这一事实也有所帮助。 从那时起，我一直在前进，而且值得庆幸的是，周围的生态系统已经增长了很多。 您有React等出色的选择，还有许多甚至更快的选择。 但是，对于当时遇到的问题，我当时觉得这是一个不错的选择，它也使我有机会改进JavaScript，只是为了更好地了解我在构建前端时所做的事情。使用JavaScript的最终应用程序。

David: 大卫：

When I think of the stuff that you’ve been teaching lately, though, I think mostly about the CSS side of things.

但是，当我想到您最近在教的东西时，我主要想到的是CSS方面。

Donovan: 多诺万：

Yeah, a lot of what drives me is a bit closer to the presentation layer, in terms of how things are interacted with, and how things are presented in apps or websites. I have moved toward design more in the past few years than I initially started out, and I enjoy thinking about solving user problems, thinking about user experience from that perspective. Where it all comes together for me is combining an interest in how things look and feel with how they’re built. And, for that, CSS kind of sits nicely in the middle there. It can be frustrating at times, and sure CSS is what it is, but it’s a great way to express layouts, and to understand the point at which people actually use our software. Then for me, there’s so many ways you can go into CSS and use it, and learn within that. I’m currently interested in animation as one part of that, but that’s a small niche within a very big topic that CSS is.

是的，就事物之间的交互方式以及事物在应用程序或网站中的呈现方式而言，促使我前进的许多因素都离表示层更近。 在过去的几年中，我比最初开始更着迷于设计，并且我乐于考虑解决用户问题，从这种角度考虑用户体验。 对我而言，所有这些东西都结合在一起，将对外观和感觉以及其构建方式的兴趣结合在一起。 而且，为此，CSS恰好位于中间。 有时可能会令人沮丧，并且确定CSS是真正CSS，但这是表达布局并了解人们实际使用我们软件的要点的好方法。 然后对我来说，有很多方法可以进入CSS并使用它，并在其中学习。 我目前对动画感兴趣，这是其中的一部分，但是在CSS的一个非常大的主题中，这只是一个很小的领域。

David: 大卫：

I know you’ve done a lot of work with interesting CSS animation stuff. Can you tell us a little bit about some of the stuff you’ve been publishing?

我知道您已经完成了许多有趣CSS动画工作。 您能告诉我们一些您一直在发表的东西吗？

Donovan: 多诺万：

Sure. I was lucky enough to work with you guys at SitePoint on a course recently, where I talked about how the concepts of CSS animation, keyframes and transitions all work. I introduced the theory around that, and talked about practical ways that it can be used on projects. I also write and I share tutorials as I learn more about the topic on my website, CSSAnimation.rocks. It’s my outlet for ideas, so if I decide, well, what happens if I try to build this in CSS? And if it works, if I learn something, then I go onto the site and share that.

当然。 最近，我很幸运能在SitePoint与你们一起工作，讨论了CSS动画，关键帧和过渡的概念如何工作 。 我介绍了有关的理论，并讨论了可用于项目的实用方法。 当我在我的网站CSSAnimation.rocks上了解更多有关该主题的信息时，我也会写书并分享教程。 这是我提出想法的渠道，所以如果我决定好了，如果我尝试在CSS中构建它，会发生什么？ 如果可行，如果我学到一些东西，那么我会去网站上分享。

David: 大卫：

How do you come across these projects to share? Like, how do you decide what you want to put up there?

您如何遇到这些项目进行共享？ 就像，您如何决定要放置在那里的东西？

Donovan: 多诺万：

It can come from all sorts of places. One example was when I was watching the trailer for Star Wars last year. I was impressed by the credit roll at the end, and thought, I wonder, can that be done in CSS? It looks like the kind of thing transformers might be a good fit for. I just tried it and saw what happened.

它可以来自各种各样的地方。 一个例子是去年我在看《星球大战》的预告片时。 最后的信用记录给我留下了深刻的印象， 我想知道可以用CSS完成吗？ 看起来变压器很适合。 我只是尝试了一下，然后看看发生了什么。

Another source might be at work, where we are trying to think about solving UI challenges, and how to help maybe users understand where something comes from, and where it goes. That might yield some thoughts about maybe how you animate a curved path using CSS. That then is something to write about, and becomes a topic in itself.

另一个来源可能正在起作用，我们试图考虑解决UI挑战，以及如何帮助用户理解某物的来源和去处。 这可能会引起您关于如何使用CSS为弯曲路径设置动画的一些想法。 那就是要写的东西，它本身就是一个话题。

David: 大卫：

The stuff that you’re writing, do you target that at a beginner level, or is it more targeted toward advanced CSS folks?

您正在编写的东西，是针对初学者还是更面向高级CSS专家？

Donovan [7:47]: 多诺万[7:47] ：

Well, I guess a byproduct of the fact that I’m writing about stuff as I learn it is that it’s quite easy to carry a bit of an expectation in terms of that people know a lot of what I know when I write … because that’s where my head’s at at the time. I often have to stop and kind of tell myself to think back on how I got here, and maybe what assumptions I’m bringing in terms of what I’m working with. But, generally speaking, I would assume an understanding of CSS in general, in terms of what maybe positioning is, what margins and paddings and the basics are. But, wherever possible, I try to take time to just explain if I’m doing something fiddly with like any kind of new CSS properties. I might take a chance just to explain what it is that I’m doing with that to give context.

好吧，我想这是我在学习时写东西的事实的副产品，因为人们对我在写作时了解的很多知识很容易产生一点期望，因为那是当时我的头在哪里。 我经常不得不停下来，要告诉自己去思考一下我是怎么来到这里的，也许我会根据自己的工作提出一些假设。 但是，总的来说，我会假设您对CSS有一个大致的了解，那就是定位是什么，边距和填充以及基本知识。 但是，在任何可能的地方，我都会尝试花一些时间来解释一下我是否正在像使用任何新CSS属性那样巧妙地进行操作。 我可能会借此机会来解释我正在做的事情以提供上下文。

An example was today when I was writing an example about how to stop an animation before the page loads, and I used the :not pseudo class. It’s not something I tend to use very often, but when it’s needed, it’s extremely useful. That’s the kind of point I guess I would just stop for a second and say, Hang on. This is what this means, in case you haven’t seen it before.

今天的一个例子是当我编写一个有关如何在页面加载之前停止动画的例子时，我使用了:not伪类。 这不是我经常使用的东西，但是当需要时，它非常有用。 我想我只是停下来说一声， 等一下。 如果您以前没有看过，这就是这个意思。

David: 大卫：

I know a lot of those things were unfamiliar to people because of compatibility issues. How much attention do you pay to browser compatibility when you’re doing the stuff that you’re working on?

我知道由于兼容性问题，很多事情让人们不熟悉。 在处理您正在处理的工作时，您需要多注意浏览器的兼容性？

Donovan: 多诺万：

Generally speaking, when I start, when I begin writing a tutorial, that’s when I wouldn’t worry too much about making everything work all the way back. But, I always keep it in mind. And, when I design and build things, I like it to be firstly trying to achieve as much as possible with CSS, but at the same time, to degrade gracefully back to something that still works and is accessible behind the scenes. In terms of thinking of actual version numbers, I often don’t really get too caught up on that, as much as thinking, Well what if JavaScript doesn’t work here, or, What if this browser isn’t capable of animations? We should then use Modernizr, or some fallback that makes sure that the content is actually going to be readable, that it will appear on the screen regardless. Then if the project’s capable of doing the fancy animation things, then go for it. Do as much as possible. It’s great, but I certainly don’t let the older browsers dictate what can be done with the new features.

一般来说，当我开始写教程时，那时候我就不会太担心让一切都恢复正常。 但是，我始终牢记这一点。 而且，当我设计和构建事物时，我喜欢它首先尝试使用CSS来实现尽可能多的目标，但同时又要优雅地降级为仍可使用且在后台可访问的事物。 在考虑实际版本号方面，我常常并没有真正想到那么多，而是在想， 如果JavaScript在这里不起作用 怎么办？或者， 如果该浏览器不支持动画怎么办？ 然后，我们应该使用Modernizr或某种后备，以确保内容实际上是可读的，无论它如何出现在屏幕上。 然后，如果项目有能力完成精美的动画工作，那就继续吧。 尽可能多地做。 很棒，但是我当然不能让旧的浏览器指示新功能可以做什么。

David: 大卫：

That makes perfect sense. One of the articles that you wrote that I was most intrigued about was these issues around accessibility and animation. I’m curious. Could you share with folks some of the things that you came across around that?

这是很合理的。 您写的我最感兴趣的文章之一是有关可访问性和动画的这些问题。 我很好奇。 您能与大家分享一下您遇到的一些事情吗？

Donovan: 多诺万：

Sure. There are a couple of main issues that do come up when people do use animations, the first being motion sickness. We have this hardwired balancing system in our head that tells us that when the earth moves, we feel it a certain way. If we present animation, especially if it’s large animation that maybe covers the entire screen, that tricks the brain into thinking that something ought to move, but our brain doesn’t feel that movement, we can feel ill. That’s something that some people are more susceptible to than others. At the same time, another issue that sometimes comes up with accessibility is when movement is on the screen, it’s very difficult to not look at the moving thing. Often, even subtle animations can distract people to the point where they literally can’t even use the application anymore, because the movement is stopping them from getting past that part. We have to be very mindful of that, in terms of when we use animation, and when we start and stop and turn off animations when we want people to concentrate on something else.

当然。 人们使用动画时会遇到两个主要问题，首先是晕车。 我们脑子里有一个固定的平衡系统，它告诉我们，当地球运动时，我们会以某种方式感觉到它。 如果我们呈现动画，特别是如果它可能是覆盖整个屏幕的大型动画，就会欺骗大脑以为应该移动某些东西，但是我们的大脑没有感觉到这种移动，那么我们会感到不适。 有些人比其他人更容易受到影响。 同时，可访问性有时还会带来的另一个问题是，当屏幕上出现移动时，很难不看移动中的东西。 通常，即使是微妙的动画也可能使人们分心，以至于他们甚至无法使用该应用程序，因为这种运动阻止了他们越过该部分。 关于何时使用动画，以及何时我们希望人们专注于其他事情，何时开始和停止以及关闭动画，我们必须非常注意。

David: 大卫：

I hadn’t thought about the motion sickness side of it, but that’s an interesting point. I was thinking about how animation could be useful for people with impaired vision, because of our natural tendency to see things that move, and have our attention drawn to them.

我没有考虑过晕车的一面，但这很有趣。 我一直在思考动画对于视力障碍者可能是有用的，因为我们天生就会看到移动的事物并引起我们的注意。

Donovan: 多诺万：

That’s a good point, yeah definitely. People notice things. That’s the counter side to being distracted by movement, is it’s much more easy to notice. And, if you want to draw attention to something, or even more to explain where something came from, animation can help more than have something just appear.

是的，很好，是的。 人们注意到了事情。 那是被运动分散注意力的反面，它更容易被注意到。 而且，如果您想吸引人们注意某个事物，甚至想更多地解释某个事物的来源，那么动画不仅可以使事物出现，还可以提供更多帮助。

David: 大卫：

It’s true. When you’re creating your animations with CSS, do you run into a lot of issues around keeping smooth motion, dealing with like the 60-frames-per-second issues?

这是真的。 使用CSS创建动画时，是否在围绕平滑运动方面遇到很多问题，例如处理每秒60帧的问题？

Donovan: 多诺万：

Absolutely, but most of the time, it really comes down to which properties we choose to animate. The main two properties that animate extremely well are transform and opacity, which deal with things like position, with scaling, skewing objects, and dealing with how transparent or see-through they are. If you’re using those — if you’re say, scaling things up and moving them around, using transforms and translation — then that’s typically great, because the browser isn’t repainting every time something moves. It’s not recalculating the positioning of everything else on the page. These things tend to then move in isolation. But, if you’re animating something like height … Say you have a div that has a fixed height, and you want it to get bigger to show more content, it has to nudge everything else out of the way. If you have a large page, that can often then cause stutteriness, because it’s recalculating up to 60 times a second, the entire layout of the page. That’s not what you want.

绝对，但是在大多数情况下，实际上取决于我们选择设置动画的属性。 主要的两个属性有生命的非常好，是transform和opacity ，其处理像位置，具有缩放，倾斜对象，以及处理如何透明或透视他们。 如果您使用的是这些工具(例如，说要放大并移动它们，使用转换和翻译)，那通常很棒，因为浏览器不会在每次移动时重新绘制。 它不是在重新计算页面上其他所有内容的位置。 这些东西往往会孤立地移动。 但是，如果要对高度等进行动画处理……假设您有一个具有固定高度的div ，并且希望它变大以显示更多内容，则它必须将其他所有内容都移开。 如果您的页面很大，则经常会造成混乱，因为它每秒最多重新计算整个页面布局60次。 那不是你想要的。

The same goes for font sizing, and other aspects maybe aren’t hardware accelerated — like if you tried to animate the background color of a large area, maybe the whole page or screen. That might, again, look very obvious and not right, because it’s trying to repaint many times a second, a very complicated scene. So, it’s a judgement call sometimes. You maybe look at it, and say, Well, maybe there’s too much going on in this animation. If we trim that back, or try to stick to transforms and opacity, then typically that results in a better performance.

字体大小调整也是如此，其他方面可能没有硬件加速-例如，如果您尝试为大区域(可能是整个页面或屏幕)的背景色设置动画。 这可能再次看起来很不正确，因为它试图在一秒钟内多次重绘一个非常复杂的场景。 因此，有时候这是一个判断电话。 您可能会看一下，然后说， 嗯，也许这个动画中发生了太多事情。 如果我们将其修剪掉，或者尝试坚持变换和不透明度，那么通常可以得到更好的性能。

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

That makes sense. That’s the sort of consideration that an engineer would take looking at trying to develop a site, but a designer might not actually be thinking about those issues when they’re putting together the design. I’m curious since you say you’re kind of transitioning between design and developer, how do you bridge those worlds, especially with designers who don’t know a lot about the engineering side, and vice versa?

这就说得通了。 这就是工程师在尝试开发站点时要考虑的考虑因素，但是设计师在将设计放在一起时可能并没有真正考虑这些问题。 我很好奇，因为您说您正在设计和开发人员之间过渡，您如何弥合这些世界，尤其是与对工程方面不太了解的设计师，反之亦然？

Donovan: 多诺万：

I think this is a problem that … it depends where you work, I guess, but it’s becoming less of an issue, and I’m seeing less of a problem than it used to be, where maybe back in the day, people would approach a lot of the design work from a print background, and think in terms of above the fold, and very locked-down expectations of what things would look like, and pixel-perfect designs. But, we’re reaching a situation now where prototyping tools really help people communicate ideas, I think, better between departments, so that if someone’s building something, if the designer can help actually building how it moves, and even better, using a tool like Framer, for example, where there’s some basic JavaScript involved, and there’s some actual tweening, then that can communicate very clearly to the developer building it that this is the intent as far as the design is concerned.

我认为这是一个问题……我想这取决于您在哪里工作，但它变得不再是一个问题了，而且我所看到的问题也比以往更少了，也许在一天中人们会接近许多设计工作都是在印刷背景下进行的，并从折叠的角度，对事物的外观以及像素完美的设计的严格限制的角度进行思考。 但是，我们现在遇到的情况是，原型设计工具确实可以帮助人们更好地在部门之间交流思想，这样，如果有人正在构建某些东西，设计者是否可以帮助实际构建它的移动方式，甚至可以更好地使用工具例如Framer ，其中涉及一些基本JavaScript，并且存在一些实际的补间，然后可以非常清楚地与开发它的开发人员进行交流，这就是设计的意图。

But, then vice versa: if the designer’s trying to think up something but doesn’t really know if it’s gonna work, in terms of the capabilities of the browser, then tools like this help get that out in the open quicker. It helps the conversation happen back and forth, and I find that’s useful for communicating, Well, this is what we can do, and then having a two-way conversation about what’s being designed.

但是，反之亦然：如果设计人员正在尝试思考某件事，但实际上并不知道它是否会起作用，就浏览器的功能而言，那么类似的工具将帮助您更快地将其公开。 它有助于对话来回进行，我发现这对于交流非常有用， 嗯，这就是我们可以做的，然后就设计的内容进行双向对话。

David: 大卫：

Are there any tools in particular that you found very useful?

有没有特别有用的工具？

Donovan: 多诺万：

Any tools in particular? I’m a big fan of Principle. And, in terms of getting quickly to a basic prototype, I find that a fantastic tool. You can go further and make some quite realistic-looking mockups using Principle. But, my use has been actually even more basic with it. I once used Principle to create a simulation of an interaction using whiteboard drawings.

有什么特别的工具吗？ 我是Principle的忠实拥护者 。 而且，就快速入门基本原型而言，我发现这是一个了不起的工具。 您可以进一步使用Principle制作一些看起来很逼真的模型。 但是，实际上我的使用甚至更为基础。 我曾经使用Principle来使用白板图纸创建交互的模拟。

I drew each board on the screen, on the whiteboard, took a photograph of each one, put each screen into Principle, and made touch areas. It was as lo-fi as you can get, but it got the idea across of what will happen when people touch this part, and where will the screen go.

我将每个板子画在屏幕上，白板上，为每个板子拍照，将每个屏幕放入Principle中，并触摸区域。 它是您所能获得的低保真度，但它使人们了解了当人们触摸此部分时将发生什么以及屏幕将到达何处。

There’s Principle. There’s also FramerJS, which I would recommend if people want to be a bit more familiar with code. But, it has some good tools as well for creating movement, and is quite mobile-friendly.

有原则。 还有FramerJS ，如果人们想对代码更熟悉，我会推荐它。 但是，它也具有一些用于创建运动的良好工具，并且非常易于移动。

David: 大卫：

Do you find that there’s any difficulty communicating to engineers about what the subtleties involved in animation are? Like, why certain things matter, and why certain things don’t?

您是否发现与工程师沟通动画所涉及的精妙之处有困难吗？ 例如，为什么某些事情很重要，为什么某些事情不重要？

Donovan: 多诺万：

There can be. Like I say though, a good use of prototyping can really help clarify just what’s happening. For example, when designing for iOS, there are some tools that can really not just help by showing how things look, they can actually output the code needed for iOS to actually handle the springiness, or the bounciness, of the movements.

可以有。 就像我说的那样，对原型的良好使用确实可以帮助澄清正在发生的事情。 例如，在为iOS设计时，有些工具确实不能仅仅通过显示事物的外观来提供帮助，它们实际上可以输出iOS实际处理运动的弹性或弹性所需的代码。

Yeah, I think the more people can communicate through whatever mediums, whatever tools we can find to help bridge these gaps, it really helps the process be smoother. It helps people communicate ideas from design right through.

是的，我认为，越来越多的人可以通过任何媒体，我们可以找到的任何工具来弥合这些差距，这确实有助于使流程更加顺畅。 它可以帮助人们从设计一直到传达想法。

David: 大卫：

I think animation is becoming more of a critical element in user interface in general, and people are starting to come up with almost a linguistics for how to use animation in their user interfaces.

我认为动画通常已成为用户界面中越来越重要的元素，人们开始想出一种几乎如何在其用户界面中使用动画的语言。

Donovan: 多诺万：

Yeah. I think communicating what animations are is a tricky thing to do. Sometimes it’s tough to try to just get the idea across. You can’t really do as much as you need to with just waving your hands, for example.

是的 我认为交流动画是一件棘手的事情。 有时候，很难将想法传达出去。 举个例子，挥舞着双手，做不到真正需要做的事。

David: 大卫：

[Chuckles] But, when people see something in their user interface, and the menu bounces a little bit, people are starting to become familiar with that as communicating a specific notion about what’s happening with the content.

[笑声]但是，当人们在其用户界面中看到某些内容，并且菜单出现一些反弹时，人们开始交流有关内容正在发生的特定概念的过程，从而开始对此感到熟悉。

Donovan: 多诺万：

I’m a big fan of what Google did with that with their material design work, where they took a lot of the principles of animation, and applied it to help people understand just what was happening with UI. Some of the subtle animation touches that they came up with, for example if something appeared on the screen, it should start off already in motion and then slow down, rather than ease up and then down into the view. It was good to see that kind of realistic design taken on board in terms of UI.

我非常支持Google在其材料设计工作中所做的工作，他们采用了许多动画原理，并将其应用于帮助人们了解UI发生了什么。 他们想到了一些微妙的动画效果，例如，如果屏幕上出现了某些东西，它应该已经开始运动，然后放慢速度，而不是放慢然后再进入视图。 很高兴看到在UI方面采用了这种现实的设计。

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

I know what you mean. A lot of us grew up watching cartoons in which all of those things are animated and exaggerated. Yet, now all the things that we saw as children are informing the way that we do our work today.

我知道你的意思。 我们中的许多人长大后都看动画片，其中所有这些东西都被动画化和夸张了。 但是，现在，我们小时候所看到的所有事物都在告知我们今天的工作方式。

Donovan: 多诺万：

I think the principles of animation still stand. There are 12, actually, very well-considered points there in terms of how to help us connect with what’s on the screen. If we apply that to our UI, then helping people connect to what we’re building is a good thing.

我认为动画原理仍然存在。 关于如何帮助我们连接屏幕上的内容，实际上有12个考虑周全的要点 。 如果我们将其应用于我们的UI，那么帮助人们连接到我们正在构建的东西是一件好事。

David: 大卫：

Have you been getting any feedback from users about the types of the information you’ve been putting out there?

您是否已从用户那里收到有关您所提供的信息类型的任何反馈？

Donovan: 多诺万：

Over the past two years, I’ve had over 2000 people take part in a course I run at CSSanimation.rocks. That’s been invaluable for me in terms of learning what people really enjoy learning about, but also what they use these skills on. Seeing the different perspectives and the different ideas, and then seeing things pop up on sites like CodePen, it’s just fantastic to see the ecosystem around web and animation growing.

在过去的两年中，我有2000多人参加了我在CSSanimation.rocks开设的课程。 在学习人们真正喜欢学习的东西以及他们使用这些技能的东西方面，这对我来说是无价的。 看到不同的观点和不同的想法，然后看到诸如CodePen之类的网站上弹出的东西，看到网络和动画周围的生态系统不断增长真是太好了。

David: 大卫：

Where do you think you’re gonna be taking this next?

您认为接下来要去哪里？

Donovan: 多诺万：

I’m gonna keep pulling the thread and see where it leads. Every time I learn something new, I’ll do my best to share it, and see what exciting doors it opens up.

我要继续拉线，看看线在哪里。 每次我学习新东西时，我都会尽力分享它，看看它打开了哪些激动人心的门。

David: 大卫：

That’s awesome. For listeners who are curious in your course and your information, how can people find you online?

棒极了。 对于对您的课程和信息感到好奇的听众，人们如何在网上找到您？

Donovan: 多诺万：

I can be found on Twitter @DonovanH, and on the web I run a website called CSSanimation.rocks. That is also on Twitter, but the handle is @CSSanimation.

我可以在Twitter @DonovanH上找到 ，然后在网络上运行一个名为CSSanimation.rocks的网站。 这也在Twitter上，但是句柄是@CSSanimation 。

David: 大卫：

Cool, and I think you have a course at SitePoint as well.

太好了，我想您也可以在SitePoint上学习一门课程。

Donovan: 多诺万：

I do indeed. I recommend you check it out.

我确实是。 我建议您检查一下。

David: 大卫：

Fantastic. Well, thanks for joining us today. This has been really fascinating.

太棒了 好，谢谢您今天加入我们。 这真是令人着迷。

Donovan: 多诺万：

Thank you very much. It’s been a pleasure.

非常感谢你。 这是我的荣幸。

[Musical interlude]

[音乐插曲]

David: 大卫：

Well, Tim, I really need to thank you, because you know we had some technical problems during that show which is why I was asking all the questions. But, you were there in the background sending me the good questions to ask. You were typing on the back channel, and letting me know what I should be asking Donovan about.

好吧，蒂姆，我真的要谢谢你，因为你知道在演出期间我们遇到了一些技术问题，这就是为什么我要问所有问题。 但是，您在后台，向我发送了很好的问题。 您在反向频道上输入内容，然后让我知道我该向Donovan询问什么。

Tim: 蒂姆：

Yes. I was there in spirit, and muted on Google Hangouts.

是。 我精神振奋，在Google环聊中保持沉默。

David: 大卫：

Muted thankfully, but it worked out very well for all of us. It was a great episode too, and Donovan really brought me back to my past. It was talking about the Amiga and the Sinclair ZX81, and 3D rendering. Man, that brings me back to the old days.

谢天谢地地将其静音，但对我们所有人来说效果都很好。 这也是一个很棒的插曲，而多诺万真的使我回到了过去。 当时谈论的是Amiga和Sinclair ZX81，以及3D渲染。 伙计，这使我回到了过去。

Tim: 蒂姆：

While I was listening to him speak, and listening to you speak, and just listening in general, it really started to dawn on me how there’s almost this formulaic progression wherein someone just gets interested in the field of web development, and they go on to learn and write or speak or teach about what they’ve been learning, and they just, they continue to do that. As they’re learning something, they figure out to themselves: okay, this is an interesting thing. I’m gonna tell others about what I’m doing. They just continue with that, and that’s how they get to this sort of stage in the industry wherein they become a good resource.

当我听他讲话，听您讲话，只是一般地听时，这真的开始让我意识到，几乎是这种公式化的发展，其中有人对Web开发领域产生了兴趣，然后他们继续学习，写作，说话或教导他们所学的知识，而他们只是继续这样做。 当他们在学习某些东西时，他们会自己弄清楚：好的，这很有趣。 我要告诉别人我在做什么。 他们只是继续这样做，这就是他们如何进入行业中的这一阶段的过程，在那里他们成为了很好的资源。

David: 大卫：

It’s inspiring, because it’s so easy to think about just going in, doing your job, and then going home, taking assignments as they come, and not really thinking about the broader picture. But, these are the people who are taking agency in their own careers, and saying, This is what I’m interested in. This is what fascinates me. They go down those funny little channels, and explore the odd nooks and crannies of, like, CSS animation for example — areas that people might not think of as hardcore engineering, or serious career development. But, they end up building reputations for themselves. And they do that in a way that makes them the sorts of people that we’d want to have on the show talking about how they’ve built their careers.

这很鼓舞人心，因为考虑入职，完成工作，然后回家，随身携带作业，而不是真正考虑更广阔的前景非常容易。 但是，这些人在自己的职业生涯中发挥着代理作用，并说， 这就是我感兴趣的。这就是令我着迷的地方。 他们沿着这些有趣的小渠道走下去，并探索诸如CSS动画之类的奇怪地方和缝隙-人们可能不会将其视为核心工程或认真的职业发展领域。 但是，他们最终为自己建立了声誉。 他们这样做的方式使他们成为我们想要在节目中谈论他们如何建立事业的人们。

Tim: 蒂姆：

Yeah. It’s like they allow their curiosity drive them. Yeah, I love to see that, and of course they become the people who we ask questions. Like, for example, when you asked Donovan about CSS animation, and I learned something completely new, wherein your animating can sometimes throw people off balance, and cause special dis-awareness. I’ve probably done that before, and I’ve never thought anything about it.

是的 就像他们让好奇心驱使他们前进一样。 是的，我很乐意看到这一点，当然他们也成为我们提出问题的人。 例如，当您向Donovan问有关CSS动画的知识时，我学到了一些全新的知识，其中的动画有时会使人们失去平衡，并引起特殊的意识不足。 我以前可能已经做过，而且从未想过。

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

It’s true, and it’s so wonderful that people are thinking about accessibility issues. As Donovan said, accessibility isn’t just about people with disabilities. Accessibility is about being able to interact with the site from wherever you happen to be coming from. It can come from people who, they might be distracted. You might need to design in a special way so that somebody can pay attention, so you put something flashing over here to take advantage of the human natural tendency to respond to flashing items.

的确如此，人们思考可访问性问题真是太好了。 正如多诺万(Donovan)所说，可访问性不仅仅与残疾人有关。 可访问性是指无论您来自何处，都能够与该站点进行交互。 它可能来自那些可能会分心的人。 您可能需要以特殊的方式进行设计，以便有人关注，因此您在此处放置一些闪烁的东西，以利用人类对闪烁物品做出React的自然趋势。

Tim: 蒂姆：

Yes. Situational awareness is often something that we don’t think about when we’re building things. You know, we don’t often ask ourselves, What is in the mental space of the person who is using this service or product? Actually, I believe it’s Eric Meyer who has a lot to say about that. He speaks a lot about designing for crisis. For example, if you are building a splash page for a hospital, what is the type of information that’s more important, and what kind of state is the user in when they’re looking up that information?

是。 当我们构建事物时，情境意识通常是我们不会想到的。 您知道，我们并不经常问自己， 正在使用此服务或产品的人的心理空间是什么？ 实际上，我相信这是埃里克·梅耶(Eric Meyer)有很多话要说。 他谈到了为危机而设计 。 例如，如果您要为医院建立启动页面，那么哪种信息更重要，并且用户在查找信息时处于哪种状态？

David: 大卫：

This is why the whole field of UX design, I think, is exploding right now, because we’re getting to the situation where something that somebody cobbled together on a deadline in order to meet some requirement is now saving lives, or failing to save lives. It’s becoming a reality in the institutions that our society is built around. So, now we have to play quick catch up, and realize that all of this work that we’ve been doing, it has a real impact on people’s lives. These are the sorts of things that are going to come up, and we need to pay attention to that we wouldn’t have thought about this before.

我认为，这就是为什么UX设计的整个领域现在都在爆炸式增长的原因，因为我们遇到这样的情况：有人为了满足某些要求而在最后期限前凑齐了某些东西，现在他们正在挽救生命，或者未能挽救生命生活。 在我们的社会所建立的机构中，这已成为现实。 因此，现在我们必须快速赶上，并意识到我们一直在做的所有工作对人们的生活产生了真正的影响。 这些都是即将发生的事情，我们需要注意我们之前从未考虑过的事情。

Tim: 蒂姆：

It’s easy to forget about something. I’m working on building some search functionality at work right now. There are some very little expectations that we put into these sorts of products without ever thinking about it. For example, when a user searches, we kind of assume from the get-go that we know what they’re searching for. That’s not necessarily … Let’s say I’m building a search to search for, I don’t know, different types of cardboard boxes, right? You could assume that I need to buy a cardboard box, or you could assume that I’m a cardboard box aficionado.

忘记某事很容易。 我正在努力构建一些工作中的搜索功能。 我们对此类产品的期望很少，甚至从未考虑过。 例如，当用户搜索时，我们从一开始就假设我们知道他们在搜索什么。 不一定。。。假设我正在建立一个搜索，以搜索不同类型的纸板箱，对吗？ 您可以假设我需要购买一个纸箱，或者您可以假设我是一个纸箱迷。

David: 大卫：

Or, you could assume that you’re a cat.

或者，您可以假设您是猫。

Tim: 蒂姆：

You could also assume that I’m a cat. In that case, no red dots flashing across the screen. I’ll attack my computer.

您还可以假设我是猫。 在这种情况下，屏幕上不会闪烁红点。 我会攻击我的电脑。

David: 大卫：

[Chuckles] It’s true. But no, you bring up a very valid point. I mean, we’re making these immediate assumptions about if we have a user, we know what we would like that user to be there to look for. We know what would benefit our business for that user to be there for. But, what that user’s actually there for, we might have no idea. Being able to come up with that perspective, and recognize it, and be adaptable enough, that what we’re doing will work for whatever kind of user happens to be coming to us, that’s a skill that people haven’t been developing enough.

[笑声]是的。 但是不，您提出一个非常有效的观点。 我的意思是，我们正在就是否拥有用户做出这些直接假设，我们知道我们希望该用户在哪里寻找。 我们知道该用户能够从中受益于我们的业务。 但是，该用户的实际用途是什么，我们可能不知道。 能够提出，认识并充分适应这一观点，以至于我们所做的工作将适合碰巧遇到的任何类型的用户，这是人们尚未充分开发的一项技能。

Tim: 蒂姆：

Yeah. I’m 100% guilty on that.

是的 我对此感到内100。

David: 大卫：

One of the things that Donovan was talking about, particularly around the issues of CSS animation, was the tools that people use to communicate how an animation is supposed to work. We’ve talked about this before, I think, with some other folks — about designers not being engineers, not necessarily knowing what the capabilities are of the technologies. At the same time, engineers — not being designers — don’t understand what the user expectations are necessarily going to be around an animation. He brought up some tools. I haven’t actually worked with either one of those tools. I think it was Principle and Framer.JS.

Donovan谈论的一件事，尤其是关于CSS动画的问题，是人们用来交流动画应该如何工作的工具。 我认为，我们之前已经与其他人谈论过这一点，即设计师不是工程师，也不一定知道技术的功能。 同时，工程师(不是设计师)不了解用户对动画的期望。 他带来了一些工具。 我实际上没有使用任何一种工具。 我认为是Principle和Framer.JS。

Tim: 蒂姆：

I’ve heard of Framer.JS, but I haven’t used it. What I can tell you is I’m very guilty of communicating animations with designers by waving your hands around in the air, and making whooshing sounds.

我听说过Framer.JS，但尚未使用过。 我能告诉你的是，我非常有罪恶地与设计师交流动画，方法是在空中挥舞着你的手，然后发出嘶哑的声音。

David: 大卫：

Tim-driven design, that would be.

Tim驱动的设计就是这样。

Tim: 蒂姆：

Tim-driven design is probably —

Tim驱动的设计可能是-

David: 大卫：

Hashtag!

井号！

Tim: 蒂姆：

… not as good as FramerJS, but it makes —

…不如FramerJS好，但它使-

David: 大卫：

It’s probably more fun to watch though.

观看起来可能更有趣。

Tim: 蒂姆：

Oh yes. It’s great. It’s great, especially if you can’t hear what anybody’s saying, and then you get to ad lib.

哦是的 这很棒。 很棒，特别是如果您听不到任何人的话，然后便可以自由使用。

David: 大卫：

How does that actually work in practice?

实际上这是如何工作的？

Tim: 蒂姆：

Not well, because what you end up is an animation that was never fully communicated, and nobody expected.

不好，因为您最终得到的是从未完全传达过的动画，而且没有人期望过。

David [24:02]: 大卫[24:02] ：

It’s a tricky problem, and I think that a lot of it comes down to the language that people use to communicate what it actually means to produce a type of animation. I don’t think that we yet have the language for doing that.

这是一个棘手的问题，我认为很多问题都归结为人们用来传达产生一种动画的实际含义的语言。 我认为我们还没有做到这一点的语言。

Tim: 蒂姆：

It’s almost as if every time I start working with a new designer, I forget to say, Here’s what we should use to prototype animations, and here’s what I’m going to use to build out those prototypes.

好像我每次开始与新设计师合作时，我都忘了说， 这是我们应该用来制作动画原型的东西，这是我将用来构建那些原型的东西。

David: 大卫：

I think it’s useful for the designers to know what the engineers are working with. At some point, there has to be a lot more interaction between those two sides of the equation, because an engineer who has to understand the complex mathematics of how these things are going to work together, versus a designer who might be thinking more about, perhaps it’s the situational attention of the user.

我认为对于设计师来说，了解工程师的工作很有用。 在某些时候，方程式的这两个方面之间必须有更多的相互作用，因为工程师必须了解这些事物将如何协同工作的复杂数学原理，而与可能会思考更多问题的设计师相比，也许是用户的情境关注。

Tim: 蒂姆：

As we mentioned before, the animation usually comes in as an afterthought. We need to talk with people like Donovan to remind ourselves continuously that it’s an important thing. It deserves thought, and you need to have a plan for it. Even if you don’t actually plan on adding animation to your project, most of the time, it kind of just seeps in there.

如前所述，动画通常是事后才想到的。 我们需要与多诺万(Donovan)这样的人交谈，以不断提醒自己这是重要的事情。 它值得思考，您需要为此制定计划。 即使您实际上并没有计划在项目中添加动画，大多数情况下它也只是渗入其中。

David: 大卫：

You raise a valid point there about animation coming in as an afterthought. I think a few years ago, a lot of us used to bristle at the idea of Am I a developer or a designer? As a developer, somebody would say, Are you a web designer? You would get all upset about being called a designer when you’re actually a developer. I think these days, people are looking at animation a lot the way that they were looking at design back 10 maybe 15 years ago. It was something that you added as a decoration at the end of a project. But, in actual fact, animation is critical to the way people are interacting with all of these interfaces these days. We’re learning more and more about how critical animation can be.

您在此提出了有关动画作为事后思考的有效观点。 我想几年前，我们很多人都对我是开发人员还是设计师的想法不屑一顾？ 作为开发人员，有人会说： 您是网页设计师吗？ 当您实际上是一名开发人员时，您会为被称为设计师而感到沮丧。 我想这些天来，人们看动画的方式和他们大概在15年前回顾设计的方式一样。 这是您在项目结束时添加的装饰。 但是，实际上，动画对于当今人们与所有这些界面的交互方式至关重要。 我们越来越了解关键动画的效果。

Tim: 蒂姆：

Right, because nobody wants to open up an off-canvas navigation menu, for example, and it to just blink and be there. You want it to slide out a little bit. Even if you don’t think about that as a user, subconsciously, when it opens all nice and smooth-like, it makes you feel better about what you’re using.

是的，因为没有人愿意打开例如画布外的导航菜单，而该菜单只是闪烁而已。 您希望它滑出一点。 即使您不以用户身份考虑，当您下意识地打开所有漂亮而流畅的外观时，也会使您对所使用的内容感觉更好。

David: 大卫：

It simulates the real-world interactions, and it gives you a context that you’re operating in. I imagine that as we start getting into more immersive environments and augmented reality, that’s going to become even more critical.

它模拟了现实世界中的交互，并为您提供了您在其中进行操作的上下文。我想，随着我们开始进入更身临其境的环境和增强现实，这一点将变得更加关键。

Tim: 蒂姆：

Right, because no one actually likes using interfaces. In fact, it seems like the more technology progresses, the less interfaces you actually want to have, right? There’s the concept of the UI-less application, wherein you get a push notification, and you respond to that with the touch of a button. That might be all the interacting with an application that you do, because every new user interface that comes along, it requires an investment. You have to invest time into learning how to use it to learn its quirks, its defects, what’s good about it. But, users themselves don’t want to give this initial investment into these sorts of things. They just want to complete the objective at hand.

是的，因为没有人真正喜欢使用接口。 实际上，似乎技术越进步，您实际想要的接口就越少，对吗？ 没有UI的应用程序的概念是，您会收到一个推送通知，然后通过触摸按钮对其进行响应。 这可能是与您执行的应用程序进行的所有交互，因为随之而来的每个新用户界面都需要投资。 您必须投入时间来学习如何使用它来学习其怪癖，缺陷以及它的优点。 但是，用户本身并不希望将最初的投资投入到这类事情上。 他们只想完成眼前的目标。

David: 大卫：

That’s one of the reasons why it’s so frustrating for users when the interface changes in an application, as we’ve seen. When you move this button over here, you change the way people interact, you adjust the way you click on a form button, or how an input field works. The users have become used to a certain pattern for how these things behave. It’s one of the reason I think that when the browser designers decided to make HTML form elements more difficult to style with CSS, that was brilliant, because users are used to the way that their browser’s form elements work. If you get into a situation where people are over styling and over styling form elements to make them behave or look and feel the way that the rest of the specific application looks, a user, who’s used to the way their browser’s form elements work, is gonna get confused from one site to the next.

如我们所见，这就是当界面在应用程序中更改时令用户感到沮丧的原因之一。 将按钮移到此处时，可以更改人们的交互方式，调整单击表单按钮的方式或输入字段的工作方式。 用户已经习惯了某种模式来了解这些事物的行为。 这是我认为，当浏览器设计师决定使HTML表单元素更难以使用CSS进行样式设置时，这之所以如此出色，是因为用户已经习惯了其浏览器表单元素的工作方式。 如果您遇到了人们过度样式化和过度样式化表单元素以使其表现或看起来和感觉到特定应用程序其余部分外观的方式的情况，那么习惯了浏览器表单元素工作方式的用户就是会从一个站点到另一个站点感到困惑。

Tim: 蒂姆：

I wish it would translate that way between designers and developers as well.

我希望它也可以在设计师和开发人员之间转换这种方式。

[Chuckling]

[咯咯笑]

Because I very often get comps that ask for redesigning for how a select drop-down works, or a radio button, or a file input type.

因为我经常收到要求重新设计选择下拉菜单，单选按钮或文件输入类型的补偿工具。

David [27:56]: 大卫[27:56] ：

Yeah. That’s something that I often push back on. I don’t always win those arguments when I’m pushing back on it. But, I think that there’s a more valid argument to be made now, for recognizing that these interactions make a difference to the way that users will interpret an application consistently across all of the different applications that they’re using within their browser. As designers are getting more into animation design, and into situational perception, I think that they might be more attuned to that issue right now.

是的 这是我经常推后的话题。 当我坚持下去时，我并不总是赢得这些争论。 但是，我认为现在有一个更有效的论据，因为认识到这些交互作用会影响用户在浏览器中使用的所有不同应用程序中一致地解释应用程序的方式。 随着设计师越来越多地进入动画设计和情境感知中，我认为他们现在可能会更加适应这个问题。

Tim: 蒂姆：

Yes, I would certainly hope so. Speaking about perception, one of the things that I really like about Donovan is how he teaches, because it seems like looking through his courses on CSSanimation.rocks, he really seems to understand that the type of person he’s teaching about CSS animation might be coming from a background of not necessarily understanding anything about the topic.

是的，我当然希望如此。 说到感知，我最喜欢Donovan的一件事就是他的授课方式，因为看起来像通过他在CSSanimation.rocks上的课程看，他似乎真的很了解他正在教授CSS动画的那种人可能会来从不一定了解该主题的背景出发。

Just diving into the material here, you can really see that this is geared towards someone at any level. You know, basic concepts are explained, but not in too much detail that it becomes trivial for someone who is not necessarily a beginner. But it really does translate that he’s thought about where his user is coming from, in terms of diving into his course.

只是在这里深入学习材料，您真的可以看到它适用于任何水平的人。 您知道，对基本概念进行了说明，但没有过多详细地说明它对于那些不一定是初学者的人来说是微不足道的。 但这确实的确表明了他在潜入课程方面对用户来自何处的思考。

David: 大卫：

And I know a lot of people who have a background in engineering have historically tended to shy away from CSS. It’s attracted more people from the design side of the world than from the engineering side of the world. Yet, these days, it’s becoming so integral to engineering to be able to create performant CSS, especially with animation, that creating courses like this that allow people to come in and apply their skills, and yet develop the knowledge that they need, it’s invaluable.

而且我知道许多具有工程学背景的人历来倾向于避开CSS。 它吸引了来自设计方面的人，而不是来自工程方面的人。 但是，这些天来，工程技术已变得不可或缺，以能够创建高性能CSS(尤其是动画)，从而创建这样的课程，使人们可以进入并应用他们的技能，同时发展他们所需的知识，这是无价的。

One of the things that impressed me with Donovan what he was talking about about teaching courses is how he goes out and learns the things that he’s interested in, and learns through the process of teaching. I think that that’s something that’s universal with teachers.

多诺万让我印象深刻的一件事是他在讲授教学课程时所经历的事情，就是他如何走出去并学习他感兴趣的事物，并在整个教学过程中学习。 我认为这在老师中很普遍。

Tim: 蒂姆：

Yeah. He also mentioned something to the effect of CSS being hard for everybody, because it’s not necessarily a programmatic language in the way JavaScript or PHP or Ruby is. It’s very declarative. That trips a lot of people up. Taking advice from the way that Donovan got started, by getting interested, learning, and then teaching what he’s learned, it seems like that’s good advice for anyone who does find CSS incredibly difficult, right? If you’re struggling with it, maybe it’s a good idea to build your own CSS 101 course, and see just how far that gets you into understanding the fundamentals a little bit better.

是的 他还提到了一些CSS会对所有人造成困难的影响，因为它不一定像JavaScript或PHP或Ruby那样是一种编程语言。 这是非常声明性的。 那使很多人绊倒。 从Donovan的起步方式中获取建议，通过变得有趣，学习然后教他所学到的东西，对于那些发现CSS异常困难的人来说，这似乎是个好建议，对吗？ 如果您为此而苦苦挣扎，那么构建自己CSS 101课程可能是个好主意，然后看看让您更好地了解基础知识的程度。

David: 大卫：

That’s true, and it’s not like there isn’t going to be an audience out there. There’s always somebody out there who’s interested in learning these things. All you need to do is know one thing beyond what your audience is looking for, and then you’re the expert on that one thing that they need to know next. Like, for example the way he was talking about the different techniques in animation that can be more or less performant. He was talking about transform and opacity, scaling and translation — but, don’t change height and don’t change size — and how those things make a big difference in terms of how people interact with a web page. He can rattle that off, because he went through and, step-by-step, he figured out these are the things that work, these are the things that don’t.

没错，这并不是说没有听众在场。 总是有人对学习这些东西感兴趣。 您所需要做的就是超越受众所要寻找的一件事，然后您成为他们接下来需要了解的一件事的专家。 例如，他谈论动画或多或少表现出不同技术的方式。 他在谈论变换和不透明性，缩放和转换-但是，不要改变高度，也不要改变大小-以及这些东西如何在人们与网页交互方面产生很大的不同。 他可以摇摇晃晃，因为他经历了一步一步的工作，他发现这些是行之有效的，这些是行不通的。

Tim: 蒂姆：

And, it’s not just necessarily about having information that someone else doesn’t have. Most of the times, these also serve as excellent reminders. I can probably go through this CSS animation 101 course that Donvan’s released. I’ve probably heard about every single thing in that course, but I can guarantee you, there is more than one thing there that I will go, Oh. I totally forgot about that. Let me write that down.

而且，这不仅仅意味着获得别人没有的信息。 在大多数情况下，这些信息也可以很好地提醒您。 我大概可以浏览Donvan发布CSS动画101课程。 我可能已经听说过该课程中的每件事，但是我可以保证，我会做的不止一件事情， 哦。 我完全忘记了。 让我写下来。

David: 大卫：

It’s always going to change, too. The other thing that’s important is that it’s never something that’s going to be sitting still. As the browsers change, as the expectations of users change, as design techniques change, we’re always going to have to keep on learning new things. That technique that was marginal five years ago is now absolutely central to the work that we’re doing, so there’s always another opportunity to go out and learn something.

它总是会改变的。 重要的另一件事是它永远不会停滞不前。 随着浏览器的变化，用户期望的变化以及设计技术的变化，我们总是必须继续学习新知识。 五年前还很少使用的技术现在绝对是我们正在做的工作的中心，因此总是有另一个机会可以出去学习一些东西。

Tim [31:48]: 提姆[31:48] ：

Right. For example, those getting started with CSS right now may not have to worry about browser vendor prefixes as much as we used to have to, right? I don’t really have to write a browser prefix for a border radius anymore. That’s not something that I have to worry about. For anything that I do have to worry about those, I can just hook up a post-processor that’ll add those browser prefixes in via Can I use data, and it’s just completely forgotten about.

对。 例如，那些立即开始使用CSS的人可能不必像以前那样担心浏览器供应商前缀，对吗？ 我真的不必再为边界半径编写浏览器前缀了。 我不必担心。 对于我确实需要担心的任何事情，我可以连接一个后处理器，该后处理器将通过“我可以使用数据”添加这些浏览器前缀，而这完全被人们遗忘了。

David: 大卫：

Of course if we’re using Sass, a whole lot of that gets taken care of for us behind the scenes anyway, unless we’re the people writing plugins for Sass to make that stuff happen.

当然，如果我们使用的是Sass，那么无论如何我们都会在后台处理很多事情，除非我们是为Sass编写插件使这些事情发生的人们。

Tim: 蒂姆：

Yes, those people have to know about it.

是的，那些人必须知道这一点。

David: 大卫：

I’m so grateful for that, because there were days back in the day when I used to dream in CSS browser prefixes and hacks, like putting asterisks in front of things in order to make IE6 recognize or not recognize different selectors. So glad those days are behind us.

我对此非常感激，因为曾经有一天我曾经梦想着在CSS浏览器中添加前缀和黑客，例如在星号前加星号以使IE6识别或不识别不同的选择器。 很高兴那些日子已经过去。

Tim: 蒂姆：

The zoom property. That was just — nothing’s working, I’m gonna try this.

zoom属性。 那只是-没什么用，我要试试。

David: 大卫：

It was amazing how often that worked, too.

同样令人惊讶的是，这种方法的工作频率也是如此。

---

---

Tim: 蒂姆：

Well, thank you so much for listening everybody. We always enjoy 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/css-animation-prototyping-tools-and-sources-of-inspiration-with-donovan-hutchinson/