Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you have created an animation, you might need to exert some control over the animation lifetime. The Storyboard class exposes useful methods like Begin, Pause, and Stop. For this demonstration, I'm using Expression Blend and I've opened a project called Controlling Animations. I'm going to start by looking in a BasicControllingAnimation.xaml file. This first screen shows two ellipses that I would like to move across the screen when I click on the Start button: Pause and Resume. Let me show you my storyboard that I have first.
I have the storyboard called MoveStoryboard. I can see what this will do when I click on the Play button. It's going to move these items from left to right and then stop. To control the storyboard, I go to the containing storyboard--in this case called MoveStoryboard-- and I call its Begin method. Let me show you that code. In the Expression Blend, you can look at code. It has a code editor. To see the code, you can go to your projects view, find your CS file, and then double-click on that CS file.
So when you click the Start button, I'm going to call MoveStoryboard.Begin. It's really just that simple. And to pause the storyboard, I call Pause, and yes, to resume the storyboard, I call Resume. It's really that simple. To see the animation in action, I need to change the startup. This is a little more difficult to do in Expression Blend. I need to go to App.xaml > App.xaml.cs, find this section where it says call SiteHeaderFinished, and instead, instantiate my BasicControllingAnimation page, and then press F5.
I'll click on the Start button and they're running. Click on Pause and they stop. Click on Resume and they continue going. So far, so good. Let's look at the next animation. I'll stop the storyboard. And there is a bug in this version of Expression Blend. I'll see if I'll trigger it. I'm going to click on this tab. Yes, I triggered the bug. It happens to do with the tab control and animations which storyboard I have open.
The way to solve this is to close this window and then restart basic controlling animations. Select this second tab. I'll zoom out by using my mouse wheel and use the Hand tool to center things. The second animation I want to look at is the GreenStoryboard. This moves the green ball over till just until it touches the purple ellipse. Then I have a purple animation that runs from that point. Now I could have done this two ways.
I could have created a single storyboard and I could have put two animations inside the storyboard. Or in my case, I've created two separate storyboards because I want to show you that when a storyboard ends, you can use it to do some other action. Let's look at the code behind. Again, we'll go over here to BasicControllingAnimation.xaml.cs and double-click. What happens when you click on the button? I begin the GreenStoryboard, and then I register an EventHandler that says when the storyboard is completed, you're going to fire your event. I want you to call my EventHandler down here, Green Storyboard_Completed.
In GreenStoryboard_Completed, I call PurpleStoryboard.Begin. While I'm in my code, I'll also show you that I have a Stop on the reset button, and I also want to show you that you can control the speed of your animations. There's a SpeedRatio property on the storyboard, and you can make this a multiple of the current speed. So I can speed it up by multiplying it by 2. I could slow it down by multiplying it by 0.5. So here I'm saying the Green SpeedRatio and the Purple SpeedRatio are set to whatever the slider value is.
I'm ready to run the app, press F5, move to Trigger Another, click on this, and see what happens. It makes it look like there's a collision and they're moving. I'll do a reset, I'll speed things up, and try it again. Now the slow-down on the end of that doesn't look very natural. We have easings to solve that, and that's the topic of the next movie.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101476 Viewers
61 Video lessons · 88227 Viewers
71 Video lessons · 72109 Viewers
56 Video lessons · 103869 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.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.