WPF 仿 QQ2013 登入視窗關閉動畫：OpacityMask 漸變淡出效果實作

效果預覽

點擊關閉按鈕時，視窗從中心向四周呈現圓形漸變透明淡出，再關閉視窗，極具質感。

核心原理：OpacityMask + RadialGradientBrush 動畫

1. 視窗透明化：WindowStyle="None" AllowsTransparency="True" Background="Transparent"
2. 圓形裁剪：對根容器 (Grid) 套用 EllipseGeometry Clip，動態計算中心與半徑。
3. 漸變遮罩：根容器 OpacityMask 使用 RadialGradientBrush，包含多個 GradientStop。
4. 動畫驅動：Storyboard 動畫控制各 GradientStop.Offset 從 0 變化至 1，產生向外擴散的透明波紋。

XAML 定義 (MainWindow.xaml)

<Window x:Class="QQCloseEffect.MainWindow"
        WindowStyle="None" AllowsTransparency="True" Background="Transparent"
        Width="400" Height="300">
    <Window.Resources>
        <Storyboard x:Key="CloseStoryboard">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="stop1" Storyboard.TargetProperty="Offset">
                <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                <EasingDoubleKeyFrame KeyTime="0:0:0.8" Value="1"/>
            </DoubleAnimationUsingKeyFrames>
            <!-- stop2, stop3 同理，KeyTime 錯開 0.1s 產生波紋 -->
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="layoutroot">
        <Grid.OpacityMask>
            <RadialGradientBrush Center="0.5,0.5" GradientOrigin="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                <GradientStop x:Name="stop1" Color="Black" Offset="0"/>
                <GradientStop x:Name="stop2" Color="Black" Offset="0"/>
                <GradientStop x:Name="stop3" Color="Black" Offset="0"/>
                <GradientStop Color="Transparent" Offset="1"/>
            </RadialGradientBrush>
        </Grid.OpacityMask>
        <Grid.Clip>
            <EllipseGeometry x:Name="clipEllipse"/>
        </Grid.Clip>
        <!-- 視窗內容：標題列、輸入框、登入按鈕等 -->
        <Button Content="關閉測試" Click="OnClick" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Window>

程式碼後端 (MainWindow.xaml.cs)

public partial class MainWindow : Window
{
    Storyboard _closeStoryboard;
    public MainWindow()
    {
        InitializeComponent();
        _closeStoryboard = (Storyboard)Resources["CloseStoryboard"];
        _closeStoryboard.Completed += (s, e) => this.Close();

        this.Loaded += (s, e) =>
        {
            // 動態設定裁剪圓形：涵蓋整個視窗
            double cx = layoutroot.ActualWidth / 2;
            double cy = layoutroot.ActualHeight / 2;
            clipEllipse.Center = new Point(cx, cy);
            clipEllipse.RadiusX = cx;
            clipEllipse.RadiusY = cy;
        };
    }

    private void OnClick(object sender, RoutedEventArgs e)
    {
        _closeStoryboard.Begin();
    }
}

關鍵點總結

• OpacityMask 僅提取 Brush 的 Alpha 通道，故 RadialGradientBrush 的 Color 可全為 Black，Offset 控制透明度分佈。
• 多個 GradientStop 錯開動畫時間，形成多層波紋效果。
• Clip 確保動畫不超出視窗矩形邊界。
• Storyboard.Completed 事件中呼叫 Close() 實現動畫後真正關閉。

擴充應用

同理可實作視窗開啟時的「漸現」動畫、頁面切換轉場、按鈕點擊波紋 (Material Design Ripple) 等效果。