Mouse Over上的故事板執行

我在Expression Blend中開發了一個WPF應用程序，一個簡單的按鈕附帶一個帶有反彈效果的故事板。Mouse Over上的故事板執行

到目前爲止，現在我想讓我的按鈕在我的鼠標進入它時反彈，它確實如此。但它一直這樣做。我將鼠標移動一次，並在彈跳後再次落入鼠標區域（我不移動鼠標，鼠標光標仍然）並開始再次彈起。

這是整個代碼，我使用

<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窗口，你會好到哪裏去。

將鼠標放在鼠標的頂部角落。你會看到問題。

感謝

來源

2012-11-21 manav inder

將有用的看到一些代碼 – user1834059

彈出的事情是，當它的高度爲51px時，將按鈕向下移動29px。機會是按鈕從鼠標移開並開始向後移動以反轉動畫。

您可以解決此通過返工按鈕和動畫： - 在一個容器中放置該按鈕（網格，StackPanel中 - 什麼，你的作品） - 使容器的背景「透明」（這是不一樣的作爲「null」） - 使按鈕對齊到該容器的底部 - 在容器上製作動畫觸發器並更改容器的高度結果是，當按鈕移開時，鼠標仍然位於其容器上，因此動畫不會停止並反轉。 - 帶自動翻轉和RepeatBehavior

控制動畫行爲 - 這顯然不是你正在使用的整個代碼（這裏是「我」的命名空間聲明？），所以我不能看到我的結束你的問題。

來源

2012-11-29 15:59:25

感謝您的回答，如果您想重現問題，那麼「我：」是爲System.Windows.Interactivity –

讓我們這個按鈕的動畫爲例：

<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其中ñ是你想要的動畫重複，或Forever的次數，它會永遠循環下去。

您應該檢查這些設置是否未被篡改。

最後但並非最不重要的一點是，確保與動畫相關的邏輯有意義，並且不會引發循環（這反過來會導致動畫循環）。例如，如果您基於鼠標位於元素上方進行動畫製作，並且動畫會移動元素，那麼您的鼠標不再位於該元素上，因此動畫會恢復，永遠將鼠標等按鈕帶回。

來源

2012-11-23 16:01:53

我已經更新了這個問題，請你現在看看它。謝謝 –

您可以嘗試將鼠標放置在具有透明（非空）背景的畫布內，並在鼠標懸停在畫布上時爲按鈕設置動畫。按鈕將離開它的位置，但畫布不會。例如，您可以在模板控件中使用該解決方案。

來源

2012-11-29 04:35:15

Mouse Over上的故事板執行

回答

相關問題