企业官网建设流程全解析

静态文字可以通过规律运动或故意"破坏"来制造更强的视觉印象。这篇介绍三种效果：波浪跳动用正弦函数让字符依次起伏，倒影镜像把文字垂直翻转并叠加渐变遮罩，故障风则用 RGB 通道分离和随机位移模拟信号干扰。它们分别适合活泼标题、精致展示和赛博朋克风格界面。

涉及的核心知识点：

• 正弦函数Math.sin()驱动波浪动画
• Scale变换的yScale: -1实现垂直镜像
• 多层Text叠加模拟 RGB 通道分离
• Timer实现高频随机位移

Demo 1 波浪跳动

这个效果把一句话拆成单个字符，每个字符根据当前时间和自身索引做正弦运动，形成从左到右传播的波浪。

以下演示代码来自qml_text/Demo_TextWave.qml，为便于阅读，只展示了关键代码。

演示代码

import QtQuick import QtQuick.Layouts DemoPage { id: root title: "波浪跳动" description: "每个字符独立做正弦运动，形成波浪状的文字律动效果。" property string fullText: "Wave Text Animation" property int tickCount: 0 property real amplitude: 10.0 Row { Layout.alignment: Qt.AlignHCenter spacing: 0 Repeater { model: root.fullText.split('') Text { text: modelData font.pointSize: 24 font.bold: true color: "#1296FF" transform: Translate { y: root.amplitude * Math.sin(root.tickCount * 0.12 + index * 0.6) } } } } Timer { interval: 30 running: root.visible && root.opacity === 1 repeat: true onTriggered: root.tickCount++ } }

关键逻辑解析

波浪效果的核心公式是y = amplitude * sin(tickCount * 0.12 + index * 0.6)。其中amplitude是波峰高度，tickCount是整数计时器（每 30ms 加 1），乘以 0.12 后作为时间相位；index * 0.6是每个字符的相位差，索引越大相位越滞后，从而形成左右相继起伏的波浪感。这里用int tickCount代替早期的real t += 0.12写法，避免浮点数长时间累加产生的精度漂移问题——整数计数不存在累积误差，动画跑再久也不会出现波形抖动。

字符之间的spacing: 0让文字更紧凑，波浪的连续性更好。如果想让波浪更平缓，可以减小0.6；想让波浪更快，可以增大Timer的增量或减小interval。把波浪效果与音乐频谱结合，还能让文字起伏随音频节奏变化。

Demo 2 倒影镜像

这个 demo 将文字垂直翻转并叠加渐变遮罩，实现类似水面/镜面的倒影效果。主文字保持清晰，倒影从底部向上逐渐透明，显得自然。

以下演示代码来自qml_text/Demo_TextReflection.qml，为便于阅读，只展示了关键代码。

演示代码

import QtQuick import QtQuick.Layouts DemoPage { id: root title: "倒影镜像" description: "将文字垂直翻转并叠加渐变遮罩，实现类似水面/镜面的倒影效果。" Item { Layout.fillWidth: true Layout.preferredHeight: 160 Text { id: sourceText text: "倒影镜像" font.pointSize: 32 font.bold: true color: "#333" anchors.horizontalCenter: parent.horizontalCenter y: 20 } Text { id: reflectText text: sourceText.text font: sourceText.font color: sourceText.color anchors.horizontalCenter: parent.horizontalCenter y: sourceText.y + sourceText.height + 4 opacity: 0.35 transform: Scale { origin.x: reflectText.width / 2 origin.y: reflectText.height / 2 yScale: -1 } } Rectangle { anchors.horizontalCenter: parent.horizontalCenter y: reflectText.y width: reflectText.width height: reflectText.height color: "transparent" gradient: Gradient { GradientStop { position: 0.0; color: "#FFFFFF" } GradientStop { position: 1.0; color: "#00FFFFFF" } } } } }

关键逻辑解析

倒影的实现分三步：

1. 用sourceText显示正常文字。
2. 用reflectText复用主文字的text和font，并通过Scale { yScale: -1 }垂直翻转。
3. 在倒影上方叠一个从上到下的渐变矩形，顶部不透明、底部完全透明，让倒影底部自然淡出。

Scale的origin设在文字中心，保证翻转时位置正确。如果想让倒影更像水面，可以给倒影加轻微的透明度呼吸动画，或者让倒影在 y 方向上有轻微波动。

Demo 3 故障风效果

这个 demo 用三层文字叠加：中间是白色主文字，红色层向右下偏移，青色层向左上偏移。每隔 100ms 随机更新偏移量，并偶尔让主文字闪烁消失，模拟信号不稳定的效果。

以下演示代码来自qml_text/Demo_TextGlitch.qml，为便于阅读，只展示了关键代码。

演示代码

import QtQuick import QtQuick.Layouts DemoPage { id: root title: "故障风效果" description: "随机位移与 RGB 通道分离，模拟视频剪辑中常见的信号干扰 glitch 特效。" Rectangle { Layout.fillWidth: true Layout.preferredHeight: 140 color: "#111" radius: 8 Text { id: mainText text: "GLITCH 故障风" font.pointSize: 28 font.bold: true font.family: "Microsoft YaHei" color: "white" anchors.centerIn: parent } Text { text: mainText.text font: mainText.font color: "#FF0000" opacity: 0.75 anchors.centerIn: parent transform: Translate { id: redOffset } } Text { text: mainText.text font: mainText.font color: "#00FFFF" opacity: 0.75 anchors.centerIn: parent transform: Translate { id: cyanOffset } } Timer { interval: 100 running: root.visible && root.opacity === 1 repeat: true onTriggered: { redOffset.x = Math.random() * 14 - 7 redOffset.y = Math.random() * 6 - 3 cyanOffset.x = Math.random() * 14 - 7 cyanOffset.y = Math.random() * 6 - 3 mainText.opacity = Math.random() > 0.08 ? 1.0 : 0.0 } } } }

关键逻辑解析

故障风的核心是"随机"。每 100ms 触发一次Timer，给红色层和青色层分别生成 -7~7 像素之间的随机偏移。由于两层颜色是互补色（红/青），错位时会在主文字边缘产生色差条纹，看起来就像视频信号受到干扰。

mainText.opacity = Math.random() > 0.08 ? 1.0 : 0.0让主文字有 8% 的概率短暂消失，模拟老显示器接触不良时的闪烁。如果想让干扰更强烈，可以增加随机裁剪条（clip 一小块区域做水平位移），或者把interval缩短到 50ms。

运行验证

1. 用 Qt Creator 打开qml_text/CMakeLists.txt；
2. 按Ctrl+R运行项目；
3. 在主界面找到"波浪跳动"“倒影镜像”"故障风"三个卡片，观察循环效果。

扩展复用方向

• 把Demo_TextWave的amplitude、tickCount增量和相位差提取成属性，封装成可配置的波浪文字组件。
• 把Demo_TextReflection封装成ReflectText，支持调整倒影透明度、渐变高度和翻转方向。
• 把Demo_TextGlitch封装成GlitchText组件，暴露text、glitchIntensity、interval等属性。
• 给故障效果增加随机裁剪条，让干扰感更强烈。

已验证环境：

• Qt 版本：Qt 6.8.2、Qt 6.11.1
• 操作系统：Windows 11