Question

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

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>

当鼠标触及边界时，动画会重复重新启动

1 个答案: