HTML and CSS Reference
In-Depth Information
Your motion is proportional to that distance—the bigger the distance, the more the motion.
The difference between easing and springing is in what aspect of the motion is proportional. In easing, the
speed
is proportional to the distance; the further away from the target, the faster the object moves. As it
gets very close to the object, it's hardly moving at all.
In springing,
acceleration
is proportional to the distance. If the object is far away from the target, a lot of
acceleration is applied, increasing the velocity quickly. As the object gets closer to its target, less
acceleration is applied, but it's still accelerating! It flies right past the target, and then acceleration pulls it
back. Eventually, friction causes it to settle down.
Let's examine each technique separately, starting with easing.
Easing
There is more than one type of easing; you can “ease in” to a position, and “ease out” from a position.
Also, easing can have different motion characteristics, for example, a sine wave, bouncing, elasticity, and
many more. The type of easing we'll primarily discuss here is “ease out”, and a bit later in this chapter, in
the “Advanced easing” section, you'll see where you can go to find out about other kinds of easing.
Simple easing
To understand simple easing, imagine you have an object over here and you want to move it over there.
Since you're creating the ”illusion of motion,” you want to move it there gradually, over several frames. You
could simply find the angle between the two, set a speed, use some trigonometry to work out the
vx
and
vy
, and set it in motion. Then you could check the distance to the target on each frame (using the
Pythagorean Theorem, as described in Chapter 3), and when it arrives there, stop it. That approach might
work in some situations, but if you're trying to make something look like it's moving naturally, it won't do.
The problem is that your object would move along at a fixed velocity, reach its target, and stop dead. If
you're talking about some object moving along and hitting a brick wall, yes, it might be sort of like that. But
when you're moving an object to a
target,
this generally implies that you know where this target is, and are
deliberately moving the object into place there. In such a case, the motion will start out fairly fast, and then
slow down as it gets closer to the target. In other words, its velocity is going to be proportional to the
distance to the target.
Let's take an example: You're driving home. When you are a few miles away, you're moving at the speed
limit. When you pull off the highway and into your neighborhood, you're moving a bit slower. Once you're
on your own street, a block or two away, you'll move much slower. As you approach your driveway, you're
down to a few miles per hour. When you reach the last few feet of the driveway, you're moving a lot slower
than when you pulled into the driveway. And inches before you stop, you're moving at a fraction of that
speed.
If you take the time to look, you'll see this behavior manifests itself even in small things like closing a
drawer or door. You start out fast and gradually slow down. The next time you go to close a door, make an
effort to follow through with the same speed you started with; just be prepared to explain to anyone nearby
why you're slamming doors. When you use easing to move an object into position, it automatically takes
