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

我们以此按钮动画为例：

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

因此，当鼠标进入按钮区域时，它会增长，当鼠标离开时，它会缩小。

默认情况下，一个StoryBoard：

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

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

最后但并非最不重要的是，确保与动画相关的逻辑是有意义的，并且不会引发循环（这反过来会导致动画循环）。例如，如果基于鼠标在元素上进行动画处理，并且动画移动元素，则鼠标不再在元素上方，因此动画将恢复，永久地恢复鼠标下的按钮等。

Answer 2

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

Answer 3

弹出的东西是，当它高51px时你按下按钮29px。有可能按钮离开鼠标并开始向后移动以反转动画。

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

- 这显然不是你正在使用的整个代码（在哪里是“i”命名空间声明？）所以我无法看到你的问题。

Mouse Over上的故事板执行

3 个答案: