Speed methods allow you to adjust the timing of animations
For this example we will use a graph to display the animations curvature
The X axis represents the animation duration
For our example the duration will be 4 seconds
The Y axis represents the percentage of animation completion from 0 to 100
Let's start with the constant curve
As we go from zero seconds to one second
The object animates 25% of the full distance
From one second to two seconds
Another 25 percent is completed
This pattern repeats for all four seconds
Our object is shown to animate at the same rate over time, this is the constant curve
Next is the decelerate curve
As we go from zero seconds to one second
The object animates 40% of the full distance
From one second to two seconds
The object animates 30% of the full distance
From two seconds to three seconds
The object animates 20% of the full distance
And from three seconds to four seconds
The object animates 10% of the full distance
Our object is shown to animate at a slower rate over time, thus creating a decelerating animation.
The ease out animation is almost identical to decelerate
Except it starts a little slower
Next is the accelerate curve
As we go from zero seconds to one second
The object animates 5% of the full distance
From one second to two seconds
The object animates 20% of the full distance
From two seconds to three seconds
The object animates 30% of the full distance
And from three seconds to four seconds
The object animates 45% of the full distance
Our object is shown to animate at a faster rate over time, thus creating an accelerating animation.
The ease in animation is almost identical to accelerate
Except it starts a little faster
Lastly there is the ease both curve
As we go from zero seconds to one second
The object animates 15% of the full distance
From one second to two seconds
The object animates 35% of the full distance
From two seconds to three seconds
The object animates 35% of the full distance
And from three seconds to four seconds
The object animates 15% of the full distance
Our object accelerates until the halfway point, and then decelerates in the second half of the animation, thus creating an easy-ease animation.