Wiggly
演示了如何使用通过Qt Quick Effect Maker （QQEM）创建的效果。
“Wiggly”演示了如何在您的Qt Quick 应用程序中使用通过Qt Quick Effect Maker （QQEM）创建的着色器效果。一个简单的Qt Quick 用户界面允许您更改波浪文本和波浪大小，以及应用电云效果。
运行示例
您可以通过以下方式运行该示例：
- Qt Creator
打开Welcome 模式，并从Examples 中选择该示例。有关更多信息，请参阅Qt Creator ：教程：构建和运行。
- Qt Extension for Visual Studio Code
在Command Palette 中运行Qt: Open Qt examples 命令，并从列表中选择该示例。有关更多信息，请参阅Qt Extension for Visual Studio Code ：教程：构建和运行。
应用程序基础
示例的大部分内容都包含在main.qml文件中，并在此文件中完成设置。首先，创建一个将用作效果源的项。
Rectangle {
id: sourceItem
anchors.centerIn: parent
width: textItem.width + 60 * mainWindow.px
height: textItem.height + 30 * mainWindow.px
color: "#d0d0d0d0"
border.color: "#d0ffffff"
border.width: 4 * mainWindow.px
radius: 20 * mainWindow.px
layer.enabled: true
layer.smooth: true
visible: false
Text {
id: textItem
anchors.centerIn: parent
text: wigglyTextField.text
font.family: font1.font.family
font.pixelSize: Math.min(200 * mainWindow.px, 0.8 * mainWindow.width / text.length)
}
}该项是一个Rectangle ，内部包含一个Text 元素。矩形的大小取决于文本中的字符数，以确保其能完美适配应用程序窗口。 这里的关键代码行是layer.enabled: true，它为特效创建了屏外纹理；以及visible: false，该设置会隐藏该元素，因为特效将替换其内容。如果该项可见，在没有抖动特效的情况下，它看起来像这样：
接下来，创建用于控制该效果的设置工具栏。
TextField {
id: wigglyTextField
anchors.verticalCenter: parent.verticalCenter
width: mainWindow.width * 0.3
text: "Wiggly"
}
Slider {
id: wigglyAmountYSlider
anchors.verticalCenter: parent.verticalCenter
width: mainWindow.width * 0.15
from: 0
to: 100
value: 40
}
Slider {
id: wigglyAmountXSlider
anchors.verticalCenter: parent.verticalCenter
width: mainWindow.width * 0.15
from: 0
to: 100
value: 20
}
Switch {
id: electricSwitch
anchors.verticalCenter: parent.verticalCenter
}这些组件使用 Qt Quick Controls，并堆叠在Row 元素内。第一个是TextField ，可用于更改抖动文本。接着是独立的Slider 元素，用于控制X和Y坐标方向上的波纹大小。最后一个控件是Switch ，用于启用电云效果。
WigglyEffect {
id: wigglyEffect
source: sourceItem
anchors.fill: sourceItem
timeRunning: true
wigglyAmountX: wigglyAmountXSlider.value
wigglyAmountY: wigglyAmountYSlider.value
electricCloudColor.a: electricSwitch.checked ? 1.0 : 0.0
wigglyShadows: 0.5
}此 WigglyEffect 应用于之前定义的sourceItem 。代码将timeRunning 设置为 true 以实现效果动画。最后，它将一些着色器效果属性与控制组件进行了关联。
您还可以查看WigglyEffect.qml 文件以了解该效果的详细信息。但该文件是由QQEM工具生成的，因此通常不应手动修改它。相反，请按照下一节的说明使用Qt Quick Effect Maker 。
在 QQEM 中修改效果
如上所述，WigglyEffect是通过Qt Quick Effect Maker 生成的。有关 QQEM 安装的更多信息，请参阅《 Qt Quick Effect Maker 安装指南》文档。
要修改特效：
- 在 QQEM 工具中打开特效项目文件（qep）。
- 修改效果节点、属性或着色器代码，并查看实时预览。
- 准备就绪后，将修改后的特效导出到您的应用程序中。
在 QQEM 中打开WigglyEffect/WigglyEffect.qep 项目时，您应看到如下界面：
在左侧，您可以看到包含该特效不同节点的Node view 。右上角的视图是Property view ，显示了特效的属性（API）。 右下角显示的是该效果的“Live view ”，其中包含当前选中的预览源项。若要查看包含实际内容的实时预览，请将“sourceItem ”中的图像添加到“Edit ” > “Preferences ”中的源列表中，并从预览工具栏的下拉列表中选择该图像。
要修改“Wiggly”特效的着色器代码，请双击“Wiggly”节点，或选中该节点并从“DESIGN ”模式切换至“CODE ”模式。然后选择“VERT ”选项卡以查看顶点着色器，该特效的大部分代码位于此处：
@mesh 63, 1
out vec3 wigglyColor;
float rainbowColor(float phase) {
return abs(sin(texCoord.x * 2.0 + iTime + phase));
}
@main
{
float wave = sin(vertCoord.x * 0.01 + iTime * 3.0);
vertCoord.x += wigglyAmountX * wave;
vertCoord.y += wigglyAmountY * wave;
const float tau = 6.28318530718;
wigglyColor.r = rainbowColor(0.0);
wigglyColor.g = rainbowColor(1.0/3.0 * tau);
wigglyColor.b = rainbowColor(2.0/3.0 * tau);
float shadowAmount = (wigglyAmountX + wigglyAmountY) * wave;
wigglyColor.rgb += shadowAmount * wigglyShadows * 0.01;
}第一行设置了ShaderEffect 的网格尺寸。这是必要的，因为默认情况下只有顶点位于角落，而“扭动”效果需要更多的移动顶点。然后，将顶点着色器设置为输出wigglyColor 变量，该变量稍后将在片段着色器中用于应用阴影。 接下来，引入一个名为rainbowColor 的函数，该函数返回相位处单个通道的颜色。
在 main 方法中，代码首先设置vertCoord ，使顶点位置沿正弦波移动。接下来的几行代码设置了波浪形彩虹的红、绿、蓝三个通道。最后两行代码则根据波形应用了一些阴影效果。
接下来，选择“FRAG ”选项卡以查看片段着色器代码：
@main
{
fragColor.rgb *= wigglyColor * fragColor.a;
}片段着色器非常简单，仅将当前源颜色与从顶点着色器接收的wigglyColor 相乘。
虽然更多处理工作本可以在片段着色器端完成，但由于顶点数量远少于片段（像素）数量，将代码放在顶点着色器中通常性能更佳。 某些工具（如Shadertoy）仅允许编写片段着色器。但由于Qt Quick 和 QQEM 也支持自定义顶点着色器，建议您充分利用这些功能。
当你修改这些着色器时，Live view 的输出会立即发生变化。要将修改后的着色器应用到示例程序中，请从菜单中选择“File ” > “Export ”。
现在你可以进一步探索 QQEM 的各项功能。例如，添加新节点、修改或添加新属性、在着色器代码中使用这些属性等。以下是一个示例，展示了将“LedScreen ”节点添加到节点图开头后的效果：
文件：
© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.
