QML 文字入场动画：逐字弹出、逐字飞入、3D 飞入

发布时间：2026/7/23 8:40:17

QML 文字入场动画：逐字弹出、逐字飞入、3D 飞入
目录Demo 1 逐字弹出演示代码关键逻辑解析Demo 2 逐字飞入演示代码关键逻辑解析Demo 3 飞入文字演示代码关键逻辑解析运行验证扩展复用方向在上篇文章中介绍的入场效果主要依赖整体文字的位移、缩放和旋转。这篇继续往逐字控制和空间纵深方向扩展把一句话拆成单个字符按顺序弹出、让单个字符从四面八方飞入汇成一行、以及让整段文字从远处放大飞入再飞走。这些效果的核心都是把基础属性位移、缩放、透明度组合出更丰富的观感适合在标题页、启动屏、品牌展示等场景里提升视觉冲击力。涉及的核心知识点Repeater拆分文字为单字实现逐字动画PauseAnimation { duration: index * n }制造 stagger 交错效果transform: Translate改变变换原点控制飞入起点scaleopacity模拟远近透视Demo 1 逐字弹出把一整句话拆成单个字符每个字按顺序弹出并带独立的回弹和淡出。这个效果在标题展示、节日祝福、品牌口号里很常见。以下演示代码来自qml_text/Demo_TextCharPop.qml为便于阅读只展示了关键代码。演示代码import QtQuick import QtQuick.Layouts DemoPage { id: root title: 逐字弹出 description: 每个字符依次蹦入带回弹缓动常用于标题展示。 property string fullText: 逐字弹出 property var chars: fullText.split() // 每个字的动画总时长必须相同否则多轮循环后会因各自的 loop 周期不同而错位 property int staggerDelay: 120 property int loopDuration: 3300 Row { Layout.alignment: Qt.AlignHCenter spacing: 2 Repeater { model: root.chars.length Text { text: root.chars[index] font.pointSize: 48 font.bold: true color: #E91E63 scale: 0 opacity: 0 SequentialAnimation on scale { loops: Animation.Infinite running: root.visible root.opacity 1 PauseAnimation { duration: index * root.staggerDelay } NumberAnimation { from: 0; to: 1.4; duration: 200; easing.type: Easing.OutQuad } NumberAnimation { from: 1.4; to: 1.0; duration: 200; easing.type: Easing.OutBounce } PauseAnimation { duration: 1500 } NumberAnimation { from: 1.0; to: 0; duration: 200 } // 用末尾停顿补齐到统一的 loopDuration保证所有字符循环周期一致 PauseAnimation { duration: root.loopDuration - 2100 - index * root.staggerDelay } } SequentialAnimation on opacity { loops: Animation.Infinite running: root.visible root.opacity 1 PauseAnimation { duration: index * root.staggerDelay } NumberAnimation { from: 0; to: 1; duration: 100 } PauseAnimation { duration: 1800 } NumberAnimation { from: 1; to: 0; duration: 200 } // 与 scale 动画保持相同的总周期 PauseAnimation { duration: root.loopDuration - 2100 - index * root.staggerDelay } } } } } }关键逻辑解析核心思路是把fullText.split()拆成字符数组再用Repeater生成等量的Text。每个Text的动画开始处用PauseAnimation { duration: index * root.staggerDelay }利用Repeater给每个子项分配的index制造 stagger交错效果第 0 个字先出第 1 个字延迟 120ms第 2 个字延迟 240ms以此类推。scale动画先用OutQuad快速放大到 1.4 倍再用OutBounce落到 1.0做出蹦出来的感觉。opacity则简单淡入保持同步。容易踩坑的地方如果每个字符的循环周期不一样播放几轮后各字的相位就会错开出现乱弹出的现象。原实现把index * 120同时放在循环开头和结尾导致每个字的总周期是2100 index * 240各不相同。修复方法是引入统一的loopDuration并在循环末尾用loopDuration - 2100 - index * staggerDelay补齐停顿让所有字的SequentialAnimation周期完全相同这样每次重新循环时仍然保持初始的交错节奏。Demo 2 逐字飞入这个效果把一句话拆成单个字符每个字符从不同的方向左上、右下等飞入到最终位置汇成一行后再整体淡出。比单纯的逐字弹出多了空间位移适合做更活泼的标题展示。以下演示代码来自qml_text/Demo_TextCharFlyIn.qml为便于阅读只展示了关键代码。演示代码import QtQuick import QtQuick.Layouts DemoPage { id: root title: 逐字飞入 description: 每个字符从不同方向飞入汇成一行动感十足。 property string fullText: 逐字飞入 property var chars: fullText.split() // 每个字符的飞入方向固定保证循环一致 property var fromXs: [180, -160, 130, -120] property var fromYs: [-140, 130, -100, 110] // 统一循环周期避免不同 index 的字因 loop 时长不同而逐渐错位 property int staggerDelay: 100 property int loopDuration: 3300 Row { Layout.alignment: Qt.AlignHCenter spacing: 0 Repeater { model: root.chars.length Text { id: charItem text: root.chars[index] font.pointSize: 48 font.bold: true color: #00BCD4 opacity: 0 transform: Translate { id: charTranslate x: 0 y: 0 } SequentialAnimation { running: root.visible root.opacity 1 loops: Animation.Infinite ScriptAction { script: { charTranslate.x root.fromXs[index % root.fromXs.length] charTranslate.y root.fromYs[index % root.fromYs.length] charItem.opacity 0 } } PauseAnimation { duration: index * root.staggerDelay } ParallelAnimation { NumberAnimation { target: charTranslate; property: x; to: 0; duration: 500; easing.type: Easing.OutCubic } NumberAnimation { target: charTranslate; property: y; to: 0; duration: 500; easing.type: Easing.OutCubic } NumberAnimation { target: charItem; property: opacity; to: 1; duration: 300 } } PauseAnimation { duration: 1500 } NumberAnimation { target: charItem; property: opacity; to: 0; duration: 200 } // 用末尾停顿补齐到统一的 loopDuration保证所有字符循环周期一致 PauseAnimation { duration: root.loopDuration - 2200 - index * root.staggerDelay } } } } } }关键逻辑解析和第 1 篇的逐字弹出一样这里也是用Repeater拆分字符。区别在于每个字符额外挂载了一个Translate变换用来控制飞入的起点。fromXs和fromYs是两个固定数组存了四个方向通过index % root.fromXs.length让每个字轮流取一个方向保证循环时方向不变、效果稳定。动画分成三步先ScriptAction复位到起点再PauseAnimation按index * root.staggerDelay交错等待最后ParallelAnimation同时把 x、y 归 0 并把 opacity 提到 1。Easing.OutCubic让飞行末段减速落地感更自然。容易踩坑的地方和逐字弹出一样如果每个字符的循环总时长不一致运行一段时间后 stagger 就会错位出现有的字消失慢、动画不连贯的问题。这里同样用统一的loopDuration并在循环末尾用loopDuration - 2200 - index * staggerDelay补齐停顿确保所有字符周期相同。如果你想让飞入方向更随机或更可控可以把fromXs/fromYs改成函数生成或者暴露成组件属性让外部传入。Demo 3 飞入文字这个 demo 模拟的是文字从远处朝屏幕飞来的效果文字先很小、很透明然后快速放大并变清晰停留片刻后再继续放大飞走。配合底部进度条形成一组轮播标题。以下演示代码来自qml_text/Demo_TextFlyIn3D.qml为便于阅读只展示了关键代码。演示代码import QtQuick import QtQuick.Layouts DemoPage { id: root title: 飞入文字 description: 文字从远处飞来放大、短暂停留后飞走模拟3D文字逐个入场效果。 // 3D 飞入文字文字从远处飞来、放大、停留、飞走 property int currentIndex: -1 property var words: [飞入文字, 远处飞来放大, 暂停留后飞走, 模拟入场效果] Rectangle { Layout.fillWidth: true Layout.preferredHeight: 200 color: #0a0a0a radius: 8 clip: true Text { id: playText anchors.centerIn: parent font.pointSize: 48 font.bold: true color: #FFFFFF style: Text.Outline styleColor: #401296FF scale: 0.1 opacity: 0 property real depthGlow: 0 // 阴影层 layer.enabled: true SequentialAnimation { id: flyInAnimation loops: Animation.Infinite running: root.visible root.opacity 1 // onStarted 只在动画启动时触发一次而 infinite loop 不会重新触发它 // 因此每轮循环的初始化必须放在 ScriptAction 里执行 ScriptAction { script: { if (root.currentIndex root.words.length - 1) root.currentIndex else root.currentIndex 0 // console.log(root.currentIndex root.currentIndex) playText.text root.words[root.currentIndex] playText.scale 0.1 playText.opacity 0 } } ParallelAnimation { NumberAnimation { target: playText; property: scale; to: 1.0; duration: 600; easing.type: Easing.OutBack } NumberAnimation { target: playText; property: opacity; to: 1.0; duration: 400 } } PauseAnimation { duration: 800 } ParallelAnimation { NumberAnimation { target: playText; property: scale; to: 1.8; duration: 400; easing.type: Easing.InQuad } NumberAnimation { target: playText; property: opacity; to: 0; duration: 400 } } PauseAnimation { duration: 200 } } } // 底部进度指示 Row { anchors.bottom: parent.bottom anchors.bottomMargin: 16 anchors.horizontalCenter: parent.horizontalCenter spacing: 8 Repeater { model: root.words.length Rectangle { width: 24 height: 4 radius: 2 color: index root.currentIndex ? #1296FF : #333333 Behavior on color { ColorAnimation { duration: 200 } } } } } } }关键逻辑解析这个 demo 没有真正的 3D 变换而是用scale和opacity的变化模拟透视远处的东西看起来小且淡飞近后变大变清晰飞过头后又变大变淡直到消失。Easing.OutBack让文字到达正常大小时有一个轻微回弹增强飞入并停住的感觉Easing.InQuad则让飞走时加速模拟渐行渐远。SequentialAnimation设置loops: Animation.Infinite无限循环并通过running: root.visible root.opacity 1只在当前 demo 可见时播放。需要注意onStarted只在动画真正启动时触发一次无限循环不会重复触发它所以每轮循环前的文字切换和状态重置必须放在ScriptAction里执行这样每次循环都会先执行 ScriptAction再进入飞入/飞出的动画段。底部进度条用Repeater生成一组小矩形color根据index root.currentIndex切换配合Behavior on color做过渡。运行验证用 Qt Creator 打开qml_text/CMakeLists.txt按CtrlR运行项目在主界面找到逐字弹出“逐字飞入”飞入文字三个卡片观察循环效果。扩展复用方向把Demo_TextCharPop的fullText和staggerDelay提取为组件属性做成可配置的口号展示组件。把Demo_TextCharFlyIn的fromXs/fromYs改为组件属性让外部自定义每个字的飞入方向。把Demo_TextFlyIn3D的words数组暴露成接口做成可配置的广告语轮播组件。已验证环境Qt 版本Qt 6.8.2、Qt 6.11.1操作系统Windows 11

相关新闻

AM275x CBASS寄存器配置：QoS、防火墙与错误处理实战指南

AM275x CBASS寄存器配置：QoS、防火墙与错误处理实战指南

1. 项目概述：深入AM275x的CBASS寄存器世界在嵌入式系统开发，尤其是基于复杂SoC（片上系统）的设计中，我们常常会面对一个既基础又核心的挑战：如何与硬件进行高效、精确且安全的对话。这种对话的媒介&#xff…

2026/7/23 6:50:01 阅读更多 →
XSS挑战实战指南：从入门到防御

XSS挑战实战指南：从入门到防御

1. 项目概述：XSS挑战入门指南escape.alf.nu XSS Challenges是一套由安全研究员steike设计的跨站脚本攻击实战训练题集，包含从基础到进阶的多个关卡。这套题目通过模拟真实场景中的代码过滤机制，要求攻击者绕过防御成功执行alert(1)弹窗。不同…

2026/7/22 11:33:40 阅读更多 →
深入解析AM263x PRU-ICSS TX L2 FIFO：工业以太网数据转发核心机制

深入解析AM263x PRU-ICSS TX L2 FIFO：工业以太网数据转发核心机制

1. 项目概述与核心价值 在工业以太网和实时控制系统的开发中，数据从处理器核心到物理接口的传输路径是决定系统性能的生死线。这条路径上的任何延迟、抖动或数据丢失，都可能导致整个控制环路失效。AM263x Sitara™微控制器集成的PRU-ICSS（可编…

2026/7/20 23:49:12 阅读更多 →

最新新闻

GC26L31S 四通道 RS422 差分驱动器详解：管脚定义、关键参数与硬件设计指南

GC26L31S 四通道 RS422 差分驱动器详解：管脚定义、关键参数与硬件设计指南

一、芯片概述GC26L31S/P 是浙江芯麦科技推出的一款5V 单电源四通道差分线路驱动器，完全兼容 ANSI TIA/EIA-422-B 和 ITU V.11 标准。该芯片采用低功耗肖特基工艺设计，在保证高速传输的同时有效降低功耗，是工业控制、伺服电机、传感器数据传输…

2026/7/23 12:55:16 阅读更多 →
金融行业电子合同实践：从合规刚需到效率引擎的转型逻辑

金融行业电子合同实践：从合规刚需到效率引擎的转型逻辑

在电子合同的所有应用行业中，金融行业的特殊性最为突出。一方面，金融行业是监管最严格的领域之一，合同签署的合规要求远超其他行业；另一方面，金融行业的合同种类多、签署频率高、涉及金额大，对效率的追求同…

2026/7/23 12:55:15 阅读更多 →
海康威视摄像头网线连接线12孔m12转RJ45电源线

海康威视摄像头网线连接线12孔m12转RJ45电源线

在安防监控工程中，网络摄像头的部署常面临户外防水、远距离供电及信号完整性的多重挑战。海康威视摄像头网线连接线（12孔M12转RJ45电源线）是一种专为M12接口网络摄像头设计的集成化线缆组件，它将网络信号传输与直流电源供给整合于…

2026/7/23 12:55:15 阅读更多 →
聊正事偶尔也能开个玩笑 AI的能力边界

聊正事偶尔也能开个玩笑 AI的能力边界

AI的能力边界 —— 同一个机制，既让它强大，又让它不可靠Coding 与 Agent：驾驭 AI 的底层逻辑 第2篇从"预测 token"到"能力边界" 上一篇我们知道了，AI 不是在查询数据库，而是在"预测下一个 t…

2026/7/23 12:55:15 阅读更多 →
深入解析GPTM Timer B模式寄存器：嵌入式定时器配置与实战

深入解析GPTM Timer B模式寄存器：嵌入式定时器配置与实战

1. GPTM Timer B模式寄存器：嵌入式定时器的核心枢纽 在嵌入式系统开发中，尤其是涉及到电机控制、LED调光、通信协议时序生成等场景时，通用定时器（GPTM）往往是项目成败的关键。很多开发者初次接触Tiva™ TM4C这类微控制…

2026/7/23 12:55:15 阅读更多 →
计算机毕业设计之智慧学伴服务平台

计算机毕业设计之智慧学伴服务平台

在各学校的教学过程中，学生的课程是一项非常重要的事情。随着计算机多媒体技术的发展和网络的普及，“基于网络的学习模式”正悄无声息的改变着传统的教室学习模式，“智慧学伴服务平台”的研究和设计也成为教育技术领域的热点课题。采用当前流…

2026/7/23 12:54:15 阅读更多 →

日新闻

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表）

更多请点击： https://intelliparadigm.com 第一章：从单点好评到指数级传播：AI副业主理人必须掌握的4层口碑渗透模型（含ROI测算表） 当AI副业主理人不再仅满足于单次服务交付，而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25 阅读更多 →
AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析

更多请点击： https://codechina.net 第一章：AI写作开头钩子设计：为什么你的AI文案完读率不足18%？——基于2,346篇A/B测试报告的归因分析 在对2,346篇跨行业AI生成文案的A/B测试数据进行聚类分析后，我们发现&#xff1…

2026/7/23 0:01:26 阅读更多 →
Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具

Chitchatter完整指南：免费开源的终极点对点安全聊天工具 【免费下载链接】chitchatter Secure peer-to-peer chat that is serverless, decentralized, and ephemeral 项目地址: https://gitcode.com/gh_mirrors/ch/chitchatter Chitchatter是一款革命性的安…

2026/7/23 0:01:26 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/22 8:58:19 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 19:43:43 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/22 12:54:44 阅读更多 →

月新闻