QML元素 - RadialBlur

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. 与其他模糊效果对比

特性RadialBlurDirectionalBlurGaussianBlur
模糊类型围绕中心点旋转/缩放模糊单一方向运动模糊全向高质量模糊
性能消耗中高(依赖 angle
适用场景转场动画、焦点特效滑动元素拖影静态背景虚化

总结

  • 核心作用:模拟旋转或缩放动态模糊,增强视觉冲击力。
  • 关键参数angle(强度)、center(焦点)、samples(平滑度)。
  • 适用场景:转场动画、按钮交互、游戏特效、动态焦点。
  • 优化建议:控制 angle 和 samples 平衡效果与性能,优先在桌面端使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

“不靠谱”的深度体验派

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值