Scaling animation - Can't return to scale:1

Question

I've been trying to scale a grid through a storyboard animation.

This is the animation:

<Storyboard x:Key="HoverOut" Duration="00:00:00.250">
    <DoubleAnimation 
        To="1" 
        Storyboard.TargetName="scale"
        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
    <DoubleAnimation 
        To="1" 
        Storyboard.TargetName="scale"
        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"/>
</Storyboard>
<Storyboard x:Key="HoverIn" Duration="00:00:00.250">
    <DoubleAnimation 
        To="5" 
        Storyboard.TargetName="scale"
        Storyboard.TargetProperty="(ScaleTransform.ScaleX)"/>
    <DoubleAnimation 
        To="5" 
        Storyboard.TargetName="scale"
        Storyboard.TargetProperty="(ScaleTransform.ScaleY)"/>
</Storyboard>

and I'm using it in a button style, in the ControlTemplate:

<ControlTemplate.Triggers>
                    <EventTrigger RoutedEvent="Button.MouseLeave">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.MouseEnter">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.LostFocus">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverOut}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="Button.GotFocus">
                        <EventTrigger.Actions>
                            <BeginStoryboard Storyboard="{StaticResource HoverIn}"/>
                        </EventTrigger.Actions>
                    </EventTrigger>
</ControlTemplate.Triggers>

the grid contains a RenderTransform:

<Grid RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <ScaleTransform x:Name="scale"
                                            ScaleX="1"
                                            ScaleY="1">
                            </ScaleTransform>
                        </Grid.RenderTransform>

The issue is that it does indeed scale up, but when it's supposed to scale down via the "HoverOut" Storyboard it doesn't return to it's default scale. It scales down at a fraction. Hovering over the button again continues this climbing effect, growing bigger and bigger.

Also, when mouse Entering/Leaving really fast it seems to start scaling back down...

EDIT: I've added a label to my button template that tells me the current scaleX and ScaleY of the ScaleTransform and the numbers don't make sense to me.

the animation is supposed to set the scale factor to 5, however, when scaled up it only scales up by 1, giving a scale factor of 2. What's weirder, after MouseLeave and MouseEnter again, the second time it scales up by only a total of 0.81.

score 2 · Accepted Answer · answered Jul 17 '16 at 18:20

Incase anyone else has had this issue, I finally found what I was doing wrong. I was setting the duration of the storyboard instead of the duration of the DoubleAnimations.

DoubleAnimation - duration property: duration of one iteration. 
Storyboard      - duration property: duration of the total animation and all iterations.

So, the animation should be:

<Storyboard x:Key="HoverOut" >
    <DoubleAnimation 
        Duration="00:00:00.250"
        To="1" 
        Storyboard.TargetName="scale" 
        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
    <DoubleAnimation 
        Duration="00:00:00.250"
        To="1" 
        Storyboard.TargetName="scale" 
        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
<Storyboard x:Key="HoverIn" >
    <DoubleAnimation 
        Duration="00:00:00.250"
        To="5" 
        Storyboard.TargetName="scale" 
        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleX)"/>
    <DoubleAnimation 
        Duration="00:00:00.250"
        To="5" 
        Storyboard.TargetName="scale" 
        Storyboard.TargetProperty="(RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>

Scaling animation - Can't return to scale:1

1 Answers1