3

我在 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 窗口中即可。

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

谢谢

4

3 回答 3

0

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

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

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

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

于 2012-11-23T16:01:53.333 回答
0

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

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

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

于 2012-11-29T15:59:25.587 回答
0

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

于 2012-11-29T04:35:15.703 回答