拓冰网站定制 
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载Loading是 SukiUI 内置的轻量级加载指示控件用于在 AvaloniaUI 应用中展示正在进行的异步任务。本指南以官方文档 loading.md 为骨架结合 Loading.cs 源码与 Demo 页面 ProgressView.axaml完整讲解其 XAML 用法、Simple / Glow / Pellets 三种动画样式的差异以及它基于 SkiaSharpSKSL着色器与 Composition CustomVisual 的底层渲染实现。读完本文你将能够在自己的 SukiUI 项目中即插即用地配置加载动画并理解其硬件/软件渲染的双路径机制。控件一览Loading是一个继承自Avalonia.Controls.Control的自绘控件源码位于 Loading.cs不依赖任何默认的 Avalonia 模板控件而是通过组合层Compositor自定义视觉直接绘制。它在构造函数中默认将尺寸设置为50 × 50像素Loading.cs因此即使不做任何布局配置也能直接显示一个完整可用的加载动画。快速上手一行 XAML 引入根据官方文档最基本的用法只需在 XAML 中声明一个suki:Loading /元素suki:Loading /前提是当前视图已引入 SukiUI 命名空间UserControl xmlns:sukihttps://github.com/kikipoulet/SukiUI ... suki:Loading / /UserControl若你的视图尚未合并 SukiUI 主题资源请先在App.axaml中引入主题详见 getting-started/installation。由于默认LoadingStyle为Simple、前景色自动取用主题的SukiPrimaryColor这段最简单的代码即可得到一个跟随应用主题色的旋转加载动画。三种动画样式Simple、Glow、Pellets控件通过LoadingStyle枚举属性切换动画外观枚举定义于 Loading.cs枚举值视觉特征对应着色器Simple细线圆环匀速旋转尾部带轻微拖尾simple.skslGlow线宽与光晕更大的发光圆环glow.skslPellets一段长弧带动多段短弧颗粒旋转的复合动画pellets.sksl官方 Demo 页面 ProgressView.axaml 中展示了三种样式的完整用法StackPanel Spacing15 suki:Loading LoadingStyleSimple / suki:Loading LoadingStyleGlow / suki:Loading LoadingStylePellets / /StackPanel从源码实现看LoadingStyleProperty注册时带有值校验约束Loading.cs传入的枚举值若未在LoadingStyle中定义会被强制回退为Simple因此非法赋值不会导致崩溃。样式切换会在OnPropertyChanged中即时生效——控件直接把对应样式的新SukiEffect实例通过消息发送给渲染处理器Loading.cs无需重建视觉树。三种样式的着色器差异三种样式均使用 SKSLSkia 着色器语言编写其源码位于 SukiUI/Content/Shaders/Loading/核心逻辑大致相同以iResolution归一化坐标、用atan(uv.y, uv.x)计算极角、再乘以iTime驱动的fallOff系数形成旋转拖尾。Simpleradius 0.3线宽lineWidth 1像素光晕glowSize 1像素内部再放大 2 倍是一条宽度恒定、带轻微辉光的旋转圆弧Glow线宽提升到2像素、光晕放大到3像素并将光晕随fallOff渐变视觉上发光感明显更强Pellets通过有符号距离场SDF绘制“最长弧 多段短弧”每帧按floor(T)分段旋转形成颗粒追逐长弧的效果线宽由widthReduction 0.02控制。三者均通过uniform vec3 iForeground接收前景色输出时与iAlpha相乘return vec4(color) * vec4(iForeground, iAlpha);从而保持半透明与主题色一致。外观控制Foreground 与尺寸Loading对外暴露两个核心属性Foreground前景色类型为IBrush。源码中有两个值得注意的行为默认自动取主题主色当Foreground为null时控件通过动态资源绑定SukiPrimaryColorLoading.cs因此换主题时加载动画颜色会自动跟随运行时更改即时刷新ForegroundProperty变化时控件将新颜色转换为float[3]数组通过SendHandlerMessage推送给渲染处理器Loading.cs无需重新挂载。显式指定示例suki:Loading LoadingStyleGlow ForegroundForestGreen /尺寸控件默认50 × 50可通过标准布局属性覆盖suki:Loading LoadingStylePellets Width80 Height80 /注意渲染尺寸跟随BoundsProperty变化控件在OnPropertyChanged中检测到尺寸变化后会把新尺寸同步给自定义视觉Loading.cs所以缩放动画或容器尺寸变化时动画不会失真。源码级原理Composition CustomVisual SKSL 渲染管线Loading的高性能动画得益于 Avalonia 的ElementComposition组合层。其完整生命周期如下挂载OnAttachedToVisualTree通过ElementComposition.GetElementVisual(this).Compositor创建CompositionCustomVisual注册LoadingEffectDraw处理器并通过SetElementChildVisual挂到控件上Loading.cs启动动画发送EffectDrawBase.StartAnimations消息渲染处理器内部的Stopwatch开始计时EffectDrawBase.cs此后每帧通过OnAnimationFrameUpdate触发重绘并注册下一帧EffectDrawBase.cs传递参数依次发送前景色float[3]与当前样式的SukiEffectLoading.cs渲染LoadingEffectDraw.Render使用EffectWithCustomUniforms注入iForeground后生成SKShader以单次DrawRect铺满整个控件区域Loading.cs卸载OnDetachedFromVisualTree发送StopAnimations并清理自定义视觉引用Loading.cs。SukiEffect 着色器加载与 uniform 注入SukiEffectSukiEffect.cs负责把.sksl文件编译为SKRuntimeEffectFromEmbeddedResource(simple)会在程序集中按名称查找嵌入资源并预编译任何编译错误都会以ShaderCompilationException抛出SukiEffect.csFromString会自动在所有着色器头部注入iTime、iDark、iAlpha、iResolution、iPrimary、iAccent、iBase等基础 uniformSukiEffect.cs因此 shader 源码中只需声明自己用到的自定义 uniform如iForeground。需要留意的是要让FromEmbeddedResource能找到着色器文件.sksl文件必须在 csproj 中标记为嵌入资源见 SukiEffect.cs 的注释说明。Loading 所用三个着色器即位于 Content/Shaders/Loading/ 目录下。硬件加速与软件渲染双路径EffectDrawBase.OnRender会根据渲染环境自动选择路径EffectDrawBase.cs硬件加速路径GrContext非空时调用Render即上文描述的 SKSL 着色器绘制软件回退路径无 GPU 或强制软件渲染时调用RenderSoftware。LoadingEffectDraw.RenderSoftware用DrawArc直接绘制一条按AnimationSeconds * 360f旋转的圆角描边圆弧Loading.cs保证在没有硬件加速的环境如某些设计器预览场景下依然可见。源码注释Loading.cs明确提醒软件渲染路径目前可能在设计器预览器中存在兼容性问题作者建议后续可退化为简单圆形绘制——这意味着如果发现设计器预览不理想可优先在运行时Run 模式验证效果。结合 BusyArea让 Loading 覆盖任意内容Loading不仅是独立控件还被 SukiUI 的忙碌遮罩能力内部复用。在 LoadingBehavior.cs 中ShowBusy会动态创建一个40 × 40的Loading实例放入Popup并将其锚定到目标控件上形成遮罩覆盖层var loading new Loading { Width 40, Height 40, Opacity 0 };对应的 XAML 用法是配合 BusyArea.axaml 或直接在任意控件上附加IsBusy属性。例如在数据加载期间锁住按钮/面板StackPanel suki:LoadingBehavior.IsBusy{Binding IsLoading} suki:LoadingBehavior.DimOpacity0.3 !-- 业务内容 -- /StackPanelIsBusy为true时目标内容透明度动画至DimOpacity默认0.3并禁用命中测试同时弹出居中的Loading动画为false时再平滑还原LoadingBehavior.cs。它还会跟随宿主ScrollViewer的滚动事件重新居中弹层保证滚动后加载指示不会错位LoadingBehavior.cs。这套机制在官方 Demo 的 BusyArea 示例BusyArea.axaml.cs中有完整演示。常见问题与使用建议着色器找不到/编译失败确认使用的.sksl文件已作为嵌入资源编译进程序集自定义 shader 建议走SukiEffect.FromString并复用其自动注入的 uniform 体系。设计器预览异常预览器通常无硬件加速Loading将走软件回退的DrawArc路径若预览效果与运行时不一致以运行态为准。颜色不跟随主题请勿在未设置Foreground时手动重置该属性为null之外的值如需固定颜色直接赋值即可控件会即时重绘。尺寸适配在Grid拉伸布局中使用时建议显式指定Width/Height避免被拉伸为不规则矩形影响圆弧比例。进一步阅读官方文档loading.md控件实现SukiUI/Controls/Loading.csDemo 页面SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml着色器源码SukiUI/Content/Shaders/Loading/渲染基类SukiUI/Utilities/Effects/EffectDrawBase.cs着色器工具类SukiUI/Utilities/Effects/SukiEffect.cs忙碌遮罩行为SukiUI/Animations/LoadingBehavior.cs赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析 Loading加载组件是 daisyUI 提供的一组纯 CSS 加前端UI组件SkSL 着色语言完全指南Skia 内部着色语言的设计差异与同步原语解析SkSL 着色语言完全指南Skia 内部着色语言的设计差异与同步原语解析 导读 SkSLSkia Shading Language是 Skia 以 GLS图形学IBAnimatable 加载动画Activity Indicator完全指南Interface Builder 与代码中的 40 种 Loading 动画IBAnimatable 加载动画Activity Indicator完全指南Interface Builder 与代码中的 40 种 Loading 动移动开发UI组件上一篇OkHttp Coroutines 协程扩展库实战用 executeAsync 优雅整合 Kotlin 挂起函数下一篇Civitai 付费模型加载覆盖度审计从 CoveredCheckpoint 到三分支覆盖模型创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 SukiUI Loading 加载控件完全指南：三种动画样式与 SKSL 着色器渲染原理
UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载Loading是 SukiUI 内置的轻量级加载指示控件用于在 AvaloniaUI 应用中展示正在进行的异步任务。本指南以官方文档 loading.md 为骨架结合 Loading.cs 源码与 Demo 页面 ProgressView.axaml完整讲解其 XAML 用法、Simple / Glow / Pellets 三种动画样式的差异以及它基于 SkiaSharpSKSL着色器与 Composition CustomVisual 的底层渲染实现。读完本文你将能够在自己的 SukiUI 项目中即插即用地配置加载动画并理解其硬件/软件渲染的双路径机制。控件一览Loading是一个继承自Avalonia.Controls.Control的自绘控件源码位于 Loading.cs不依赖任何默认的 Avalonia 模板控件而是通过组合层Compositor自定义视觉直接绘制。它在构造函数中默认将尺寸设置为50 × 50像素Loading.cs因此即使不做任何布局配置也能直接显示一个完整可用的加载动画。快速上手一行 XAML 引入根据官方文档最基本的用法只需在 XAML 中声明一个suki:Loading /元素suki:Loading /前提是当前视图已引入 SukiUI 命名空间UserControl xmlns:sukihttps://github.com/kikipoulet/SukiUI ... suki:Loading / /UserControl若你的视图尚未合并 SukiUI 主题资源请先在App.axaml中引入主题详见 getting-started/installation。由于默认LoadingStyle为Simple、前景色自动取用主题的SukiPrimaryColor这段最简单的代码即可得到一个跟随应用主题色的旋转加载动画。三种动画样式Simple、Glow、Pellets控件通过LoadingStyle枚举属性切换动画外观枚举定义于 Loading.cs枚举值视觉特征对应着色器Simple细线圆环匀速旋转尾部带轻微拖尾simple.skslGlow线宽与光晕更大的发光圆环glow.skslPellets一段长弧带动多段短弧颗粒旋转的复合动画pellets.sksl官方 Demo 页面 ProgressView.axaml 中展示了三种样式的完整用法StackPanel Spacing15 suki:Loading LoadingStyleSimple / suki:Loading LoadingStyleGlow / suki:Loading LoadingStylePellets / /StackPanel从源码实现看LoadingStyleProperty注册时带有值校验约束Loading.cs传入的枚举值若未在LoadingStyle中定义会被强制回退为Simple因此非法赋值不会导致崩溃。样式切换会在OnPropertyChanged中即时生效——控件直接把对应样式的新SukiEffect实例通过消息发送给渲染处理器Loading.cs无需重建视觉树。三种样式的着色器差异三种样式均使用 SKSLSkia 着色器语言编写其源码位于 SukiUI/Content/Shaders/Loading/核心逻辑大致相同以iResolution归一化坐标、用atan(uv.y, uv.x)计算极角、再乘以iTime驱动的fallOff系数形成旋转拖尾。Simpleradius 0.3线宽lineWidth 1像素光晕glowSize 1像素内部再放大 2 倍是一条宽度恒定、带轻微辉光的旋转圆弧Glow线宽提升到2像素、光晕放大到3像素并将光晕随fallOff渐变视觉上发光感明显更强Pellets通过有符号距离场SDF绘制“最长弧 多段短弧”每帧按floor(T)分段旋转形成颗粒追逐长弧的效果线宽由widthReduction 0.02控制。三者均通过uniform vec3 iForeground接收前景色输出时与iAlpha相乘return vec4(color) * vec4(iForeground, iAlpha);从而保持半透明与主题色一致。外观控制Foreground 与尺寸Loading对外暴露两个核心属性Foreground前景色类型为IBrush。源码中有两个值得注意的行为默认自动取主题主色当Foreground为null时控件通过动态资源绑定SukiPrimaryColorLoading.cs因此换主题时加载动画颜色会自动跟随运行时更改即时刷新ForegroundProperty变化时控件将新颜色转换为float[3]数组通过SendHandlerMessage推送给渲染处理器Loading.cs无需重新挂载。显式指定示例suki:Loading LoadingStyleGlow ForegroundForestGreen /尺寸控件默认50 × 50可通过标准布局属性覆盖suki:Loading LoadingStylePellets Width80 Height80 /注意渲染尺寸跟随BoundsProperty变化控件在OnPropertyChanged中检测到尺寸变化后会把新尺寸同步给自定义视觉Loading.cs所以缩放动画或容器尺寸变化时动画不会失真。源码级原理Composition CustomVisual SKSL 渲染管线Loading的高性能动画得益于 Avalonia 的ElementComposition组合层。其完整生命周期如下挂载OnAttachedToVisualTree通过ElementComposition.GetElementVisual(this).Compositor创建CompositionCustomVisual注册LoadingEffectDraw处理器并通过SetElementChildVisual挂到控件上Loading.cs启动动画发送EffectDrawBase.StartAnimations消息渲染处理器内部的Stopwatch开始计时EffectDrawBase.cs此后每帧通过OnAnimationFrameUpdate触发重绘并注册下一帧EffectDrawBase.cs传递参数依次发送前景色float[3]与当前样式的SukiEffectLoading.cs渲染LoadingEffectDraw.Render使用EffectWithCustomUniforms注入iForeground后生成SKShader以单次DrawRect铺满整个控件区域Loading.cs卸载OnDetachedFromVisualTree发送StopAnimations并清理自定义视觉引用Loading.cs。SukiEffect 着色器加载与 uniform 注入SukiEffectSukiEffect.cs负责把.sksl文件编译为SKRuntimeEffectFromEmbeddedResource(simple)会在程序集中按名称查找嵌入资源并预编译任何编译错误都会以ShaderCompilationException抛出SukiEffect.csFromString会自动在所有着色器头部注入iTime、iDark、iAlpha、iResolution、iPrimary、iAccent、iBase等基础 uniformSukiEffect.cs因此 shader 源码中只需声明自己用到的自定义 uniform如iForeground。需要留意的是要让FromEmbeddedResource能找到着色器文件.sksl文件必须在 csproj 中标记为嵌入资源见 SukiEffect.cs 的注释说明。Loading 所用三个着色器即位于 Content/Shaders/Loading/ 目录下。硬件加速与软件渲染双路径EffectDrawBase.OnRender会根据渲染环境自动选择路径EffectDrawBase.cs硬件加速路径GrContext非空时调用Render即上文描述的 SKSL 着色器绘制软件回退路径无 GPU 或强制软件渲染时调用RenderSoftware。LoadingEffectDraw.RenderSoftware用DrawArc直接绘制一条按AnimationSeconds * 360f旋转的圆角描边圆弧Loading.cs保证在没有硬件加速的环境如某些设计器预览场景下依然可见。源码注释Loading.cs明确提醒软件渲染路径目前可能在设计器预览器中存在兼容性问题作者建议后续可退化为简单圆形绘制——这意味着如果发现设计器预览不理想可优先在运行时Run 模式验证效果。结合 BusyArea让 Loading 覆盖任意内容Loading不仅是独立控件还被 SukiUI 的忙碌遮罩能力内部复用。在 LoadingBehavior.cs 中ShowBusy会动态创建一个40 × 40的Loading实例放入Popup并将其锚定到目标控件上形成遮罩覆盖层var loading new Loading { Width 40, Height 40, Opacity 0 };对应的 XAML 用法是配合 BusyArea.axaml 或直接在任意控件上附加IsBusy属性。例如在数据加载期间锁住按钮/面板StackPanel suki:LoadingBehavior.IsBusy{Binding IsLoading} suki:LoadingBehavior.DimOpacity0.3 !-- 业务内容 -- /StackPanelIsBusy为true时目标内容透明度动画至DimOpacity默认0.3并禁用命中测试同时弹出居中的Loading动画为false时再平滑还原LoadingBehavior.cs。它还会跟随宿主ScrollViewer的滚动事件重新居中弹层保证滚动后加载指示不会错位LoadingBehavior.cs。这套机制在官方 Demo 的 BusyArea 示例BusyArea.axaml.cs中有完整演示。常见问题与使用建议着色器找不到/编译失败确认使用的.sksl文件已作为嵌入资源编译进程序集自定义 shader 建议走SukiEffect.FromString并复用其自动注入的 uniform 体系。设计器预览异常预览器通常无硬件加速Loading将走软件回退的DrawArc路径若预览效果与运行时不一致以运行态为准。颜色不跟随主题请勿在未设置Foreground时手动重置该属性为null之外的值如需固定颜色直接赋值即可控件会即时重绘。尺寸适配在Grid拉伸布局中使用时建议显式指定Width/Height避免被拉伸为不规则矩形影响圆弧比例。进一步阅读官方文档loading.md控件实现SukiUI/Controls/Loading.csDemo 页面SukiUI.Demo/Features/ControlsLibrary/ProgressView.axaml着色器源码SukiUI/Content/Shaders/Loading/渲染基类SukiUI/Utilities/Effects/EffectDrawBase.cs着色器工具类SukiUI/Utilities/Effects/SukiEffect.cs忙碌遮罩行为SukiUI/Animations/LoadingBehavior.cs赞分享UI组件桌面应用【免费下载链接】SukiUIUI Theme for AvaloniaUI项目地址https://gitcode.com/gh_mirrors/su/SukiUI点击查看免费下载相关推荐daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析daisyUI Loading 组件完全指南6 种加载动画、5 档尺寸与源码级原理解析 Loading加载组件是 daisyUI 提供的一组纯 CSS 加前端UI组件SkSL 着色语言完全指南Skia 内部着色语言的设计差异与同步原语解析SkSL 着色语言完全指南Skia 内部着色语言的设计差异与同步原语解析 导读 SkSLSkia Shading Language是 Skia 以 GLS图形学IBAnimatable 加载动画Activity Indicator完全指南Interface Builder 与代码中的 40 种 Loading 动画IBAnimatable 加载动画Activity Indicator完全指南Interface Builder 与代码中的 40 种 Loading 动移动开发UI组件上一篇OkHttp Coroutines 协程扩展库实战用 executeAsync 优雅整合 Kotlin 挂起函数下一篇Civitai 付费模型加载覆盖度审计从 CoveredCheckpoint 到三分支覆盖模型创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考