C# Avalonia 16- Animation- BlurringButtons

BlurringButtons.axaml代码

<Window xmlns="https://github.com/avaloniaui"
        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"
        Height="300" Width="300"
        x:Class="AvaloniaUI.BlurringButtons"
        Title="BlurringButtons">
    <Window.Styles>
        <!-- 按钮基础样式 -->
        <Style Selector="Button">
            <Setter Property="HorizontalAlignment" Value="Center"/>
            <Setter Property="RenderTransformOrigin" Value="0.5,0.5"/>
            <Setter Property="Padding" Value="20,15"/>
            <Setter Property="Margin" Value="2"/>
            <Setter Property="Effect">
                <Setter.Value>
                    <BlurEffect Radius="10"/>
                </Setter.Value>
            </Setter>

            <!-- 鼠标悬停时动画 -->
            <Style Selector="^:pointerover">
                <Style.Animations>
                    <Animation Duration="0:0:0.4" FillMode="Forward" Easing="SineEaseIn">
                        <KeyFrame Cue="0%">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <BlurEffect Radius="10"/>
                                </Setter.Value>
                            </Setter>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <BlurEffect Radius="0"/>
                                </Setter.Value>
                            </Setter>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>

            <Style Selector="^:not(:pointerover)">
                <Style.Animations>
                    <Animation Duration="0:0:0.2" FillMode="Forward" Easing="SineEaseOut">
                        <KeyFrame Cue="0%">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <BlurEffect Radius="0"/>
                                </Setter.Value>
                            </Setter>
                        </KeyFrame>
                        <KeyFrame Cue="100%">
                            <Setter Property="Effect">
                                <Setter.Value>
                                    <BlurEffect Radius="10"/>
                                </Setter.Value>
                            </Setter>
                        </KeyFrame>
                    </Animation>
                </Style.Animations>
            </Style>
        </Style>    
    </Window.Styles>
    
    <StackPanel Margin="5" HorizontalAlignment="Center" Spacing="10">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
        <Button>Four</Button>
        <TextBlock x:Name="lbl" Margin="5"/>
    </StackPanel>
</Window>

BlurringButtons.axaml.cs代码

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;

namespace AvaloniaUI;

public partial class BlurringButtons : Window
{
    public BlurringButtons()
    {
        InitializeComponent();
    }
}

运行效果