当前位置：首页 > news >正文

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

news 2025/11/10 10:02:09

前言

目标

环境

启动效果 - 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控制：

<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透明窗口设置：

// 扩展窗口框架到整个客户区，启用透明效果
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});
});