wpf - 鼠标悬停时的 Storyboard 执行

Question

我在 Expression Blend 中开发了一个 WPF 应用程序，一个简单的按钮附加到一个带有弹跳效果的 Storyboard。

到目前为止一切顺利，现在我希望我的按钮在我的鼠标进入时弹起，它确实如此。但它一直这样做。我移动鼠标一次，再次弹跳后落入鼠标区域(我没有移动鼠标，鼠标光标静止)并再次开始弹跳。

这是我正在使用的全部代码

    <Window.Resources>
    <Storyboard x:Key="Storyboard1">
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0" Value="0"/>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="0"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)" Storyboard.TargetName="button">
            <EasingDoubleKeyFrame KeyTime="0" Value="0">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
            <EasingDoubleKeyFrame KeyTime="0:0:1" Value="-29">
                <EasingDoubleKeyFrame.EasingFunction>
                    <BounceEase EasingMode="EaseIn"/>
                </EasingDoubleKeyFrame.EasingFunction>
            </EasingDoubleKeyFrame>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource Storyboard1}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="51" Margin="76,100,0,0" VerticalAlignment="Top" Width="130" RenderTransformOrigin="0.5,0.5">
        <Button.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform/>
                <TranslateTransform/>
            </TransformGroup>
        </Button.RenderTransform>
        <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseEnter">
                <ei:ControlStoryboardAction Storyboard="{StaticResource Storyboard1}"/>
            </i:EventTrigger>
        </i:Interaction.Triggers>
    </Button>
</Grid>

只需将其复制粘贴到您的 xaml 窗口中，您就可以开始了。

将鼠标保持在鼠标的上角。您会看到问题所在。

谢谢

Answer 1

弹出的内容是当按钮高 51 像素时，您将按钮向下移动 29 像素。可能是按钮从鼠标移开并开始向后移动以反转动画。

您可以通过修改按钮和动画来解决这个问题: - 将按钮放在容器中(网格、堆叠面板——任何适合你的东西) - 使容器的背景“透明”(这与“空”不同) - 使按钮与该容器的底部对齐 - 在容器上触发动画并改变容器的高度结果是，当按钮移开时，鼠标仍在其容器上方，因此动画不会停止和反转。 - 使用 AutoReverse 和 RepeatBehavior 控制动画行为

--这显然不是您正在使用的全部代码(“i”命名空间声明在哪里？)所以我看不到您的问题。