Search Tutorials
Easing, bouncing and other transitionsNow you're probably wondering why we bother to use both a time and a distance variable. Well, let's start by looking at the relationship between time (horizontal axis) and dist (vertical axis) graphically:
As you see, the relationship between time and distance is linear. The slope on this graph corresponds to the speed of the animation. In this case the speed is constant. Now if we want for example to start out fast and end at a null speed, we just have to find a function which has a high slope at t=0 and a null slope at t=1. This could be an upside down parabola or the portion of a sine from 0 to pi/2. By using different functions, we can create different relationships between time and distance and get interesting effects, like easing in and out, bouncing, and more esoteric transitions.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|