- 博客(801)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 QML 转场效果：玻璃折射、置换贴图与水波效果
本文介绍四种基于位移场的QML视觉效果：玻璃折射、置换贴图、鱼眼和水波。它们均通过“原坐标 + 位移”采样实现，差异在于位移场来源——平滑噪声（玻璃折射）、结构纹理（置换贴图）、局部非线性或正弦波（鱼眼与水波）。玻璃折射使用平滑噪声模拟磨砂玻璃效果，强调连续扰动；置换贴图则利用纹理R/G通道直接控制形变，实现画面液化。所有效果均在ShaderEffect中实现，依赖预生成纹理与着色器资源，通过CMake注册并配合动画参数动态渲染，展现丰富的几何变形能力。
2026-11-14 06:30:00
1
原创 QML 转场效果：立方体翻转、卷页翻书与视差分层
本文介绍三种单通道着色器实现的空间感效果：立方体翻转通过双面投影宽度变化模拟立体翻转；卷页翻书利用圆柱映射按弧长卷曲纸张，实现自然翻页；视差分层则基于亮度分割伪深度。三者均无需网格与额外相机，仅在片元着色器中计算几何，结合高光与压暗增强立体感，高效实现流畅动画。
2026-11-14 06:30:00
1
原创 QML 转场效果：星形、心形与六边形遮罩
本文实现三种基于自定义着色器的形状遮罩动画效果：星形、心形与六边形，均通过 ShaderEffect 实现。星形采用极坐标半径场，利用角度折叠与幂函数生长曲线生成平滑展开；心形与六边形共用 shape_poly.frag，通过隐函数判断像素位置。因 Qt 6.11 中 MultiEffect 遮罩存在渲染异常，最终改用着色器直接计算几何，确保尺寸稳定与边缘羽化可控。所有效果由 ShapeReveal.qml 统一管理参数，依赖 CMake 注册着色器，无需纹理采样，实现高效、流畅的视觉过渡。
2026-11-13 06:30:00
82
原创 QML 转场效果：漩涡、卷筒、万花筒与镜廊隧道
本文介绍四种基于极坐标的转场效果：漩涡、极坐标卷筒、万花筒与镜廊隧道。它们通过不同方式变换极坐标——漩涡调节旋转角随半径衰减，极坐标卷筒重构坐标系实现矩形与圆环互换，万花筒折叠角度形成对称图案，镜廊隧道翻折半径制造无限延伸感。四个效果均在QML中统一外壳，仅替换着色器，利用sin(π·p)确保首尾帧无扭曲，实现流畅自然的视觉过渡。
2026-11-13 06:30:00
97
原创 QML 转场效果：网格百叶窗、像素化与棋盘格翻面
本文介绍三种基于着色器的转场效果：百叶窗、像素化与棋盘格翻面。百叶窗将画面切为12条纵向条带，同步从左至右揭开；像素化通过动态调整马赛克网格大小，实现由细到粗再变细的过渡，并在中间切换图像源；棋盘格翻面则在二维格子中进行形变，实现画面翻转效果。三者均使用Qt的ShaderEffect，依赖自定义着色器（.frag.qsb），不采样额外纹理，通过progress参数控制动画进程，实现流畅的视觉切换。
2026-11-12 06:30:00
77
原创 QML 转场效果：噪点溶解、故障与老电影效果
本文介绍三种基于噪声的QML视觉效果：噪点溶解、故障与老电影。噪点溶解利用噪声纹理作为逐像素阈值，实现图像间精确渐变；故障通过哈希生成横向切片并叠加RGB错位，模拟信号干扰；老电影则用哈希驱动逐帧抖动，营造胶片质感。三者均使用128×128白噪声图，但应用方式各异——前者用于像素级控制，后者仅依赖哈希随机性，无需纹理。着色器中通过fract()平铺噪声，确保均匀颗粒效果。各效果在ShaderEffect中通过层渲染实现离屏采样，结合进度参数动态变化，实现流畅动画。
2026-11-12 06:30:00
93
原创 QML 转场效果：线性擦除与圆形遮罩展开
本文介绍两种基于遮罩的QML转场效果：线性擦除与圆形遮罩展开。二者均使用MultiEffect，通过控制maskSource（渐变纹理）、maskThresholdMin和maskSpreadAtMin实现。线性擦除用纵向渐变条从上至下扫过，遮罩两端超出画面以避免漏缝；圆形遮罩则通过缩放中心圆盘，实现由模糊背景向清晰图像的聚焦式展开。关键点包括：遮罩需置于layer.enabled的Item中，且toImg应隐藏以避免叠影。
2026-11-11 06:30:00
78
原创 QML 转场效果：模糊效果、亮度过曝与色调去色
本文介绍三种无需ShaderEffect的QML转场效果：模糊转场、亮度过曝与色调去色。均基于MultiEffect，通过调节blur、brightness、saturation属性实现，利用Math.sin(Math.PI * progress)确保起止帧为原图，中间过程平滑自然。关键点：toImg.visible = false避免叠影，属性方向不可颠倒，峰值留余量提升视觉舒适度。代码结构统一，仅参数不同，适合快速复用。
2026-11-11 06:30:00
106
原创 QML 转场效果：滑动推挤、旋转、缩放拉近与抖动
本文介绍四种无需着色器的QML基础转场效果：滑动推挤、旋转、缩放拉近与抖动。均通过直接操作底图的位置、缩放与旋转属性实现，依赖Stage.qml注入的fromImg、toImg及progress参数，利用clip: true裁剪越界内容。效果简洁高效，适用于L0层动画，强调纯属性驱动与直观视觉反馈。
2026-11-10 06:30:00
136
原创 QML 转场效果：翻转与 Z 轴穿越
本文介绍Qt6中两种具有纵深感的QML转场效果：翻转与Z轴穿越。翻转通过Stage注入的Rotation变换实现绕Y轴90°至0°的透视翻转，利用angle、axis和origin完成卡片式翻正；Z轴穿越则通过倒数公式1/(1-k·p)模拟镜头推进的透视放大，旧图冲出视野，新图从远处渐显。两者均依赖progress控制动画，强调动效逻辑与视觉真实感的统一，关键在于区分“缩放拉近”与“画面穿越”的本质差异。
2026-11-10 06:30:00
86
原创 QML 自定义输入框（TextField）合集
本系列《QML高级动效实战》共10个完整示例，涵盖搜索联想、胶囊标签、表单校验、复合输入区与流光边框五大场景，实现自动补全、话题标签、验证码格子、密码强度反馈、AI对话条及炫酷流光特效等高阶交互。所有代码纯QML编写，无外部依赖，可直接复用，助力打造美观流畅的输入体验。专栏直达
2026-11-09 06:30:00
109
原创 QML 转场效果：叠化、淡入淡出、闪白与反相闪光
本文介绍四种基础转场效果：叠化、淡入淡出、闪白与反相闪光。均通过调整 opacity 实现，无需移动图片位置。叠化保持底图不透明，避免中间发暗；淡入淡出分段控制，中间经纯黑帧；闪白用正弦函数驱动白色蒙版，0.5处硬切画面；反相闪光则引入Shader实现画面负片遮罩，视觉更独特。四者均由 Stage.qml 统一驱动，代码简洁，适合快速集成于QML项目中。
2026-11-09 06:30:00
141
原创 QML 对象模型与动态实例化（ObjectModel、Instantiator）
本文介绍Qt QML中ObjectModel与Instantiator的用法。ObjectModel允许直接将可视对象作为模型元素，无需delegate即可在视图中展示，适用于结构各异的列表项；Instantiator则可按模型数量动态创建并统一管理对象生命周期，支持增删与销毁。通过示例演示了动态添加、移动、修改对象及批量实例化等操作，提升界面开发效率。
2026-11-07 06:30:00
409
原创 QML 自定义滑块（Slider）合集
QML自定义滑块合集分为四类：基础滑块（渐变轨道、气泡反馈）、刻度标尺（指针固定、弧形转盘）、吸附与惯性（分段吸附、磁力吸合、惯性滑行）、视觉特效（粒子尾焰、液态晃动、拟物凹槽）。涵盖音量条、相机变焦、倍速调节等场景，注重交互手感与视觉表现，所有组件可直接复用，助力打造高品质QML界面。
2026-11-07 06:30:00
426
原创 QML 委托模型：重排、分组过滤与多视图共享
本文介绍Qt QML中DelegateModel的三大核心用法：通过视图层重排数据而不修改底层模型、实现分组过滤以动态切换显示内容、以及使用包委托让多个视图共享同一套组件。DelegateModel作为数据与视图间的桥梁，支持灵活的分组管理与索引映射，有效分离数据逻辑与界面状态，提升复杂列表场景下的可维护性与灵活性。
2026-11-06 09:34:52
547
原创 QML自定义输入框：单段循环与双段对撞流光边框
本文介绍一个基于圆角矩形路径参数化的流光边框组件 FlowBorderInput，通过将边框拆分为直线与圆弧段并实现弧长映射，支持单段匀速流光与双段对撞闪光两种动画模式。利用 Canvas 分段绘制与动态透明度控制，营造出细腻的光带渐隐效果；结合状态派生与按需重绘机制，实现聚焦、校验通过及报错时的视觉反馈，兼顾性能与交互体验。
2026-11-06 06:30:00
244
原创 QML自定义输入框：验证码输入格与密码强度条
本文实现两个高体验的表单组件：6位短信验证码输入格与密码强度条。前者通过单一透明TextField管理输入，上层动态渲染6个方格，支持粘贴、退格、焦点自动跳转，并实现数字弹入、光标闪烁、错误抖动与成功变色等反馈动画。后者实时过滤非法字符，通过红框闪烁提示，结合四段进度条逐级点亮、等级图标切换及粒子动画，直观展示密码强度。两者均基于Qt Quick，兼顾功能与交互细节。
2026-11-05 06:30:00
10
原创 QML自定义输入框：仿Agent输入条与仿wechat输入框
本文实现两款复合输入框组件：仿Agent输入条支持多行自适应、胶囊选择器互斥切换及生成状态动态反馈；仿微信输入框集成表情面板、语音录入与转文字功能。通过内联Component封装工具栏，利用Popup的CloseOnPressOutsideParent避免菜单误开，结合状态同步与动画过渡提升交互体验，兼顾UI美观与功能完整性。
2026-11-05 06:30:00
9
原创 QML 布局镜像与锚点切换：LayoutMirroring 与 AnchorChanges
本文介绍Qt Quick中两个实用的UI布局工具：LayoutMirroring实现从右向左语言的布局镜像，通过改变锚点方向翻转布局，但不影响直接设置x/y坐标的元素；AnchorChanges则在状态切换时动态调整锚点，配合动画实现平滑位置变换，避免坐标冲突。两者均提升国际化适配与动态布局灵活性。
2026-11-04 06:30:00
314
原创 QML 弹性布局与布局代理：FlexboxLayout 与 LayoutItemProxy
本文介绍Qt中两个提升复杂UI布局灵活性的工具：FlexboxLayout（弹性布局）与LayoutItemProxy（布局代理）。前者借鉴CSS弹性盒模型，支持动态排列、换行及对齐控制；后者实现元素在不同布局间的动态迁移，打破结构固化。通过交互式演示，可实时调整方向、对齐方式与间距，显著增强界面设计的灵活性与响应能力。
2026-11-04 06:30:00
566
原创 QML自定义输入框：自动补全与聚焦展开搜索框
本文实现两个QML自定义搜索框组件：一是自动补全输入框，支持实时联想、键盘导航、回车确认及点击外部收起；二是聚焦展开式搜索框，聚焦时占位文字上浮为标签并浮现蓝色光晕，历史记录自动保存。通过将弹层与输入框同级置于根项下，避免布局挤压，并利用z层级和MouseArea实现点击空白处收起。关键细节包括：属性变更需整体赋值以触发绑定更新、使用RichText高亮匹配字符、通过Behavior实现平滑开合动画及错峰入场效果，提升交互体验。
2026-11-03 06:30:00
128
原创 QML自定义输入框：话题输入框与标签输入框
本文实现两个可混排胶囊与输入框的QML组件：话题输入框（支持#/@触发联想，生成带配色胶囊）与标签输入框（回车或逗号提交，超限抖动提示）。通过Flow布局自动换行，利用Repeater动态渲染胶囊，结合mode属性统一管理状态。新胶囊添加时采用宽度渐变入场动画，删除时平滑左移补位。关键操作如选词、删帖均封装于外层函数，避免生命周期错误。输入为空时退格可逐个删除胶囊，提升交互体验。
2026-11-03 06:30:00
87
原创 QML 字体加载：FontLoader 与 FontInfo
本文详解 QML 中字体加载与匹配机制，重点介绍 FontLoader 与 FontInfo 的协同使用。FontLoader 负责异步加载外部字体文件（如 .ttf/.otf），将其注册至 Qt 字体库，并通过 name 属性提供字族名；其 status 状态可监控加载过程，避免因未就绪导致字体闪烁。建议结合 opacity 动画实现平滑过渡。FontInfo 则用于调试，可实时反馈系统实际启用的字体，帮助排查加载失败或兜底问题。推荐使用特征明显的艺术字体进行测试，确保加载链路正确。
2026-11-02 06:30:00
700
原创 QML 字体度量与文本度量：FontMetrics 与 TextMetrics
本文介绍QML中FontMetrics与TextMetrics的使用，解析字体固有尺寸（如ascent、descent、xHeight）与文本实际排版尺寸的计算机制。通过示例项目演示字号变化时基线、辅助线及度量值的实时更新，展现其在自绘控件与手动排版中的应用价值。
2026-11-02 06:30:00
834
原创 QML 自定义dial：实现具有分层交互的热水器旋钮
该案例展示了如何在有限的圆盘空间内实现复合型交互。通过精准的事件传播控制与状态解耦，我们不仅实现了一个流畅的旋转调节器，还集成了独立的开关功能。这种方案非常适合应用于需要精细控制与多功能反馈的智能硬件面板。
2026-10-31 06:30:00
214
原创 QML 自定义旋钮（Dial）实战：14 个车载、工控与智能家居级旋钮方案
本文为《QML 高级动效实战》系列文章摘要，共14篇，聚焦车载、智能家居等场景下的自定义旋钮实现。涵盖纯代码绘制（银色、拉丝、柔光、发光弧）、贴图与混合设计（材质切换、指针对齐、切图对比）、数值反馈（灯环、平滑过渡）及硬件仿真（温控双温联动、万用表档位吸附、洗衣机连续旋转、热水器内外圈独立操作）四大类，解决质感、交互、防误触与真实设备还原等核心难题，提供可复用的完整解决方案。
2026-10-31 06:30:00
380
原创 QML 自定义dial：实现一个车载空调旋钮
本文对比了基于预渲染贴图与QML Canvas代码绘制的旋钮实现方案，通过统一状态逻辑与视觉尺寸对齐，实现两者的并列展示与效果对比。利用属性绑定确保状态同步，通过outerRatio精确控制可视直径一致，接口设计保持统一，便于切换与评估。案例展示了在车载交互中灵活权衡画质与性能的工程实践，支持快速迭代与可视化验证。
2026-10-30 06:30:00
11
原创 QML 自定义dial：模拟洗衣机旋钮
本文介绍洗衣机程序旋钮的交互设计与实现，支持无限旋转、滚轮步进及松手自动吸附。通过角度归一化与档位取整，确保多档位（16档）精准定位；动态布局根据象限调整文字对齐，引线与文字联动绘制，提升视觉一致性。核心逻辑基于QML与JavaScript，结合动画与事件处理，实现平滑拖动与高亮反馈，兼顾可用性与用户体验。
2026-10-30 06:30:00
131
原创 QML 自定义dial：实现一个量程选择开关
本文介绍在QML中实现工业旋钮的离散档位交互：通过MouseArea捕获拖动角度，计算最近档位并吸附，松手后指针自动对齐至整数档。利用DialCanvas绘制刻度与高亮当前档，Repeater动态生成档位文字，指针通过rotation属性结合Behavior实现平滑回弹动画，模拟真实机械手感，适用于万用表等仿真仪表场景。
2026-10-29 06:30:00
103
原创 QML 自定义dial：实现一个风速旋钮
本文介绍智能家居风速旋钮的交互设计与实现，通过QML构建三状态（关闭、AUTO、MAX）旋钮，解决连续调节与离散吸附的逻辑冲突。采用拖动、滚轮、点击标签三种方式控制指针，结合平滑动画与角度限位，实现流畅的自动吸附、步进调节与快速跳转。核心代码包括角度计算、吸附逻辑、动画控制及弧形进度绘制，确保用户体验自然连贯。
2026-10-29 06:30:00
96
原创 QML 自定义dial：实现一个光弧旋钮
本文介绍一种基于Qt Quick的光弧旋钮实现：通过动态绘制彩色弧线表达数值，弧长随角度变化，颜色由暗至亮渐变，弧头带白色指针标识位置。采用双Canvas分层绘制，静态面板与动态弧线分离，优化性能。利用多层半透明外发光模拟光影效果，避免使用耗性能的shadowBlur，确保流畅渲染。
2026-10-28 06:30:00
122
原创 QML 自定义dial：实现一个温度控制旋钮开关
该温控界面通过拖拽圆环设定目标温度，当前温度随时间逐步逼近目标。设定值与当前值通过动画和颜色渐变联动：进度弧与手柄颜色由冷蓝至暖橙动态过渡，状态文字实时显示加热/制冷/已达。鼠标操作与滚轮微调结合，90毫秒定时器控制平滑调节，精度达0.05℃，实现直观、流畅的交互体验。
2026-10-28 06:30:00
12
原创 QML 自定义dial：实现一个扁平旋钮
该旋钮通过分离真实值与绘制值，实现平滑的视觉反馈。拖动或滚轮操作更新真实值，而绘制值经110毫秒缓动动画平滑过渡，确保圆点滑行自然。绘制流程依次绘制底轨、刻度（已走过部分变浅蓝）、渐变进度弧及末端圆点，保证层次一致。使用Qt Quick与Canvas实现，结合自定义动画与角度转换逻辑，呈现极简风格的交互体验。
2026-10-27 06:30:00
12
原创 QML 自定义dial：实现一个柔光旋钮
本文通过 MultiEffect 的阴影效果实现旋钮的立体感：外盘凸起用正向阴影，内圈凹陷则反向偏移，共享参数但方向相反。指针随拖动角度旋转，限位在±140°，配合 MouseArea 实现平滑交互。流程清晰，视觉层次分明，仅靠阴影与图层叠加即达成真实质感。
2026-10-27 06:30:00
270
原创 QML 自定义dial：实现一个纹理贴图旋钮
该旋钮通过切换按钮在金属拉丝与胡桃木纹间切换，利用faceSource和woodMode统一管理材质与指针样式。拖动或滚轮调整数值，经换算后驱动指针旋转，贴图在圆形裁剪区内随旋转层同步转动。静态层包含落影、包边及21格刻度，图像加载后通过requestPaint()更新，实现无缝换面不重建组件。
2026-10-26 06:30:00
189
原创 QML 自定义dial：用贴图实现各种特殊材质的旋钮
本文实现可切换多款旋钮图的动态旋转控件，核心在于通过补偿图中指示标记的角度偏差，确保标记始终精准对齐刻度线。利用rawValue经步进量化后映射为角度，结合knobRotation = valueAngle - marker实现图像旋转对齐。流程涵盖鼠标拖动、滚轮输入、值域转换、图像绘制与进度弧渲染，配合Canvas高效绘制刻度、数字与动态进度，支持五种风格旋钮自由切换，兼顾视觉精度与交互流畅性。
2026-10-26 06:30:00
446
原创 QML 自定义dial：实现一个金属拉丝旋钮
该旋钮支持整圈连续旋转，松手即停，读数按最近档位取整。通过角度计算档位（360°÷11档），结合径向太阳纹金属质感与中心键槽定位，实现精准视觉反馈。外圈60格静态刻度配合动态旋转层，展现流畅交互体验。
2026-10-24 06:30:00
344
原创 QML 自定义dial：实现一个橙色灯环旋钮
该旋钮通过数值驱动灯环与指示条动态变化：外圈15颗灯点按比例逐个点亮，橙色指示条随角度旋转。核心逻辑为将值映射至0~100的归一化范围，计算出对应旋转角度（-135°至+135°），并通过画布重绘实现流畅动画。旋钮本体静态绘制，灯环与旋转层动态更新，结合鼠标拖动与滚轮输入，实现精准、直观的交互体验。
2026-10-24 06:30:00
206
原创 QML 自定义dial：实现一个带银色质感的旋钮
本文实现了一个纯代码绘制的银色旋钮控件，基于Qt Quick无外部依赖。通过MouseArea捕获拖动，利用atan2与角度解绕算法精准计算旋转量，结合径向渐变实现双层软阴影，模拟台面浮起效果。指针随value值动态旋转，刻度、凹槽、轴点等均用Canvas逐像素绘制，整体风格简洁现代，展现高效、流畅的交互体验。
2026-10-23 06:30:00
103
原创 不花一分钱写代码？这 6 款国产 AI Agent 的免费积分被我薅明白了
本文整理了国内主流代码AI Agent工具的免费积分福利与使用体验，涵盖Workbuddy、Trae、Minimax Code等7款产品。亲测推荐Workbuddy（生态强、积分通用）与Minimax Code（积分多、支持视频生成），指出各工具在模型能力、积分规则、内存占用（多因Electron封装）等方面的优劣。强调积分政策随时变动，建议按需选择，优先使用本地CLI版本以提升效率。
2026-10-23 06:30:00
1468
OpenCV实战：车辆统计（Python + OpenCV + 车辆识别）
2025-03-06
opencv + haar级联分类器实现人脸识别.zip
2025-03-19
【清华大学DeepSeek教程】.zip
2025-02-26
Qt之轮播诗词相册的实现
2022-09-06
QT串口编程，如何获取电脑当前可用端口名。
2013-07-11
TA创建的收藏夹 TA关注的收藏夹
TA关注的人