仅当鼠标位于网格上方时动画椭圆

Question

我正在编写一个 xaml 项目，其中在网格内绘制了一个椭圆。目前，一旦加载网格，我就会重复设置椭圆的长度和宽度的动画。我想做出以下改变：

我希望当鼠标悬停在网格上时动画开始并重复。当鼠标离开网格时，我希望动画完成当前循环，然后在完成时停止。

这是我的代码的永久重复版本：

<Window x:Class="MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Woo_Loo"
        mc:Ignorable="d"
        Title="Main Window" Height="115" Width="115" Background="Transparent" WindowStyle="None">
    <Grid>
        <Grid.Triggers>
            <EventTrigger RoutedEvent="Grid.Loaded">
                <BeginStoryboard>
                    <Storyboard TargetName="Elips" TargetProperty="Width">
                        <DoubleAnimation From="100" To="0" Duration="0:0:0.25"
                            AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <SineEase EasingMode="EaseIn"/>
                                </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
                <BeginStoryboard>
                    <Storyboard TargetName="Elips" TargetProperty="Height">
                        <DoubleAnimation From="0" To="100" Duration="0:0:0.25"
                            AutoReverse="True" RepeatBehavior="Forever">
                                <DoubleAnimation.EasingFunction>
                                    <SineEase EasingMode="EaseOut"/>
                                </DoubleAnimation.EasingFunction>
                        </DoubleAnimation>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Grid.Triggers>
        <Ellipse Name="Elips" StrokeThickness="10" Stroke="Red" Fill="Transparent" HorizontalAlignment="Center" VerticalAlignment="Center" Width="100" Height="0" />
    </Grid>
</Window>

我不确定是否使用事件触发器来修改重复行为属性，或者以某种方式使用鼠标悬停属性来更改重复行为属性，或者让重复行为成为有条件的，或者什么。我是 xaml 的初学者。如果可能的话，我想避免使用代码隐藏。

Answer 1

无需等待循环完成的示例：

        <EventTrigger RoutedEvent="Loaded">
            <BeginStoryboard x:Name="beginStoryboard">
                <Storyboard TargetName="Elips" TargetProperty="Width">
                    <DoubleAnimation From="100" To="0" Duration="0:0:0.25"
                            AutoReverse="True">
                        <DoubleAnimation.EasingFunction>
                            <SineEase EasingMode="EaseIn"/>
                        </DoubleAnimation.EasingFunction>
                    </DoubleAnimation>
                </Storyboard>
            </BeginStoryboard>
            <PauseStoryboard BeginStoryboardName="beginStoryboard"/>
        </EventTrigger>
        <EventTrigger RoutedEvent="MouseEnter">
            <ResumeStoryboard BeginStoryboardName="beginStoryboard"/>
        </EventTrigger>
         <EventTrigger RoutedEvent="MouseLeave">
            <PauseStoryboard BeginStoryboardName="beginStoryboard"/>
        </EventTrigger>