This course has been updated! We now recommend you take the CSS Animations and Transitions course.
Transcript from the "Sprite Animation with CSS" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Rachel Nabors: So let's do something neat with that block. Let's do something that we can't do with transitions alone. But first, let's take a little segue into the land of traditional animation. This is a walk cycle I'm using with the permission of a friend of mine, Steven Gordon. He was the key frame animator and character designer for X-Men Evolution way back in the 90s, if anyone remembers it.
[00:00:29] Anybody remember X-Men Evolution? My people. When I was in the Philippines, the entire class was like, X-men Evolution! Apparently it was a pretty big deal in Manila. But some people in America still remember it. So this is my favorite character, it's Rogue. She's the kind of, goth teen of the X kids and this is the sort of walk cycle that animation students spend their first couple of semesters working on, to add to their portfolio.
[00:01:03] And by the time they're done with it, they realize why people send so much animation work overseas. Because this is kind of the busy work of animation in-betweening all of these these these key frames to create this cycle. But what Steven Gordon did when he made this particular walk cycle is, when he designed these characters and they were shipping them off to overseas animation houses, he needed to communicate with animators what each of the characters would look like when they walked.
[00:01:32] So those animators could make informed decisions about how they should walk across the screen to go get a glass of water, how their movement would be. And he had one for each of the characters, this is the one he had for Rogue, pretty cool, nice little visual communication trick.
[00:01:50] It's kind of the hello world of animation. So I wanted to give you all the chance to make your own walk cycle. I've already done the painful part, which is making all of the sprites and frames that you're going to need. I already did that, thank you. It took a long time, I did not outsource it to another country.
[00:02:07] It's all American animation. My goodness, this is what one of those looks like on paper. Let me tell you a little bit about these different columns. This isn't the entire cycle. This is a big sprite sheet containing several different tunas. The one all the way there on the left is the first four or five frames of the walk cycle that he has.
[00:02:32] The second column is a, from walk to sitting cycle. You might run between having him going from walking to sitting down behind a computer. The third one is a transition from a walk to a run. And the fourth one is a running cycle of him running really fast.
[00:02:50] So you would play that third one in between the first and the fourth. Showing him speed up. I have used these before, you'll probably see plenty of examples. The sprite sheet took me forever to make, so I reuse it wherever I possibly can. You definitely gain an appreciation for the way the animation stylings of Hanna-Barbera and other 60s and 70s animation favorites because this is how they saved money.
[00:03:13] They reused so many walk cycles.
>> Rachel Nabors: So what we do with something, with a sprite like that, is we make a zoetrope. I believe I recorded this at a museum in Munich, and this is essentially a sprite sheet being mechanically animated to show us this horse running. I think I'm actually running it backwards, though.
[00:03:37] It looks like the horse is prancing, so I may have messed that up. Maybe I should just reverse the film. Anyway. So essentially, we're gonna do the same thing, but we're gonna use a very special timing function. We're gonna use steps. So, steps is a special timing function in that, you pass a value x, just like cubic bezier curves, it occurs where you give a cubic bezier parentheses and you give it a bunch of numbers.
[00:04:09] You give steps a number, a number, one number. And this number tells it how many frames you want in that animation. So, say you're going from black to red, or pardon, say you're going from white to red and you want it to transition in a chunky way. You want it to turn into several shades of gray, or maybe just one shade of gray.
[00:04:33] Go white, gray, black. White, gray, black, right? You want it to have steps. You don't want it to gently fade into gray and then fade into black. You want it to be white, then you want it to be gray, and then you want it to be black. You might pass it a steps timing function and form of steps parentheses three.
[00:04:52] The documentation, like how exactly this works, is really confusing. I've actually been working with the W3C on coming up with a timing function that is less confusing, which I think we are renaming Frames. There are a couple of gotchas, I'll show you those gotchas. I don't think many people use steps in the wild, but should you ever want to do something really cool and chunky you will know how, and you will be far ahead of your your peers.
[00:05:21] But if you really want to see specific gotchas, I have documented all of my pain on CodePen. If you ever want to see a horror story before you go to bed on a Halloween evening or something like that, check it out.