鼠标悬停时的情节提要执行

Question

我在 Expression Blend 中开发了一个 WPF 应用程序，这是一个简单的按钮附加，带有一个带有反弹效果的故事板。

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

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

    <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 像素。按钮可能会从鼠标移开并开始向后移动以反转动画。

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

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

Answer 2

我们以这个按钮动画为例：

<Grid>  
    <Button HorizontalAlignment="Center" VerticalAlignment="Center" Content="Test  ">
      <Button.RenderTransform>
        <ScaleTransform ScaleX="1.0" ScaleY="1.0" />
      </Button.RenderTransform> 
      <Button.Style>
        <Style TargetType="Button">
          <Style.Triggers>
            <EventTrigger RoutedEvent="MouseEnter">
              <EventTrigger.Actions>
                <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" To="2.0" />
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleY" To="2.0" />
                  </Storyboard>
                </BeginStoryboard>
              </EventTrigger.Actions>
            </EventTrigger>
            <EventTrigger RoutedEvent="MouseLeave">
              <BeginStoryboard>
                  <Storyboard>
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" To="1.0" />
                    <DoubleAnimation Duration="0:0:0.5" Storyboard.TargetProperty="RenderTransform.ScaleY" To="1.0" />
                  </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
          </Style.Triggers>
        </Style>
      </Button.Style>     
    </Button>
  </Grid>

所以当你的鼠标进入按钮区域时，它会变大，当鼠标离开时，它会收缩。

默认情况下，故事板的：

• AutoReverse = False，如果为真，动画一结束就会恢复。
• FillBehavior = HoldEnd，这使得按钮的外观在动画结束后保持不变（即：只要将鼠标放在按钮上方，按钮就会保持 2 倍大）。如果设置为Stop，它会在动画结束后立即恢复到原始状态（没有动画，这与 AutoReverse 不同）。
• RepeatBehavior = 1x，您可以将其设置为TimeSpan、nx，其中n 是您希望动画重复的次数，或者Forever，它将永远循环播放。

您应该检查这些设置是否被篡改。

最后但并非最不重要的一点是，确保与动画相关的逻辑是合理的，并且不会导致循环（这反过来会导致动画循环）。例如，如果您基于鼠标悬停在一个元素上进行动画制作，并且动画移动了该元素，那么您的鼠标不再悬停在该元素上，因此动画将恢复，将鼠标下的按钮带回，等等，永远。

Answer 3

您可以尝试将鼠标放在具有透明（非空）背景的画布内，并在鼠标移到画布上时为按钮设置动画。按钮会离开它的位置，但画布不会。例如，您可以在模板控件中使用该解决方案。