做【秒开】的程序：WPF / WinForm / WinUI3 / Electron

|----------------------------------------------------------------------------|
| |

前言

目标

环境

[启动效果 - WinForm](#启动效果 - WinForm)

[启动效果 - WPF](#启动效果 - WPF)

[启动效果 - WinUI3](#启动效果 - WinUI3)

[启动效果 - Electron](#启动效果 - Electron)

总结

前言

每次启动软件时，看到页面一直卡在loading的时候，那种焦虑感就好像看到手机的电量变红一样，真的非常影响心情，我希望软件启动时，能够让人眼前一亮，带给人更多的愉悦感，留下美好的第一印象，向用户传达出来一种感觉: "哇，这么快"、"咦，怎么一下就出来了" "咦，这么快，而且还挺活泼的就蹦出来了，这个软件一定很有意思" 。

对于一个空白程序而言，软件的启动速度一般都是非常快速的，无论手机软件，还是在电脑软件，但是随着在实际开发中加入的功能越来越多，软件的启动速度一般也越来越慢，像老牛拉慢车的感觉，甚至经常会陷入无限的等待中，心中的焦虑和怒火会油然而生。

技术框架本身一般都做了很好的优化，所以一个软件的卡顿主要是由于软件的业务量，以及开发者的优化策略来决定的，但是这里讨论的不是程序优化本身，而是来对不同技术框架编写的程序，在假设它们是可以秒开的情况下，来看他们会带来哪些细微的体验差异。

目标

对 WinForm / WPF / WinUI3 / Electron 这4种不同的技术做一个秒开的程序，实现功能：

点击启动入口后，页面从鼠标点击的位置开始，尺寸从零变化到正常窗口位置和尺寸，给人感觉就好像这个窗口是从鼠标点击的那个位置钻出来的感觉。

环境

开发环境：VS2026, C#/Html/Css, Claude Code

运行环境：

处理器 Intel(R) Core(TM) i9-14900HX 2.20 GHz

机带 RAM 32.0 GB (31.7 GB 可用)

系统类型 64 位操作系统, 基于 x64 的处理器

版本 Windows 11 家庭中文版

版本号 24H2

操作系统版本 26100.6899

体验 Windows 功能体验包 1000.26100.253.0

启动效果 - WinForm

快速动画：

|----------------------------------------------------------------------------|
| |

慢速动画：

|----------------------------------------------------------------------------|
| |

效果达标：通过分层窗口技术，winform就像简单绘图一样来显示任意形状的窗口，启动程序后，响应迅速，画面流畅，但是效果略显生硬；窗口启动后，迅速获取了鼠标的位置信息，从无到有地变幻到正常窗口，准确、高效地实现达到了 "从鼠标位置钻出来" 的感觉。

核心实现：

利用 UpdateLayeredWindow 实现分层窗口的透明度控制和逐帧重绘，使 WinForms 窗体能绘制带 Alpha 的位图并实现平滑的动画渐显效果。

计时器驱动 + 缓动计算：用 Stopwatch 结合 ease-out 三次缓动函数，计算缩放、平移、透明度插值，保证动画节奏自然：

cs 复制代码

private void AnimationTimerOnTick(object? sender, EventArgs e)
{
    double progress = Math.Min(1.0, _stopwatch.Elapsed.TotalMilliseconds / AnimationDurationMs);
    double eased = EaseOutCubic(progress);
    double scale = Lerp(InitialScale, FinalScale, eased);
    double offsetX = Lerp(_startOffsetX, 0.0, eased);
    double offsetY = Lerp(_startOffsetY, 0.0, eased);
    double opacity = eased;
    RenderFrame(scale, offsetX, offsetY, opacity); 
}

帧缓冲绘制：按当前缩放创建缓冲位图，用高质量插值绘制后传给分层窗口，确保缩放图像清晰且透明度正确：

cs 复制代码

private void RenderFrame(double scale, double offsetX, double offsetY, double opacity)
{ 
    EnsureFrameSurface(targetWidth, targetHeight); 
    _frameGraphics.Clear(Color.Transparent);
    _frameGraphics.DrawImage(_image, new Rectangle(0, 0, targetWidth, targetHeight));
    ApplyLayeredBitmap(_frameBitmap, left, top, opacity);
}

启动效果 - WPF

快速动画：

|----------------------------------------------------------------------------|
| |

慢速动画：

|----------------------------------------------------------------------------|
| |

效果达标：通过对窗口简单的设置，wpf 轻松、简洁地就实现了异形、透明窗口的动画变换，启动程序后，响应比较迅速，动画应用了缓动函数，效果柔和，但是由于帧率不够高，给人一种略带吃力的感觉；整体上准确、简单、完整地实现达到了 "从鼠标位置钻出来" 的感觉。

核心实现：

DPI校正的鼠标坐标获取：

cs 复制代码

private Point GetMousePositionLogical()
{
    GetCursorPos(out POINT cursorPos);
    IntPtr monitor = MonitorFromPoint(cursorPos, MONITOR_DEFAULTTONEAREST);
    GetDpiForMonitor(monitor, 0, out uint dpiX, out uint dpiY);

    double scaleX = dpiX / 96.0;
    double scaleY = dpiY / 96.0;

    return new Point(cursorPos.X / scaleX, cursorPos.Y / scaleY);
}

窗口UI控制：

cs 复制代码

<Window x:Class="WpfApp1.RenderTransformWindow"
        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"
        mc:Ignorable="d"
        Title="Render Transform Demo"
        WindowStyle="None"
        AllowsTransparency="True"
        Background="Transparent"
        ResizeMode="NoResize"
        ShowInTaskbar="False"
        Topmost="True"
        WindowStartupLocation="Manual">
    <Window.Resources>
        <ImageBrush x:Key="ShowImageBrush"
                    ImageSource="pack://siteoforigin:,,,/show.png"
                    Stretch="UniformToFill"/>
    </Window.Resources>
    <Grid>
        <Border x:Name="AnimatedContainer"
                Width="360"
                Height="560"
                Background="{StaticResource ShowImageBrush}"
                BorderBrush="#33000000"
                BorderThickness="1"
                CornerRadius="30"
                Padding="1"
                RenderTransformOrigin="0.5,0.5"
                Opacity="0"
                HorizontalAlignment="Center"
                VerticalAlignment="Center">
            <Border.RenderTransform>
                <TransformGroup>
                    <ScaleTransform x:Name="ContentScaleTransform" ScaleX="0.1" ScaleY="0.1"/>
                    <TranslateTransform x:Name="ContentTranslateTransform"/>
                </TransformGroup>
            </Border.RenderTransform> 
        </Border>
    </Grid>
</Window>

启动效果 - WinUI3

快速动画：

|----------------------------------------------------------------------------|
| |

慢速动画：

|----------------------------------------------------------------------------|
| |

效果不达标：每次进行winui3的功能测试，耗费的工作量和时长，至少是其他ui框架的5倍以上（这一点也不夸张，甚至在10倍以上，甚至更久，甚至完全出不来，这导致开发效率真的极低），虽然winui3也可以使用分层窗口技术实现异形窗口，但是当对页面进行动画的时候，背景却无法很好地配合，尝试了多种办法都无法把背景透明化，所以出现了上面的白色背景；但是它的动画帧率极高，我觉得接近ios系统的原生动画效果，很有高级质感。

由于无法去掉背景，因此很难做出独立的"从鼠标位置钻出来" 的感觉，效果不达标。

核心实现：

DWM透明窗口设置：

cs 复制代码

// 扩展窗口框架到整个客户区，启用透明效果
MARGINS margins = new MARGINS { cxLeftWidth = -1, cxRightWidth = -1, cyTopHeight = -1, cyBottomHeight = -1 };
DwmExtendFrameIntoClientArea(hWndMain, ref margins);

Composition API GPU加速动画，Composition动画中心点设置：

cs 复制代码

// 关键：设置 CenterPoint 为窗口中心（720x1120 的中心是 360, 560）
visual.CenterPoint = new System.Numerics.Vector3(360f, 560f, 0f);
visual.Scale = new System.Numerics.Vector3(0.1f, 0.1f, 1.0f);
visual.Opacity = 0.0f;

缓动函数与动画启动：

cs 复制代码

var easingFunction = compositor.CreateCubicBezierEasingFunction(
    new System.Numerics.Vector2(0.215f, 0.61f),
    new System.Numerics.Vector2(0.355f, 1.0f)
);
// 启动动画
visual.StartAnimation("Scale", scaleAnimation);
visual.StartAnimation("Opacity", opacityAnimation);

启动效果 - Electron

快速动画：

|----------------------------------------------------------------------------|
| |

慢速动画：

|----------------------------------------------------------------------------|
| |

效果不达标：对于很少使用electron的我，在ai的帮助下，轻松快速地做出来上面的效果，可见web的生态真的是很强大，它支持的功能非常丰富，异形窗口、透明等都轻松实现，而且动画效果平滑流畅，帧率高；但是经过多次尝试，即使获取了最初鼠标位置，窗口的效果始终没有变化，可能是获取鼠标位置有延迟导致，但是这也明显暴露了一个问题，启动速度明显慢很多；

虽然没有做出来"从鼠标位置钻出来" 的感觉，但是我觉得它应该是支持，可能支持的不太好，或者可能有些与系统相关的性能问题，也许是它跨平台特性的代价？

核心实现：

透明无边框窗口 + 性能优化处理；

使用 transparent: true 和 frame: false 创建无边框透明窗口

通过 show: false + ready-to-show 事件避免白屏闪烁

GPU 加速优化（enable-gpu-rasterization, enable-zero-copy, disable-gpu-vsync）

透明窗口创建与居中定位创建视觉无干扰的透明窗口：

javascript 复制代码

mainWindow = new BrowserWindow({
    x: windowX,  // 居中计算
    y: windowY,
    width: 400,
    height: 600,
    transparent: true,      // 透明
    frame: false,           // 无边框
    backgroundColor: '#00000000',  // 完全透明背景
    hasShadow: false,
    resizable: false,
    show: false,           // 延迟显示避免白屏 
});

渲染优化与配置传递避免白屏 + 主进程与渲染进程通信，传递运行时配置：

javascript 复制代码

mainWindow.once('ready-to-show', () => {
    console.log('窗口准备就绪，开始显示');
    mainWindow.show();  // DOM 就绪后再显示
    
    // 发送配置到渲染进程
    mainWindow.webContents.send('window-ready', {
        animationDuration: animationDuration
    });
});

总结

对4种不同技术做出来的启动效果，进行体验评价，如下：

**WinUI3：**真的高级，但是真的很不成熟，开发效率是极大瓶颈，基本是不可忍受的；

**Electron：**真的强大，小缺点基本可以忍受，整体比较完美；

**WPF：**真的稳，真的靠谱，但是很难给出高级感；

**WinForm：**它真的不是用来比美的，但是硬来的话，它也能凑数，而且还有模有样的。