Question

我一直在尝试通过故事板动画来缩放网格。

这是动画：

<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>

我正在按钮样式中使用它，在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>

网格包含RenderTransform：

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

问题在于它确实可以扩展，但是当它应该通过“HoverOut”故事板缩小时，它不会返回到它的默认比例。它缩小了一小部分。再次将鼠标悬停在按钮上会继续这种攀爬效果，越来越大。

此外，当鼠标输入/离开真的很快时，它似乎开始缩小...

编辑：我在我的按钮模板上添加了一个标签，告诉我ScaleTransform的当前scaleX和ScaleY，这些数字对我来说没有意义。

动画应该将比例因子设置为5，但是，当按比例放大时，它只会向上扩展1，比例因子为2.在MouseLeave和MouseEnter之后，第二次按比例缩放时，怪异的是什么？只有0.81。

Answer 1

如果其他人有这个问题，我终于找到了我做错了什么。我正在设置故事板的持续时间而不是DoubleAnimations的持续时间。

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

所以，动画应该是：

<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>

缩放动画 - 无法按比例返回：1

1 个答案: