当前位置：首页 > web >正文

QML元素 - ZoomBlur

web 2025/8/22 22:01:50

QML 的 ZoomBlur 用于创建镜头缩放模糊效果，模拟元素从中心向外扩散的径向动态模糊，适用于焦点缩放、转场动画、视觉冲击增强等场景。以下是详细使用技巧和优化指南：

1. 基本用法

import QtQuick 2.15
import QtQuick.Effects 1.15  // 确保模块正确引入Image {id: sourceImagesource: "image.png"anchors.fill: parent// 应用镜头缩放模糊layer.enabled: truelayer.effect: ZoomBlur {anchors.fill: sourceImagecenter: Qt.point(width/2, height/2) // 模糊中心点length: 32       // 模糊强度（像素距离）samples: 24      // 采样数（影响平滑度）transparentBorder: true  // 处理边缘透明区域}
}

关键属性：

center：模糊中心点（默认元素中心），决定模糊扩散的起点。
length：模糊强度，值越大拖影越长（0 到 64）。
samples：采样数，建议设为 length * 0.75 以上（如 length: 32, samples: 24）。
transparentBorder：设为 true 避免边缘黑边。

2. 效果控制

(1) 动态模糊中心

ZoomBlur {center: Qt.point(mouseArea.mouseX, mouseArea.mouseY) // 跟随鼠标位置length: 40samples: 30
}MouseArea {id: mouseAreaanchors.fill: parenthoverEnabled: true
}

(2) 模糊方向与强度

缩放模糊：length > 0 时，模拟从中心向外扩散的模糊（类似镜头快速缩放）。
反向模糊：通过负值 length 模拟向内收缩的模糊（需自定义着色器，默认不支持）。

3. 动态效果实现

(1) 转场动画模糊

// 页面切换时添加缩放模糊过渡
ZoomBlur {length: pageTransition.progress * 64  // 根据转场进度调整模糊强度samples: 32
}PageTransition {id: pageTransition// ... 页面切换逻辑
}

(2) 按钮点击缩放反馈

Rectangle {id: buttonwidth: 120height: 40color: "lightblue"layer.effect: ZoomBlur {length: button.pressed ? 24 : 0  // 点击时模糊center: Qt.point(width/2, height/2)samples: 16Behavior on length { NumberAnimation { duration: 200 } }}MouseArea {anchors.fill: parentonPressed: button.pressed = trueonReleased: 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.2, height*0.8)  // 中心点位于元素左下方

(3) 性能卡顿

减少 samples 和 length 值。
避免高频更新模糊属性（如每帧动画）。

6. 进阶技巧

(1) 局部模糊（遮罩裁剪）

Rectangle {width: 300height: 300layer.enabled: truelayer.effect: OpacityMask {maskSource: Rectangle {  // 圆形遮罩width: 300height: 300radius: 150}ZoomBlur {length: 40samples: 32}}
}

(2) 结合颜色叠加

ZoomBlur {length: 30samples: 24
}Rectangle {anchors.fill: parentcolor: "#6000FF00"  // 叠加半透明绿色层
}

(3) 多效果组合

layer.effect: MultiEffect {zoomBlurEnabled: truezoomBlurLength: 20zoomBlurCenter: Qt.point(0.5, 0.5)  // 中心点比例（Qt6特性）// 其他效果（如阴影、颜色调整）
}

7. 与其他模糊效果对比

特性	`ZoomBlur`	`RadialBlur`	`DirectionalBlur`
模糊类型	中心向外扩散的缩放模糊	围绕中心点旋转/缩放模糊	单一方向运动模糊
性能消耗	中高（依赖 `length`）	中高	中
适用场景	镜头缩放特效、焦点爆炸	旋转转场、动态焦点	滑动拖影、动态列表