First Floor Software

Declarative Tweening (4)

(Series Link:  Part 1, Part 2, Part 3, Part 4)

I have discussed the concept of Declarative Tweening, the benefits of having Tween animations declared in XAML and I talked a bit about key frames per second. Now I want to demonstrate the use of Tween animations in combination with the Visual State Manager. The Visual State Manager is used to manage the visual state of a custom control (or user control for that matter). With Declarative Tweening we now have the option to use Tween animations to transition a control from one state to another. Let's demonstrate this with the Button control.

I want to create a custom template for a Button and use a Tween animation to define the transition when the mouse moves over the button. I want the button to start bouncing when the mouse is over the control.

Customizing the Button

First of all I need the default button style and I use the excellent SilverlightDefaultStyleBrowser by Delay to extract the default style from the Button control. I copy the style to my App.xaml and assign it a unique key. Then I create a Button in my page and set it's style as is demonstrated below.

<Button
    Style="{StaticResource MyButton}"
    Width="200"
    Height="50"
    Content="Button" />

So far, so good, we have a customized button that for now looks exactly like the default Button. Now I can modify the ControlTemplate and start adding Tween animations to the visual transition that transitions the button to the MouseOver state. The visual transition is defined in the Common States group and I am going to add a EaseOutElastic animation. The animation will rotate the button, so we need to add a RotateTransform to the root of the button first and we set the RenderTransformOrigin to the center of the button.

<ControlTemplate TargetType="Button">
    <Grid RenderTransformOrigin=".5,.5">
        <Grid.RenderTransform>
            <RotateTransform x:Name="Rotate" />
        </Grid.RenderTransform>
        ...

Now we can define the Tween animation targetting the created RotateTransform.

<vsm:VisualTransition To="MouseOver" Duration="0:0:2">
    <Storyboard>
        <DoubleAnimationUsingKeyFrames
            Storyboard.TargetName="Rotate"
            Storyboard.TargetProperty="Angle"
            Duration="0:0:2"
            ff:Tween.From="-90"
            ff:Tween.To="0"
            ff:Tween.TransitionType="EaseOutElastic"/>
    </Storyboard>
</vsm:VisualTransition>

And we're done. It's as easy as that. Now when I run my application and move the mouse over the button you'll get this bouncing sensation. By simply adding a number of attached Tween properties, I now have a custom Button supporting Tween animations.

The sample might not be that useful in real world applications, but it just proves my point that it has become very easy to use Tween animations anywhere you want.

Download the source code.

Tween Cheat Sheet

Finally I would like to refer to a cheat sheet demonstrating the available Tween transition types. This is a very nice visual lookup to see what easing equation you want to use on your animations. Click the image below to view the cheat sheet.

(Series Link:  Part 1, Part 2, Part 3, Part 4)