マウスが境界に触れると、アニメーションが繰り返し再開します

Question

イメージ上にアニメーションに問題があります。WPFのマウスオーバーイベントトリガー。マウスがImageの境界に触れて静止していると、アニメーションはマウスを動かすまで永遠に再開します。この場合、私はそれをやめるために何をすべきですか？

私のコードは次のとおりです。

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

Answer 1

アニメーションの基本的な問題は、あなたが、アニメーションオブジェクトの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>