Avalonia UI按钮动画问题：光标离开时恢复文本原始尺寸

我正在制作一款仪表盘，已为其中的按钮添加悬停动画——当用户将光标悬停在按钮上时，按钮内的文本会逐渐放大，当前代码运行正常：

<Button Grid.Column="1" Background="Transparent" Content="Manage User" Foreground="White"  Margin="0,10,0,0" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited" >
                <Button.Styles>
                    <Style Selector="Button:pointerover" >
                        <Style.Animations>
                            <Animation Duration="0:0:0.2">
                                <KeyFrame Cue="100%">
                                    <Setter Property="FontSize" Value="30">
                                
                                    </Setter>
                                </KeyFrame>
                            </Animation>
                        </Style.Animations>
                    </Style>
                </Button.Styles>
</Button>

但我不清楚如何在用户移开光标时，让按钮内的文本平滑恢复至原始尺寸，恳请提供解决方案！

方法一：添加移出状态的反向动画 #

给按钮的非悬停状态添加对应动画，让字体大小平滑恢复到初始值（替换代码中的20为你按钮的原始字体大小）：

<Button Grid.Column="1" Background="Transparent" Content="Manage User" Foreground="White" Margin="0,10,0,0"
        PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <Button.Styles>
        <!-- 悬停放大动画 -->
        <Style Selector="Button:pointerover">
            <Style.Animations>
                <Animation Duration="0:0:0.2">
                    <KeyFrame Cue="100%">
                        <Setter Property="FontSize" Value="30"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
        <!-- 移出恢复动画 -->
        <Style Selector="Button:not(:pointerover)">
            <Style.Animations>
                <Animation Duration="0:0:0.2">
                    <KeyFrame Cue="100%">
                        <Setter Property="FontSize" Value="20"/>
                    </KeyFrame>
                </Animation>
            </Style.Animations>
        </Style>
    </Button.Styles>
</Button>

方法二：使用Transitions自动处理过渡（更简洁） #

Avalonia的Transitions属性可以自动监听属性变化，无需分别编写两种状态的动画，只需指定过渡属性和时长即可：

<Button Grid.Column="1" Background="Transparent" Content="Manage User" Foreground="White" Margin="0,10,0,0"
        PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited">
    <Button.Styles>
        <Style Selector="Button">
            <!-- 设置初始字体大小 -->
            <Setter Property="FontSize" Value="20"/>
            <!-- 添加字体大小过渡动画 -->
            <Setter Property="Transitions">
                <Transitions>
                    <DoubleTransition Property="FontSize" Duration="0:0:0.2"/>
                </Transitions>
            </Setter>
        </Style>
        <!-- 悬停时修改字体大小，Transitions自动处理平滑过渡 -->
        <Style Selector="Button:pointerover">
            <Setter Property="FontSize" Value="30"/>
        </Style>
    </Button.Styles>
</Button>

第二种方法更推荐，因为它会自动处理悬停进入和移出的双向过渡，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Jessie Kelso