 |
目录
前言
目标
环境
启动效果 - WinForm
启动效果 - WPF
启动效果 - WinUI3
启动效果 - 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 三次缓动函数，计算缩放、平移、透明度插值，保证动画节奏自然：
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);
}帧缓冲绘制：按当前缩放创建缓冲位图，用高质量插值绘制后传给分层窗口，确保缩放图像清晰且透明度正确：
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校正的鼠标坐标获取：
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控制：
启动效果 - WinUI3
快速动画：
 |
慢速动画：
 |
效果不达标：每次进行winui3的功能测试，耗费的工作量和时长，至少是其他ui框架的5倍以上（这一点也不夸张，甚至在10倍以上，甚至更久，甚至完全出不来，这导致开发效率真的极低），虽然winui3也可以使用分层窗口技术实现异形窗口，但是当对页面进行动画的时候，背景却无法很好地配合，尝试了多种办法都无法把背景透明化，所以出现了上面的白色背景；但是它的动画帧率极高，我觉得接近ios系统的原生动画效果，很有高级质感。
由于无法去掉背景，因此很难做出独立的“从鼠标位置钻出来” 的感觉，效果不达标。
核心实现：
DWM透明窗口设置：
// 扩展窗口框架到整个客户区，启用透明效果
MARGINS margins = new MARGINS { cxLeftWidth = -1, cxRightWidth = -1, cyTopHeight = -1, cyBottomHeight = -1 };
DwmExtendFrameIntoClientArea(hWndMain, ref margins);Composition API GPU加速动画，Composition动画中心点设置：
// 关键：设置 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;缓动函数与动画启动：
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）
透明窗口创建与居中定位 创建视觉无干扰的透明窗口：
mainWindow = new BrowserWindow({x: windowX, // 居中计算y: windowY,width: 400,height: 600,transparent: true, // 透明frame: false, // 无边框backgroundColor: '#00000000', // 完全透明背景hasShadow: false,resizable: false,show: false, // 延迟显示避免白屏
});渲染优化与配置传递 避免白屏 + 主进程与渲染进程通信，传递运行时配置：
mainWindow.once('ready-to-show', () => {console.log('窗口准备就绪，开始显示');mainWindow.show(); // DOM 就绪后再显示// 发送配置到渲染进程mainWindow.webContents.send('window-ready', {animationDuration: animationDuration});
});总结
对4种不同技术做出来的启动效果，进行体验评价，如下：
WinUI3：真的高级，但是真的很不成熟，开发效率是极大瓶颈，基本是不可忍受的；
Electron：真的强大，小缺点基本可以忍受，整体比较完美；
WPF：真的稳，真的靠谱，但是很难给出高级感；
WinForm：它真的不是用来比美的，但是硬来的话，它也能凑数，而且还有模有样的。