當鼠標觸及邊界時，動畫重複重新啓動

我在WPF中的圖像鼠標移動事件觸發器上遇到問題。當鼠標觸及圖像的邊界並靜止時，動畫會一直重複，直到移動鼠標。在這種情況下，我應該做些什麼來阻止它並觸發一次？當鼠標觸及邊界時，動畫重複重新啓動

我的代碼是：

<Image Source="/Project_12;component/Images/cancel-64.png" RenderTransformOrigin=".5,.5" Stretch="Uniform"> 
    <Image.RenderTransform> 
     <RotateTransform x:Name="AnimatedRotatex" Angle="0" /> 
    </Image.RenderTransform> 
    <Image.Style> 
     <Style TargetType="Image"> 
      <Style.Triggers> 
       <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource Self}}" Value="True"> 
        <DataTrigger.EnterActions> 
         <BeginStoryboard Name="sb"> 
          <Storyboard> 
           <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" 
        By="0"   
        To="90" 
        Duration="0:0:.5" 
        FillBehavior="HoldEnd" /> 
          </Storyboard> 
         </BeginStoryboard> 
        </DataTrigger.EnterActions> 
        <DataTrigger.ExitActions> 
         <RemoveStoryboard BeginStoryboardName="sb" /> 
        </DataTrigger.ExitActions> 
       </DataTrigger> 
      </Style.Triggers> 
     </Style> 
    </Image.Style> 
</Image>

來源

2017-02-09 AAAE_N

動畫從小鼠下移動圖像進行。解決這個問題的一種方法是在動畫元素上定義一個靜態的透明區域，並在那裏定義觸發器。 –

@ManfredRadlwimmer請你詳細解釋一下我現在應該做什麼以及代碼是什麼？ –

工作一個例子，應該在幾分鐘內完成。 –

動畫的基本問題是，您使用動畫對象的IsMouseOver財產。只要圖像旋轉，就會將圖像的HitTestArea移動到「不在路上」，導致IsMouseOver屬性變爲false，結束動畫並因此導致無限循環。我添加了一個藍色邊框來顯示圖像的HitTestArea以突出顯示問題。

你需要做的，是創建另一個，靜態區域（透明背景，以確保它有一個HitTestArea），並使用IsMouseOver屬性，它是代替（紅色邊框）。

這樣一來，即使將圖像從鼠標光標「移開」外，其他元件的IsMouseOver屬性將是由運動圖像不受影響。

另一種方法是使用圓作爲HitTestArea，因爲它不會受到旋轉的影響。上面的例子中的

源碼：

<Border Background="Transparent" BorderThickness="1" BorderBrush="Red" Width="40" Height="40"> 
    <Border BorderThickness="1" BorderBrush="Blue" Width="36" Height="36" RenderTransformOrigin=".5,.5" IsHitTestVisible="False"> 
     <Border.RenderTransform> 
      <RotateTransform x:Name="AnimatedRotatex" Angle="0" /> 
     </Border.RenderTransform> 
     <Border.Style> 
      <Style TargetType="Border"> 
       <Style.Triggers> 
        <DataTrigger Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=Border}}" Value="True"> 
         <DataTrigger.EnterActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" 
            By="0"   
            To="90" 
            Duration="0:0:.2" 
            FillBehavior="HoldEnd" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.EnterActions> 
         <DataTrigger.ExitActions> 
          <BeginStoryboard> 
           <Storyboard> 
            <DoubleAnimation Storyboard.TargetProperty="RenderTransform.(RotateTransform.Angle)" 
            By="90"   
            To="0" 
            Duration="0:0:.2" 
            FillBehavior="HoldEnd" /> 
           </Storyboard> 
          </BeginStoryboard> 
         </DataTrigger.ExitActions> 
        </DataTrigger> 
       </Style.Triggers> 
      </Style> 
     </Border.Style> 
     <Image VerticalAlignment="Center" HorizontalAlignment="Center" Width="32" Height="32" Stretch="Uniform" Source="cancel.png"/> 
    </Border> 
</Border>

來源

2017-02-09 08:36:15

是的。有用。謝謝。 –

當鼠標觸及邊界時，動畫重複重新啓動

回答

相關問題