Welcome back to Coding Math! I haven’t put
out any episodes in a few months due to other
commitments. Actually, one of the biggest
commitments I had was creating a full video-based
course on basic JavaScript for another company.
This was a direct result of this whole series,
I’m happy to say. The course, called Foundations
of JavaScript, will be over at Aquent Gymnasium.
It will be free and open to anyone who wants
to sign up for it. I’ll have more info on
it when it actually goes live. There are already
several other free courses there that you
may find interesting.
Anyway, I’ve received lots of comments,
emails and tweets in the recent months, asking
when I’d be back, and the channel is still
getting new subscribers, positive comments,
and even new donations at Patreon.com. So
I’m very happy to report that I’m now
back in business.
So, this is Episode 27. In episodes 22 through
26, I was covering some basic 3D concepts.
I’m not done there, but I think I’m going
to go off in some different directions for
a few episodes until I get my footing back
here.
Today I want to cover the basics of easing
and tweening. I’ll probably break this up
into a few different videos, covering the
concepts and some simple easing in this video,
then some more complex examples and finally
into full on tweening.
The terms easing and tweening both have to
do with the idea of moving an object from
a given position to another, known position.
These are related concepts and the words are
often used interchangeably, although technically
easing is one aspect of tweening. More on
that later. In summary, though, tweening means
that something is currently sitting in this
spot here, and I want to move it over to this
spot, right here.
Now, realize that this is a lot different
than what we were doing earlier with various
physics concepts such as velocity, acceleration
and friction. In those examples, we had an
object at a given position and we set it moving
at a certain rate and direction and with various
forces, and just let it go. With friction,
it would eventually probably stop, but in
general, we would have no idea exactly WHERE
it would wind up beforehand.
With easing or tweening, we know EXACTLY where
we want the object to end up, and we obviously
know where it is, we just need to know how
to make it move there smoothly. As you might
imagine, the physics formulas are far more
useful in things like games or other simulations,
but easing and tweening have their place mainly
in user interfaces, where you might want to
slide a particular element into place, and
slide another one out.
Before I go much further, note that although
I’m going to probably continue to talk in
terms of position, easing and tweening can
be applied to any numeric property of an object.
You can tween the rotation, the size or scale,
or the opacity or alpha of a visual object
for example. You could tween between different
colors, as colors are really just numbers.
You could tween the corner radius of a rectangle,
so it animated from very square corners to
round ones. You could tween the volume of
a sound from low to high or high to low for
a fade in or out or even a pan from left to
right.
It’s really all about changing values from
one known value to another known value, usually
over a known time or a specific rate.
Now, where do we get this word “tween”?
Well, I’m sure a lot of you already know
this, but you’re going to hear me say it
anyway. This goes back to the early days of
animation, when everything was drawn by hand.
Animations would run at speeds of up to 30
frames per second, and every one of those
characters in the movies would have to be
individually drawn, up to 30 individual times
for every single second of the animation.
Of course, lot of tricks were used. If the
character was standing still and talking,
maybe only his head and hands might need to
be animated, but it was still a TON of drawing.
So the very best animators, i.e. the most
highly paid ones, would do the most important
frames of the animations. The hand is over
here in this spot and in another frame the
hand is over here in this spot. These came
to be known as key frames. Then other, lower
paid, animators could come in and do the all
the frames in between those two. These were
the in-between frames or tweens.
The term was popularized well beyond the film
industry by the Flash authoring tool, which
gave you a timeline, let you draw or position
objects on key frames, and would automatically
fill in the tweens.
As Flash became more of a programming tool,
with its own language, ActionScript, and outgrew
the authoring tool it originated with, people
wanted to do tweens by code alone, and various
libraries sprung up, called tweening libraries.
Now a while back, I covered the subject of
Linear Interpolation in one of the Coding
Math minis. Here’s a link. In that, I did
a demo of just this kind of thing. Took an
object with a starting point and an ending
point, and a value called “t” that went
from 0 to 1 and used that to interpolate smoothly
between the starting and ending points. And
I did it not only with position, but scale
and alpha as well.
That right there, is tweening. Done. See you
next week.
No, wait, there’s more. That’s tweening,
but in its barest state. That would be linear
tweening because the values linearly increase
or decrease from the starting value to the
ending value. It’s cool enough, but for
most motion it just doesn’t look right.
I want to say it looks mechanical, but it’s
even beyond mechanical, it’s completely
artificial. Because even machines don’t
move like that.
So what’s the difference between linear
tweening and real life motion? Well, imagine
that you jump in your car, start it up and
start driving to work. Do you instantly go
from standing still to moving at 30 miles
per hour? And when you get to the office,
do you drive up to it doing 30 still, and
then stop on a dime? If you tried either one
of these things, the only thing you’d really
accomplish for sure is leaving a good percentage
of the rubber from your tires smeared on the
road.
In reality, you’d start at zero, and slowly
increase your speed to 5, 10, 20 miles per
hour, eventually making it up to 30. Assuming
no traffic lights, stop signs or traffic,
you’d continue on at that speed till you
got near the office and then slow down to
25, 15, 10, 5 and finally stop, hopefully
in a parking space within a reasonable distance
of the front door.
Anything that moves and stops goes through
this same process of starting, accelerating,
moving, decelerating and stopping. A bullet
coming out of a gun accelerates so rapidly
that it seems like it’s instantly going
top speed, but it takes some time. A car hitting
a solid wall decelerates rapidly too, though
it seems like it stops instantly. Those are
extremes. In most other examples, you can
see the speeding up and slowing down more
clearly.
So, if we want to create more realistic tweens,
we need to EASE IN to that motion when we
start, and EASE OUT of it when we are going
to come to a stop. Aha! Now we know what easing
is.
Easing is another word that got its usage
boosted through the Flash authoring tool.
In Flash, when you created a tween on the
timeline, you could adjust how much it eases
in or eases out, as you can see here. You
can see the difference that this makes in
the tween. It either starts out slowly and
moves up to full speed, or starts out at full
speed and slows down as it hits the final
frame. Unfortunately, you couldn’t do both
with older Flash tweens.
This easing became a big part of the ActionScript
tween libraries that began to pop up, particularly
aided by a series of equations released by
Robert Penner, which you’ll still see all
over the place, such as CoreAnimation in iOS
and ObjectAnimator in Java for Android and
jQuery for the web, as well as many others.
We’ll dive more into those easing formulas
in a future video, but for the rest of this
episode, I want to take a quick look into
what I’ve always called “simple easing”
and Robert calls “Standard Exponential Slide”
in his book. This technique is drop dead easy
to implement on any property you want and
gives really great results. Personally, I
almost always use this as a first attempt
whenever I need to ease some object into place,
and it most often works just fine and I can
make due without any kind of more advanced
tweening library.
The concept comes from the Greek Philosopher
Zeno who was really into paradoxes. This particular
paradox states that before you can arrive
at a destination, you need to travel from
where you are, to a half way point. Then,
when you are at the half way point, you will
need to travel from that point, to the point
half way between there and the destination,
then, half way from there, and so on. Since
no matter how close you get, you can theoretically
always break the remaining distance down to
give you another halfway point, you can never
reach your destination. It’s a paradox,
because people and things do get places after
all.
But paradox or not, you should notice that
each successive step is smaller and smaller.
If we considered this image as the graph of
a coded animation, and each step was one frame
of that animation, you can see that the object
would be moving slower and slower and eventually
reaching this target point here.
So, for crying out loud, let’s write some
code already!
We’ll start with the basic animation template.
I’ll add a target object. This will just
be a point over on the right side of the canvas.
Then I’ll add a position point over here
on the left side of the canvas.
Now remember we’re going to be travelling
half the distance from our current location
to the target on each frame, so I’ll make
a variable called ease and set that to 0.5
to represent that “halfness”.
In the update function, let’s first just
draw an arc at the x y point defined by position.
Then I’ll get the distance from the object
to the target. We’ll jump right into two
dimensions here, so I’ll get dx for the
x distance and dy for the y distance.
Once I have the distances, I can make a velocity
for each axis on this frame by multiplying
the distance by that ease variable. So we
have vx = dx * ease and vy = dy * ease.
Then I can simply add that velocity to the
position to update the position for the next
frame. Let’s see what this looks like.
I’ll refresh the page a few times. You can
see that the circle instantly jumps half way
across the screen, then to the ¾ point, then
7/8, and so on. It stops right on that righthand
edge, but it’s still moving way to fast
to be a decent ease. Well, let’s try changing
that ease value down to something like 0.1.
Well, that’s a lot better. Now you can see
the circle just kind of sliding into position.
Try setting ease even smaller, like 0.01.
Now it eases in really slowly and you begin
to feel maybe Zeno was right about it being
impossible to arrive anywhere.
But let’s set that back to 0.1 and try to
make this a bit more dynamic.
I’ll add an event listener for the click
event, and when that happens, I’ll set the
target x and y to the location of the click.
Run that in the browser.
Now, each time I click on the screen, the
circle starts easing towards exactly where
I clicked.
Just for fun, let’s change that click event
into a mousemove event. Now we have an object
that follows the mouse around. There’s more
we can do with this, and more we need to cover
on this subject, but I think that’s enough
for a comeback episode. See you next week.
