Still working on our MouseOver State, the next step is have the increase and decrease in size take place over a duration of 0.3 of a second. This is done by adding Transitions to the State.
First, we will work on the size increase.
- In the States list, select MouseOver State.
- Click on the 'Add Transition' icon at the right hand side. (Arrow and Plus symbol icon).
- Select the '* to MouseOver' item, which represents changes from any other State to MouseOver State.
This Transition will now be visible in the States list, directly below the MouseOver State itself. Notice that there is also a Duration setter, current set at zero seconds:
If you place the mouse directly over the '0s' setting the cursor will change to a 4-way icon. Hold down the left mouse button and drag to the right until the value increases to '0.3s'. If you find that too fiddly, simply left-click on it and type in the value of '0.3' and hit the Tab key.
Press F5 to run the project and move the mouse over the button. Notice that the size increase is now spread over the 0.3 of a second. When you move the mouse off the button however, the transition is still immediate. We will deal with that next.
Click the 'Add Transition' icon for MouseOver again. Take a moment to look at the choices. You will see that you can be very precise with these Transitions. That is, you can have different timings depending on which particular States the Transition is moving between. Feel free to add different values to the transitions between the various states if you want to later.
For our starter example, this time select 'MouseOver to *'. Again, change the duration to 0.3 seconds.
Once you have done this, if you use the mouse to select the various States in the States list, as you did previously, you will see the size of the button change when you select or leave MouseOver, but in the Blend Artboard you don't get any indication of the transition. To do this, you need to run the project again. When you move the mouse on and off the button, you will now see that smoother transition.
More Complex Transitions
The example so far only changes one property - the RenderTransform property on the grid in the button's template. You can of course make multiple property changes and have them all take place within the same transition. All you have to do is select the element or sub-element within the ControlTemplate in the Objects and Timeline, make whatever changes you require. As it happens, the button template we are using here isn't a very good candidate for other changes, because its underlying template is quite complex, but you can change some of the Background colors.
But what do you do if, for example, you want to have the same property changed more than once when a State changes? What I mean by that is, what if you want the button Pressed State to create the following effect:
The button tilts a couple of degrees clockwise, then a few degrees anti-clockwise, before finally returning to the horizontal position.
Faced with this kind of requirement, you need to work on the Timeline directly (or write reams of complex XAML, of course, if you want to do it the hard way!).
Let's take an example where you want the button to move as follows when the mouse moves over it:
- Tilt to the right
- then immediately tilt to the left
- and finally return to horizontal.
To achieve this result obviously requires more than one RotateTransform. Here are the steps:
First, get ready to edit the template as before:
- Right click on the button on the Artboard.
- Select Edit Control Parts(Template).
- Select Edit a Copy.
- Change the Name to 'Tilting'.
- Accept the default 'Define In' location.
- Press OK.
Next, create the animation. You will see that the list of States will have appeared. Left-click on the 'MouseOver' state to select it. Double-check that the Grid is selected in the Objects and Timeline pane. Then click on the 'Show Timeline' icon in the Objects and Timeline pane:
You will need to make the Timeline more user-friendly, so locate the Timeline Zoom feature and change the value from the default of 100% to something like 400%:
If you haven't created KeyFrames before, you may find the next few steps quite fiddly. I know that I found it frustrating the first few times.
Click and hold the yellow timeline marker, then drag it a short distance to the right - just past the first tick marker in the timeline. Release it. You don't have to be exact about where you release it, because you cannot get a finer adjustment than one-tenth of a second. As you can see from the next screenshot, it shows the play head position being at the 1/10th of a second point. If you have mover the play head marker beyond this point, simply grab it again and move it back to the left.
Then click on the Record KeyFrame icon (highlighted in the screenshot below). The result will be that the yellow marker is set at the 1/10th of a second position and there will be the a white ellipse in line with the Grid, which indicate that changes will be made to the Grid.
You will see that Timeline Recording is on, so the next step is to tilt the button to the right at the 1/10th of a second point. You can do this simply by rotating the button on the Artboard or by setting a value in the Properties pane.
Using the Artboard approach, hover the mouse somewhere near the top right corner of the button. It will change to a curved double headed arrow. Move the cursor around until you see this cursor icon appear. When it does, left-click and drag downwards to rotate the button a short amount.
You can test that you have succeed so far, by left-clicking on the yellow Timeline marker bar and moving it left and right. You should see the angle of the button change as you do this.
To make the button tilt to the left, you follow more or less the same procedure:
Drag the yellow Timeline marker to the right.
Stop dragging when it reaches the 0:00:200 marker.
Click on the Record KeyFrame icon.
Rotate the button anti-clockwise on the Artboard.
The finished result when you run it will look better if you use approximately the same angle as you used for the clockwise rotation.
The final step is to return the button to the horizontal position. The steps are similar to the previous ones - create a KeyFrame, this time at 0:00:400. It is actually surprisingly difficult to return the button to absolutely perfect horizontal using the Artboard. This is a case where it makes sense to use the Properties pane.
Click on the Properties pane tab to select it, then scroll down until you find the 'Transform' section. You may need to click on the small arrow by the side of the word 'Transform' to show all the options.
Select the RotateTransform icon:
Change the value of the Angle to '0' by typing it in or by dragging the small control device. Then Press ENTER to confirm the setting.
You can now test the result in Blend again by dragging the Timeline marker. Make any changes you require and then you are ready to give it a run-time test by pressing F5. Once the browser displays the button, move the mouse on and off it to confirm that it all works as it should.