HandOffBehavior for Smooth Animation in WPF

Download Sample – 30KB[^]

Animation in WPF application has few major hurdles when it is not used optimally. For public applications, you need to give more stress on performance of the UI. If you use animation for your application, you need to ensure that it goes smoothly. Certain abrupt change in animation may sometimes produce rusty animation for your application. Let's look at how to deal with such situations.

<Style x:Key="BorderStyle2" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="Blue" />
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
<Border Style="{StaticResource BorderStyle2}" Canvas.Top="100" Canvas.Left="200" Width="100" Height="100" />

In the above code, I have put a Style for my Border in Blue which Scales itself to 3 times when mouse is hovered over the control and returns to the original size when it is moved out of the control. This is the most common set of animation that you might have used most often. I have used EventTrigger to trigger event when MouseEnter and MouseLeave occurs, which ensures that Animation begins on those events.

The animation looks very simple and works great, but it had major performance issues. Say you turn the mouse over the control, the Control starts the animation generates the Scaling, but eventually turns on the Scale down algorithm just before the Scaleup event finishes. As a result, you get an overlapping animation at certain range of clock.
To improve the performance of the animation, each animation exposes Handoff behavior. The default style of ScaleAndReplace handoff behavior replaces the animation immediately resulting a jerky animation, as the button is not scaled up to 3 when the second animation did started.
On the other hand, if you use Compose, it combines both the animation Clock times and generates a smooth animation. Just in the second Border:

<Style x:Key="BorderStyle1" TargetType="{x:Type Border}">
            <Setter Property="Background" Value="Green"/>
            <Setter Property="Border.RenderTransform">
                <Setter.Value>
                    <ScaleTransform CenterX="50" CenterY="50" ScaleX="1" ScaleY="1" />
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard >
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" To="3"  />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" To="3"  />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard HandoffBehavior="Compose">
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleX" />
                                <DoubleAnimation Duration="0:0:2" Storyboard.TargetProperty="RenderTransform.ScaleY" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
<Border Style="{StaticResource BorderStyle1}" Canvas.Top="100" Canvas.Left="100" Width="100" Height="100" />

The HandoffBehavior is set to Compose which results a smooth animation in case of overlapping storyboards.
So it is always better to use HandoffBehavior to Compose when you have a scenario with overlapping animation.