QML 的 RadialBlur
用于创建径向模糊效果,模拟元素围绕中心点旋转或缩放时的动态模糊,适用于焦点突出、速度感表现、转场动画等场景。以下是详细使用技巧和优化指南:
1. 基本用法
import QtQuick 2.15
import QtQuick.Effects 1.15 // 确保模块正确引入
Image {
id: sourceImage
source: "image.png"
anchors.fill: parent
// 应用径向模糊
layer.enabled: true
layer.effect: RadialBlur {
anchors.fill: sourceImage
angle: 30 // 模糊角度(0~360度,控制模糊强度)
center: Qt.point(width/2, height/2) // 模糊中心点
samples: 24 // 采样数(影响平滑度)
transparentBorder: true // 处理边缘透明区域
}
}
关键属性:
angle
:模糊角度,值越大旋转模糊越强(0
无模糊,360
最大模糊)。center
:模糊中心点(默认元素中心),决定模糊的起始位置。samples
:采样数,建议≥ angle * 0.6
(如angle: 30, samples: 18
)。transparentBorder
:设为true
避免边缘黑边。
2. 效果控制
(1) 动态模糊中心
RadialBlur {
center: Qt.point(mouseArea.mouseX, mouseArea.mouseY) // 跟随鼠标位置
angle: 45
samples: 24
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
}
(2) 模糊方向与强度
- 旋转模糊:
angle > 0
,模拟顺时针旋转拖影。 - 缩放模糊:结合
Scale
动画,模拟元素缩放时的动态模糊:RadialBlur { angle: scaleAnim.running ? 60 : 0 // 缩放时启用模糊 Behavior on angle { NumberAnimation { duration: 300 } } } NumberAnimation { id: scaleAnim target: sourceImage property: "scale" from: 1.0 to: 1.5 duration: 1000 }
3. 动态效果实现
(1) 转场动画模糊
// 页面切换时添加径向模糊过渡
RadialBlur {
angle: pageTransition.progress * 90 // 根据转场进度调整模糊强度
samples: 24
}
PageTransition {
id: pageTransition
// ... 页面切换逻辑
}
(2) 按钮点击涟漪效果
Rectangle {
id: button
width: 120
height: 40
color: "lightblue"
layer.effect: RadialBlur {
angle: button.pressed ? 60 : 0 // 点击时模糊
center: Qt.point(mouseX, mouseY) // 以点击点为中心
samples: 16
Behavior on angle { NumberAnimation { duration: 200 } }
}
MouseArea {
anchors.fill: parent
onPressed: button.pressed = true
onReleased: button.pressed = false
}
}
4. 性能优化
- 控制
samples
值:在低端设备上建议≤ 24
。 - 启用缓存:静态模糊设置
cached: true
。 - 降采样处理:
layer.textureSize: Qt.size(width/2, height/2) // 纹理尺寸降为50%
5. 常见问题
(1) 模糊效果边缘异常
- 启用
transparentBorder: true
。 - 扩展源图像边界(如
sourceSize: Qt.size(width*1.1, height*1.1)
)。
(2) 模糊中心偏移
- 确保
center
坐标正确(相对于元素局部坐标系)。 - 使用百分比动态绑定:
center: Qt.point(width*0.3, height*0.7) // 中心点位于元素左下方
(3) 性能卡顿
- 减少
samples
和angle
值。 - 避免高频更新模糊属性(如每帧动画)。
6. 进阶技巧
(1) 局部模糊(遮罩裁剪)
Rectangle {
width: 300
height: 300
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle { // 圆形遮罩
width: 300
height: 300
radius: 150
}
RadialBlur {
angle: 45
samples: 24
}
}
}
(2) 结合颜色叠加
RadialBlur {
angle: 30
samples: 18
}
Rectangle {
anchors.fill: parent
color: "#60FF0000" // 叠加半透明红色层
}
(3) 多效果组合
layer.effect: MultiEffect {
radialBlurEnabled: true
radialBlurAngle: 30
radialBlurCenter: Qt.point(0.5, 0.5) // 中心点比例(Qt6特性)
// 其他效果(如阴影、颜色调整)
}
7. 与其他模糊效果对比
特性 | RadialBlur | DirectionalBlur | GaussianBlur |
---|---|---|---|
模糊类型 | 围绕中心点旋转/缩放模糊 | 单一方向运动模糊 | 全向高质量模糊 |
性能消耗 | 中高(依赖 angle ) | 中 | 高 |
适用场景 | 转场动画、焦点特效 | 滑动元素拖影 | 静态背景虚化 |
总结
- 核心作用:模拟旋转或缩放动态模糊,增强视觉冲击力。
- 关键参数:
angle
(强度)、center
(焦点)、samples
(平滑度)。 - 适用场景:转场动画、按钮交互、游戏特效、动态焦点。
- 优化建议:控制
angle
和samples
平衡效果与性能,优先在桌面端使用。