企业官网建设流程全解析

上一篇用分段动画做了果冻回弹，这篇换个完全不同的思路，用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