Difference between revisions of "Basic Animation Tutorial"
(→Exaggeration techniques:) |
|||
| (9 intermediate revisions by 5 users not shown) | |||
| Line 1: | Line 1: | ||
| − | by | + | by Jetrel |
== Introduction == | == Introduction == | ||
| − | Animation works by fooling the mind into thinking that a series of still images are one continuously moving object. | + | Animation works by fooling the mind into thinking that a series of still images are one continuously moving object. This works based on the neurochemical principles of the human eye - specifically a phenomenon called "persistence of vision". Human retina cells do not immediately turn off after being activated by light; instead they gradually "cool down" and they keep sending the signal that they see light, in gradually decreasing amounts, during this period. The cooldown is measured in seconds, and for at least 1/30 of a second, the cells have cooled down so little that the change in what you see is imperceptible. |
| − | + | '''The trick to making a convincing animation is to swap still images faster than a retinal cell's cooldown, which tends to be about 10-30fps.''' Anything less than 10fps does not register in the mind as an animation, and looks more like a rapid slideshow. Anything more than 30fps tends to rapidly diminishing returns on "smoothness". This is precisely why videogamers tend to demand at least 30fps of rendering in their games (by buying strong enough machines to achieve that) - anything less feels very jerky and frustrating to watch. | |
| − | + | One computer-specific factor is that game animations tend to not merely be played in a fixed spot on the screen, but tend to slide around as the character is moving - for example, if a character is running or jumping. Persistence of vision applies not just to frame-count of a given animation, but also to distance travelled per frame - if it moves too quickly relative to the framerate, it will look like it is disappearing from one location, and suddenly appearing in another. The general solution to this is motion blur, which mimics the real-life blurring of objects (think of fan blades) as they move quickly. The best way to do this, especially in a 3d engine, is just having the code blur anything which moves over a certain speed, but this is not supported by wesnoth's engine - instead, we hand-animate motion blurs of anything which moves at a sufficiently high speed - for us, this is exclusive to weapons being swung. | |
| − | |||
| + | Wesnoth is able to get away with a low FPS on its animations because we can programmatically create motion, some of the time. When a unit attacks, the code slides the attack image around. This allows us to use single images where we would be better served by multiple images. We can only get away with this in certain situations, however, and part of this is because the code-driven movement is both done at the maximum framerate of the running copy of wesnoth (often in the ballpark of a 3d game; some 30-60 fps), and the code-driven movement is out-of-sync with the hand-drawn animation, seemingly giving us additional frames of animation (even if we don't have a new hand-drawn frame to display, the game will slide the current one around for the fraction of a second until we get to the next frame). A similar principle is used in a lot of cheap animated television shows, where a low frame-count animation of a character will be panned across an animated background to create the illusion of motion. Bad shows will use this to fill multiple seconds of animation. More enlightened shows will actually spend the effort to bring an animation up to a good 15-30 fps rate, and then will use the above trick to make an animation even smoother by providing additional "fake" inbetween frames. | ||
| − | == | + | == General Technique == |
| + | === Visualization === | ||
| + | Animation is difficult to do from scratch, without prior experience, because it's actually very hard for us to visualize how something is supposed to move. This is a common problem in art; the over-estimation of our ability to visualize things. It's deceptively hard - if I were to ask anyone if they can picture a simple action like "swinging a baseball bat" in their head, it'd be borderline insulting. Of course we can - anyone can! But when you get into the specifics of how each body part moves during part of the animation, our imagination gets surprisingly fuzzy. It glosses over the details. When you suddenly have to provide concrete depictions of something in an animation, you're quite likely to come to the surprising conclusion you don't ''really'' know what it looks like. | ||
| − | + | So how do you find out? The best way has always been to study the real thing. | |
| − | + | In order to get a feel for how the body reacts to doing certain movements, you may need to watch yourself in the mirror, or look at a movie. For subjects relevant to wesnoth, there are many examples of good, medieval action films which portray common actions like swinging swords, or riding a horse. YouTube is also an excellent source of footage of people performing common actions. | |
| − | + | One of the primary assets to an animator available today is the fact that video can be downloaded and viewed in a video program like MPlayer, VLC, or Quicktime - all of which have options for slow-motion replay. Real-life motion can be difficult to study because it moves faster than your eye and mind can track and comprehend. A digital video file can be slowed down to the point where every subtlety of motion can be seen, and understood. Likewise, points-of-interest can be played over and over again. This is priceless learning material many animators of yore (from the era before personal video equipment) would have given anything to have, and it's also dramatically more convenient than the VHS era, since they often didn't have footage of stuff on-hand - whereas you have a global video database that can be thoroughly searched, available at the touch of a button. Don't waste this resource; it's invaluable. | |
| − | |||
| − | + | === Exaggeration and Wind-Up/Anticipation === | |
| − | + | Traditional animation studios discovered several rules of thumb to liven up a strict representation of movement - that is, techniques that are probably correct to use even if you're not "drawing from life" and witnessing them firsthand. These were especially powerful in the first days of animation, because the drawings made were so simple, and left out a lot of the detail of the natural world - these are some of the first details to put back in. All of these are based vaguely on movement in the real world. If you exaggerate these too much, which you can certainly get away with, it will result in the animation looking cartoony, which is not necessarily a bad thing. These were developed in the first days of animation - in fact, fellows like Walt Disney pioneered them. | |
| − | |||
| − | |||
| − | + | When human beings prepare for a big move, such as swinging a baseball bat, or sword, they tend to give themselves some space to gain momentum. When a pitcher winds up for a throw, he curls back so that the ball will spend more time in his hand, thus spending more time accelerating, and thus have a higher speed. For Wesnoth images, this is a great technique to use on big swords and clubs. If a man is going to throw a punch, he reels back with the arm that is preparing to deliver it. If a cobra is going to strike, it first rears back its head. Think of what "Popeye the Sailor Man" does when he's about to clobber someone, and you have a perfect (albeit slightly exaggerated) example of this. Keep in mind though that you don't need to be afraid of over-exaggeration; we are hurt much more by under-exaggerating a motion, than we are by over-exaggeration, so always err on the side of over-exaggerating things like windups. | |
| − | When | ||
| − | === | + | === Inertia and Air Resistance === |
| − | |||
| − | |||
| − | + | Different things are affected by physics in different ways. When a person makes a motion, certain muscles drive the motion, and the rest of the body is pulled by this force acting on it. The most important thing is that different parts of the body will move at different speeds - this is related to my mantra of ''"move the whole body"'' - if you do it, things will look a ''lot'' more realistic. | |
| − | |||
| − | |||
| − | == | + | === Non-rigid Objects === |
| − | + | Most objects in the real world flex in extraordinary ways when they move. You don't consciously notice these, and you'd normally never guess that they took place, but they look right when animated because you do subconsciously see them in the real world. For a dramatic example, if you look at a slow-motion recording of baseball being hit by a bat, the baseball gets flattened like a pancake! This happens only for the tiniest moment, after which it oscillates back and forth (like a spring) returning to it's normal shape. In Wesnoth animation, using such a thing only for a single frame can make for a much livelier animation. Consider our thief's idle animation, and how the tossed money bag deforms as it lands in the hand. | |
| − | + | === Follow Through === | |
| − | + | Often taught to beginning boxers, a strike given with enough force to damage will often be targeted not at the surface of the opponent, but deep inside and even behind him. This is also related to many situations in which the person performing an action doesn't care where the moving object stops - a baseball player is not concerned with where the bat stops in his swing, rather he just wants to hit the ball as hard as he can, which is why the bat will often swing a full half-circle beyond home plate. In animating Wesnoth images, this is why it looks better if really strong sword strokes go ''clean through'' the point where the opponent is standing. As an example, this is why the Elvish Hero's attack looks stronger than that of the Elvish Fighter. | |
| − | + | === Cycling/Looping === | |
| − | + | In the real world, points of view do not remain fixed like they do in animations or videogames, but certain motions often get repeated, sometimes almost identically. One of the first tricks that animators used was to make animations of people doing something like walking. Instead of imitating the real world, wherein each step taken is subtly different from the next, as the mind carefully coordinates changing balance and the uneven conditions of the ground "plane", the animators simply drew a single step of the person walking, and lined up the images so that the final frame lined up with the first frame. Though one could not change the point of view on the subject, the animation could be looped indefinitely, and would look convincingly like viewing a person walking from a specific angle. For our purposes, this can be used to link together any repeating animations (such as walking animations). | |
| − | |||
| − | == | + | == Common mistakes == |
| − | + | All of these mistakes are ''absolutely unacceptable'' in an official in-game image. Some are very easy to correct, such as alignment, others, such as redrawing hidden surfaces, can make an animation much harder to do, but this is the price you ''must'' pay to make something look right. They're the laws of the real world, and fortunately, no one can use "style" as a cop-out for not following them - if you ignore these, your animation will look terrible, and we won't accept it into the game. | |
| − | + | ||
| − | + | As a general principle, '''whenever you are tempted to use a shortcut to finish something, don't.''' It will look bad, and in the long run, it won't save any time, because if we end up using the animation, someone will have to pay the time to correct it. We will not use broken, half-hearted attempts at animations. | |
| − | + | ||
| − | + | === Moving only the active element === | |
| − | + | One trap is to think: "Hey, I'm animating a man swinging a sword. That means all I have to do is move the sword arm up and down." It seems logical, but if you try it, as you can see in an example below, it will look very strange - possibly "robotic". The reason is that human bodies ''can't'' move like this - it breaks several natural laws that result from how we're built. | |
| − | + | ||
| − | + | Even the most subtle human motions will result in adjustments of the entire body, both for balance, and simply because the moving parts are pulling on the rest of the body. Every part of the human body is connected to the rest of the body, and a motion in any part of the body will affect the entire body (just like a soccer ball caught in a net deforms the entire net). When you animate, you need to imitate this; each part of the body moves proportionally to its weight; moving fingers around won't cause a torso to shift, but swinging an entire arm, and a weapon in it, will pull on the entire body, and this needs to be drawn if an animation is to look natural. | |
| − | http://www.wesnoth.org/ | + | |
| − | + | Balance needs to be taken into account when animating. If you know what you're doing, you can deliberately make a unit look like they're off balance in the specific frames when they should be. For example, a fencer might look like he's falling forwards during the "lunge" of his attack, and falling backwards during the recovery. This will look right because it's exactly what a real person does; a real fencer would use "being off balance" to accelerate their movements. Running, too, is always off-balance; when anyone runs, they're always leaning way forward (the only thing pulling them forward is their feet, and if their feet were ever in front of them, they'd fall over backwards; thus they always lean forwards far enough to keep their body from doing so). | |
| − | + | ||
| − | + | Failing to move anything but the 'active element' breaks balance, and breaks kinematics. This first image is how bad things look if you just move the arm around, the second image is how good it looks if you make the entire body shift in reaction to the arm swinging a weapon: | |
| − | + | ||
| − | http://www.wesnoth.org/ | + | * '''Wrong:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/asheviere-no-kinematics.gif |
| − | + | ||
| − | + | * '''Right:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/myrmidon-good-kinematics.gif | |
| − | + | ||
| − | + | === Hidden surfaces must be redrawn === | |
| + | |||
| + | When an object turns, in an animation, and shows a side that wasn't visible before, it ''must'' be drawn from scratch. If a man has his back to you, and turns around, his now-visible face will look a whole heck of a lot different from the back of his head, which was visible before. It's obvious that things look different when they're turned around, but this is a really common mistake, because people are afraid of having to draw parts from scratch. It's really hard, and people like to think that there's some shortcut they can use to get away with not actually having to draw something from scratch. (For a lot of beginners, including myself back in the early days when most of my work involved editing existing material, the idea of having to redraw things from scratch seemed impossible.) However, this is something you'll have to get used to and overcome. The bright side of this, though, is that redrawing the few newly visible parts is a great source of practice, and is much easier than drawing a whole sprite from scratch; it's a good way to build up to being able to create entirely new sprites from scratch. | ||
| + | |||
| + | A common shortcut, which is selecting body parts in your graphics program, and sliding/moving them around (referred to as "Select and Slide") can only be used for the tiniest motions, or motions in which there is NO rotation. As soon as you're rotating a sprite around the y-axis, things need to be redrawn. | ||
| + | |||
| + | === Turned surfaces must be redrawn === | ||
| + | |||
| + | After about a 30-45 degree turn of any part of a sprite, the surface of that part has to be redrawn to account for the rotation. If a man is facing you, and turns sideways, his appearance will change considerably - for one thing, there will only be one eye visible where there were two visible before. When this happens, you have to draw it all from scratch. Yes, it's difficult, but it's par for the course. Like I said above, "select and slide" will fail you, here. | ||
| + | |||
| + | You can see this applied to the following bad example. A horse is supposed to be falling down, but because the animator was so terrified of having to actually draw the turned-body of the horse from scratch, the horses body never falls over, and instead deflates like a balloon in the same pose it started out in. | ||
| + | |||
| + | * '''Wrong:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/elvish-rider-deflate.gif | ||
| + | |||
| + | === Misaligned Frames === | ||
| + | Each image in a series must line up correctly with the image before it. If they don't, the image shakes around inside the animation, which looks really bad: | ||
| + | |||
| + | * '''Wrong:''' http://www.wesnoth.org/wiki-images/tutorial/basic-animation/shaman-uncentered.gif | ||
== See Also == | == See Also == | ||
| + | * [[From Base Frame To Full Animation]] | ||
* [[Art Tutorials]] | * [[Art Tutorials]] | ||
* [[Create Art]] | * [[Create Art]] | ||
Latest revision as of 06:18, 6 September 2012
by Jetrel
Introduction
Animation works by fooling the mind into thinking that a series of still images are one continuously moving object. This works based on the neurochemical principles of the human eye - specifically a phenomenon called "persistence of vision". Human retina cells do not immediately turn off after being activated by light; instead they gradually "cool down" and they keep sending the signal that they see light, in gradually decreasing amounts, during this period. The cooldown is measured in seconds, and for at least 1/30 of a second, the cells have cooled down so little that the change in what you see is imperceptible.
The trick to making a convincing animation is to swap still images faster than a retinal cell's cooldown, which tends to be about 10-30fps. Anything less than 10fps does not register in the mind as an animation, and looks more like a rapid slideshow. Anything more than 30fps tends to rapidly diminishing returns on "smoothness". This is precisely why videogamers tend to demand at least 30fps of rendering in their games (by buying strong enough machines to achieve that) - anything less feels very jerky and frustrating to watch.
One computer-specific factor is that game animations tend to not merely be played in a fixed spot on the screen, but tend to slide around as the character is moving - for example, if a character is running or jumping. Persistence of vision applies not just to frame-count of a given animation, but also to distance travelled per frame - if it moves too quickly relative to the framerate, it will look like it is disappearing from one location, and suddenly appearing in another. The general solution to this is motion blur, which mimics the real-life blurring of objects (think of fan blades) as they move quickly. The best way to do this, especially in a 3d engine, is just having the code blur anything which moves over a certain speed, but this is not supported by wesnoth's engine - instead, we hand-animate motion blurs of anything which moves at a sufficiently high speed - for us, this is exclusive to weapons being swung.
Wesnoth is able to get away with a low FPS on its animations because we can programmatically create motion, some of the time. When a unit attacks, the code slides the attack image around. This allows us to use single images where we would be better served by multiple images. We can only get away with this in certain situations, however, and part of this is because the code-driven movement is both done at the maximum framerate of the running copy of wesnoth (often in the ballpark of a 3d game; some 30-60 fps), and the code-driven movement is out-of-sync with the hand-drawn animation, seemingly giving us additional frames of animation (even if we don't have a new hand-drawn frame to display, the game will slide the current one around for the fraction of a second until we get to the next frame). A similar principle is used in a lot of cheap animated television shows, where a low frame-count animation of a character will be panned across an animated background to create the illusion of motion. Bad shows will use this to fill multiple seconds of animation. More enlightened shows will actually spend the effort to bring an animation up to a good 15-30 fps rate, and then will use the above trick to make an animation even smoother by providing additional "fake" inbetween frames.
General Technique
Visualization
Animation is difficult to do from scratch, without prior experience, because it's actually very hard for us to visualize how something is supposed to move. This is a common problem in art; the over-estimation of our ability to visualize things. It's deceptively hard - if I were to ask anyone if they can picture a simple action like "swinging a baseball bat" in their head, it'd be borderline insulting. Of course we can - anyone can! But when you get into the specifics of how each body part moves during part of the animation, our imagination gets surprisingly fuzzy. It glosses over the details. When you suddenly have to provide concrete depictions of something in an animation, you're quite likely to come to the surprising conclusion you don't really know what it looks like.
So how do you find out? The best way has always been to study the real thing.
In order to get a feel for how the body reacts to doing certain movements, you may need to watch yourself in the mirror, or look at a movie. For subjects relevant to wesnoth, there are many examples of good, medieval action films which portray common actions like swinging swords, or riding a horse. YouTube is also an excellent source of footage of people performing common actions.
One of the primary assets to an animator available today is the fact that video can be downloaded and viewed in a video program like MPlayer, VLC, or Quicktime - all of which have options for slow-motion replay. Real-life motion can be difficult to study because it moves faster than your eye and mind can track and comprehend. A digital video file can be slowed down to the point where every subtlety of motion can be seen, and understood. Likewise, points-of-interest can be played over and over again. This is priceless learning material many animators of yore (from the era before personal video equipment) would have given anything to have, and it's also dramatically more convenient than the VHS era, since they often didn't have footage of stuff on-hand - whereas you have a global video database that can be thoroughly searched, available at the touch of a button. Don't waste this resource; it's invaluable.
Exaggeration and Wind-Up/Anticipation
Traditional animation studios discovered several rules of thumb to liven up a strict representation of movement - that is, techniques that are probably correct to use even if you're not "drawing from life" and witnessing them firsthand. These were especially powerful in the first days of animation, because the drawings made were so simple, and left out a lot of the detail of the natural world - these are some of the first details to put back in. All of these are based vaguely on movement in the real world. If you exaggerate these too much, which you can certainly get away with, it will result in the animation looking cartoony, which is not necessarily a bad thing. These were developed in the first days of animation - in fact, fellows like Walt Disney pioneered them.
When human beings prepare for a big move, such as swinging a baseball bat, or sword, they tend to give themselves some space to gain momentum. When a pitcher winds up for a throw, he curls back so that the ball will spend more time in his hand, thus spending more time accelerating, and thus have a higher speed. For Wesnoth images, this is a great technique to use on big swords and clubs. If a man is going to throw a punch, he reels back with the arm that is preparing to deliver it. If a cobra is going to strike, it first rears back its head. Think of what "Popeye the Sailor Man" does when he's about to clobber someone, and you have a perfect (albeit slightly exaggerated) example of this. Keep in mind though that you don't need to be afraid of over-exaggeration; we are hurt much more by under-exaggerating a motion, than we are by over-exaggeration, so always err on the side of over-exaggerating things like windups.
Inertia and Air Resistance
Different things are affected by physics in different ways. When a person makes a motion, certain muscles drive the motion, and the rest of the body is pulled by this force acting on it. The most important thing is that different parts of the body will move at different speeds - this is related to my mantra of "move the whole body" - if you do it, things will look a lot more realistic.
Non-rigid Objects
Most objects in the real world flex in extraordinary ways when they move. You don't consciously notice these, and you'd normally never guess that they took place, but they look right when animated because you do subconsciously see them in the real world. For a dramatic example, if you look at a slow-motion recording of baseball being hit by a bat, the baseball gets flattened like a pancake! This happens only for the tiniest moment, after which it oscillates back and forth (like a spring) returning to it's normal shape. In Wesnoth animation, using such a thing only for a single frame can make for a much livelier animation. Consider our thief's idle animation, and how the tossed money bag deforms as it lands in the hand.
Follow Through
Often taught to beginning boxers, a strike given with enough force to damage will often be targeted not at the surface of the opponent, but deep inside and even behind him. This is also related to many situations in which the person performing an action doesn't care where the moving object stops - a baseball player is not concerned with where the bat stops in his swing, rather he just wants to hit the ball as hard as he can, which is why the bat will often swing a full half-circle beyond home plate. In animating Wesnoth images, this is why it looks better if really strong sword strokes go clean through the point where the opponent is standing. As an example, this is why the Elvish Hero's attack looks stronger than that of the Elvish Fighter.
Cycling/Looping
In the real world, points of view do not remain fixed like they do in animations or videogames, but certain motions often get repeated, sometimes almost identically. One of the first tricks that animators used was to make animations of people doing something like walking. Instead of imitating the real world, wherein each step taken is subtly different from the next, as the mind carefully coordinates changing balance and the uneven conditions of the ground "plane", the animators simply drew a single step of the person walking, and lined up the images so that the final frame lined up with the first frame. Though one could not change the point of view on the subject, the animation could be looped indefinitely, and would look convincingly like viewing a person walking from a specific angle. For our purposes, this can be used to link together any repeating animations (such as walking animations).
Common mistakes
All of these mistakes are absolutely unacceptable in an official in-game image. Some are very easy to correct, such as alignment, others, such as redrawing hidden surfaces, can make an animation much harder to do, but this is the price you must pay to make something look right. They're the laws of the real world, and fortunately, no one can use "style" as a cop-out for not following them - if you ignore these, your animation will look terrible, and we won't accept it into the game.
As a general principle, whenever you are tempted to use a shortcut to finish something, don't. It will look bad, and in the long run, it won't save any time, because if we end up using the animation, someone will have to pay the time to correct it. We will not use broken, half-hearted attempts at animations.
Moving only the active element
One trap is to think: "Hey, I'm animating a man swinging a sword. That means all I have to do is move the sword arm up and down." It seems logical, but if you try it, as you can see in an example below, it will look very strange - possibly "robotic". The reason is that human bodies can't move like this - it breaks several natural laws that result from how we're built.
Even the most subtle human motions will result in adjustments of the entire body, both for balance, and simply because the moving parts are pulling on the rest of the body. Every part of the human body is connected to the rest of the body, and a motion in any part of the body will affect the entire body (just like a soccer ball caught in a net deforms the entire net). When you animate, you need to imitate this; each part of the body moves proportionally to its weight; moving fingers around won't cause a torso to shift, but swinging an entire arm, and a weapon in it, will pull on the entire body, and this needs to be drawn if an animation is to look natural.
Balance needs to be taken into account when animating. If you know what you're doing, you can deliberately make a unit look like they're off balance in the specific frames when they should be. For example, a fencer might look like he's falling forwards during the "lunge" of his attack, and falling backwards during the recovery. This will look right because it's exactly what a real person does; a real fencer would use "being off balance" to accelerate their movements. Running, too, is always off-balance; when anyone runs, they're always leaning way forward (the only thing pulling them forward is their feet, and if their feet were ever in front of them, they'd fall over backwards; thus they always lean forwards far enough to keep their body from doing so).
Failing to move anything but the 'active element' breaks balance, and breaks kinematics. This first image is how bad things look if you just move the arm around, the second image is how good it looks if you make the entire body shift in reaction to the arm swinging a weapon:
- Wrong:
- Right:
Hidden surfaces must be redrawn
When an object turns, in an animation, and shows a side that wasn't visible before, it must be drawn from scratch. If a man has his back to you, and turns around, his now-visible face will look a whole heck of a lot different from the back of his head, which was visible before. It's obvious that things look different when they're turned around, but this is a really common mistake, because people are afraid of having to draw parts from scratch. It's really hard, and people like to think that there's some shortcut they can use to get away with not actually having to draw something from scratch. (For a lot of beginners, including myself back in the early days when most of my work involved editing existing material, the idea of having to redraw things from scratch seemed impossible.) However, this is something you'll have to get used to and overcome. The bright side of this, though, is that redrawing the few newly visible parts is a great source of practice, and is much easier than drawing a whole sprite from scratch; it's a good way to build up to being able to create entirely new sprites from scratch.
A common shortcut, which is selecting body parts in your graphics program, and sliding/moving them around (referred to as "Select and Slide") can only be used for the tiniest motions, or motions in which there is NO rotation. As soon as you're rotating a sprite around the y-axis, things need to be redrawn.
Turned surfaces must be redrawn
After about a 30-45 degree turn of any part of a sprite, the surface of that part has to be redrawn to account for the rotation. If a man is facing you, and turns sideways, his appearance will change considerably - for one thing, there will only be one eye visible where there were two visible before. When this happens, you have to draw it all from scratch. Yes, it's difficult, but it's par for the course. Like I said above, "select and slide" will fail you, here.
You can see this applied to the following bad example. A horse is supposed to be falling down, but because the animator was so terrified of having to actually draw the turned-body of the horse from scratch, the horses body never falls over, and instead deflates like a balloon in the same pose it started out in.
- Wrong:
Misaligned Frames
Each image in a series must line up correctly with the image before it. If they don't, the image shakes around inside the animation, which looks really bad:
- Wrong:
