Easing is a term for modifying an animation so that the rate of change is not uniform. In other words, it's a way to introduce acceleration or deceleration into your animation. A simple easing might start out slow and accelerate to the end. A more elaborate easing might stimulate the rate of a bouncing ball: fast, then slow to a stop, and speed up again, and repeat in a diminishing fashion. For this demonstration, I am going to use Expression Blend and a project called Animation Easings. My main UI in this application consists of a Start button and several ellipses.
What I want to do is move these ellipses down the screen and simulate different easing functions. To do that, of course I need a Storyboard. Click on this Plus symbol on my Objects and Timeline to create a new storyboard, and I will call this one EasingStoryboard. You see the red recording border show up. I am going to add a keyframe by clicking here. First, I need to select my items so I will select my ellipses. Then I will click on the Record Keyframe at the 0 timeline, move to the 2- second mark. Then I will apply a Translate Transform to move these down the screen.
I will do that by going to my Property pane, scrolling down to the Transform section, and changing the Translate Transform Y value. I will change that to 200 pixels. And then I am going to stop recording and run the animation. So they all move at a uniform speed. The next thing I am going to do is start changing the easings.
I will select a keyframe. Notice the keyframes over here and notice the red dots on my ellipses? That signifies that there is an animation on at least one dependency property on that type. So if I choose the GreenEllipse and open this expander, you will see that I am animating a RenderTransform on the TranslateY. Now, when I click on the TranslateY here, you will notice on the right-hand side of the screen, I end up with a new UI. I have an easing section over here.
Let's look at that again. If I select the Ellipse, I get properties for the ellipse. If I select the TranslateY Transfrom, then I get the Easing property. I am going to start by looking at the KeySpline, and it's telling me that I needed to have selected the last keyframe. That makes sense. I will go over here and choose just this last keyframe right here, and now you see how that UI changed over there on the right? This allows me to dial my own custom speed into the animation. You grab this yellow dot and you move it around and choose the speed.
Let's see what this one looks like. Let's run the animation. So it starts fast on this curve and then slows down as it gets near the end. What do you think will happen if I edit my curve like this? I'll run the animation. Fast at the beginning, fast at the end, and slow in the middle. You can have hours of fun playing with this curve. There is also some pre-built easings available.
For this example, I will use the PurpleEllipse, choose the last keyframe for the PurpleEllipse, and I'll move to my EasingFunction and look at this dropdown. Here are the different mathematical easing formulas that Microsoft has included. I will start by looking at this one called Back. Now, let's run the animation. This is on the PurpleEllipse now, remember? So that goes the opposite direction to start the animation and then changes its direction and goes back. If I do a back out, then I am going to run the animation. It goes further than it's supposed to and then comes back in.
And if I choose this one, the InOut Back function, it will go both directions: out and then in. You can have endless hours of fun playing with this. I will work with the orange one next. It says orange here where it says yellow over here. I will work with the OrangeEllipse. Let's look at a Bounce. Now, I am going to make this look like a ball, so I will use the Bounce Out. That looks natural. I can control the number of bounces with this number, and I can control the bounciness of the ball with this number.
This one is going to get crazy. You can also create your own custom easings. If you notice in my project, I have this class called FractalEasing.cs. This is a .NET type that derives from EasingFunctionBase, and then what happens is I override a function called EaseInCore, and then I return a number based on the normalizedTime. So as the animation is progressing, I provide the animation curve here. This is real simple one. Let me show you how we work with this. Go back to my MainPage. I will choose my BlueEllipse.
I'll compile my application, Ctrl+Shift+B. And then at the bottom of the list is my CustomEasing function. Click on it and run the app. It kind of just goes off the screen. It's like a helium balloon or a rocket liftoff. Let's watch that again. Watch the BlueEllispe. And it's gone. I love the new Easing functions in Silverlight. They really bring a snap to your animation, and Expression Blend makes them easy to add to your timeline.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 98509 Viewers
61 Video lessons · 85804 Viewers
71 Video lessons · 69708 Viewers
56 Video lessons · 102013 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Your file was successfully uploaded.