尧图网络科技YAOTU DIGITAL 获取报价
获取报价
首页 / 资讯中心 / 文章详情

QML 自定义按钮:用着色器做鼠标跟随的光晕效果

发布时间:2026/9/15 8:49:22

资讯中心
01
ARTICLE

QML 自定义按钮:用着色器做鼠标跟随的光晕效果

QML 自定义按钮:用着色器做鼠标跟随的光晕效果
目录最终效果拆开讲讲ShaderEffect 基本结构MouseArea 只追踪不拦截片元着色器几个可以调的参数什么时候用小结完整代码工程下载上一篇用分段动画做了果冻回弹,这篇换个完全不同的思路,用ShaderEffect自定义片元着色器,让按钮表面产生一个跟随鼠标位置移动的光晕。悬停时光晕渐入,按压时光晕增亮。所有像素级计算都在 GPU 上完成,性能不是问题。最终效果鼠标移到按钮上,光晕从鼠标位置渐入并跟随移动;按下去光晕增亮,按钮整体变亮。示例里两个按钮,一个蓝色光晕,一个紫色光晕更聚焦。拆开讲讲核心是ShaderEffect,QML 侧只负责传参数,shader 里算每个像素的颜色。ShaderEffect 基本结构按钮背景用ShaderEffect,定义几个 uniform 属性传给 shader。background: Item { ShaderEffect { id: haloShader anchors.fill: parent property color baseColor: "#1296FF" property real mouseX: 0.5
02
RELATED NEWS

相关资讯

更多网站建设与数字化升级内容

03
WHY YAOTU

想打造同款高转化官网?

懂行业、懂生意,从建站到增长一站式陪跑

场景化定制

不做模板站,围绕你的业务场景量身设计,小众不撞款。

营销型架构

以转化目标组织内容与路径,让官网真正带来询盘。

全周期服务

设计、开发、运营、运维一体,上线只是开始。

免费获取你的建站方案

留下需求,专属顾问 24 小时内为你输出方案建议。