在 QML 中,视觉效果组件(Visual Effects)能够为界面元素添加丰富的动态或静态特效,增强用户交互体验。以下是一些关键的视觉效果组件及其典型应用场景:
1. 基础视觉调整类
用于对现有元素的颜色、透明度等基础属性进行修改。
-
ColorOverlay
- 功能:用指定颜色覆盖子项,适用于高亮、状态提示、遮罩等。
- 示例:半透明的黑色覆盖层表示禁用状态:
Button {
text: "Submit"
enabled: false
ColorOverlay {
anchors.fill: parent
color: "rgba(0, 0, 0, 0.5)"
}
}
-
OpacityMask
- 功能:通过透明度的掩码控制子项的可见区域,常用于不规则裁剪。
- 示例:圆形头像裁剪:
Image {
source: "avatar.jpg"
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Rectangle {
width: 100
height: 100
radius: width/2
}
}
}
2. 动态效果类
结合动画实现动态交互效果(如悬停、点击反馈)。
-
DropShadow
- 功能:为元素添加投影,提升界面层次感。
- 示例:卡片阴影效果:
Rectangle {
width: 200
height: 100
color: "white"
layer.enabled: true
layer.effect: DropShadow {
radius: 5
samples: 16
color: "#40000000"
}
}
-
Glow
- 功能:为边缘添加发光效果,常用于按钮或高亮重要元素。
- 示例:按钮悬停发光:
Button {
text: "Hover Me"
background: Rectangle {
color: "blue"
layer.effect: Glow {
samples: 15
color: "lightblue"
spread: 0.2
}
}
}
3. 滤镜与模糊类
对图像或元素进行模糊、锐化等复杂处理。
-
GaussianBlur
- 功能:实现高斯模糊效果,适用于背景模糊或隐私保护。
- 示例:对话框背后的模糊层:
Rectangle {
anchors.fill: parent
color: "transparent"
GaussianBlur {
source: parent
samples: 16
radius: 8
deviation: 4
}
}
-
FastBlur
(性能优化模糊)- 功能:类似
GaussianBlur
,但牺牲部分质量以提升性能,适用于移动端。 - 示例:
- 功能:类似
FastBlur {
radius: 32
}
4. ShaderEffect(自定义着色器)
通过 GLSL 编写自定义特效,实现高级视觉效果。
- 功能:创建动态波浪、扭曲、颜色渐变流水等复杂效果。
- 示例:波浪动画效果:
ShaderEffect {
property real amplitude: 0.1
property real frequency: 0.05
property real time: 0
NumberAnimation on time { from: 0; to: Math.PI*2; duration: 2000; loops: Animation.Infinite }
fragmentShader: "
uniform lowp float qt_Opacity;
varying highp vec2 qt_TexCoord0;
uniform float amplitude;
uniform float frequency;
uniform float time;
void main() {
vec2 uv = qt_TexCoord0;
uv.y += sin(uv.x * frequency + time) * amplitude;
gl_FragColor = texture2D(source, uv) * qt_Opacity;
}"
}
5. 渐变与材质
LinearGradient
/RadialGradient
- 功能:创建线性/径向渐变背景或遮罩。
- 示例:按钮渐变色背景:
Rectangle {
width: 200
height: 50
gradient: LinearGradient {
GradientStop { position: 0; color: "orange" }
GradientStop { position: 1; color: "red" }
}
}
6. 3D变换与视角效果
Transform
/Rotation
/Scale
- 功能:通过 3D 旋转、缩放改变元素显示方式。
- 示例:卡片翻转动画:
Rectangle {
width: 200
height: 200
color: "blue"
transform: [
Rotation { id: rotation; axis { x: 0; y: 1; z:0 } },
Scale { xScale: 0.8 }
]
// 动画控制旋转:
NumberAnimation { target: rotation; property: "angle"; to: 180; duration: 500 }
}
使用注意事项
-
性能优化
- 复杂的视觉效果(如多重模糊和动画)可能影响性能,需谨慎在移动端使用。
- 使用
layer.enabled
或cache: true
缓存渲染结果。
-
硬件要求
- ShaderEffect 需要底层图形 API(如 OpenGL)支持。
-
组合使用
- 多个视觉效果可以叠加,例如
DropShadow
+GaussianBlur
实现立体卡片效果。
- 多个视觉效果可以叠加,例如
总结
QML 的视觉效果组件为 UI 设计提供了高度灵活性,从基础的色彩调整到复杂的自定义着色器,开发者可以根据具体需求选择合适的效果。关键是根据目标平台性能和用户体验平衡特效的复杂度。