Click here to Skip to main content
Click here to Skip to main content

Tagged as

HandOffBehavior for Smooth Animation in WPF

, 16 Mar 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
When animation is not totally complete, default animation behavior might produce jurky animation. Here is a demo how you could make it smoother.
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhishek Sur
Architect
India India
Did you like his post?
 
Oh, lets go a bit further to know him better.
Visit his Website : www.abhisheksur.com to know more about Abhishek.
 
Abhishek also authored a book on .NET 4.5 Features and recommends you to read it, you will learn a lot from it.
http://bit.ly/EXPERTCookBook
 
Basically he is from India, who loves to explore the .NET world. He loves to code and in his leisure you always find him talking about technical stuffs.
 
Presently he is working in WPF, a new foundation to UI development, but mostly he likes to work on architecture and business classes. ASP.NET is one of his strength as well.
Have any problem? Write to him in his Forum.
 
You can also mail him directly to abhi2434@yahoo.com
 
Want a Coder like him for your project?
Drop him a mail to contact@abhisheksur.com
 
Visit His Blog

Dotnet Tricks and Tips



Dont forget to vote or share your comments about his Writing
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.141022.2 | Last Updated 16 Mar 2011
Article Copyright 2011 by Abhishek Sur
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid