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

发布时间：2026/10/16 0:43:02

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/10/8 15:49:13 阅读更多 →
XSS挑战实战指南：从入门到防御

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

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

2026/10/14 9:39:10 阅读更多 →
深入解析AM263x PRU-ICSS TX L2 FIFO：工业以太网数据转发核心机制

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

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

2026/10/8 8:27:33 阅读更多 →

最新新闻

VMware Tools 10.0.6 在 CentOS 7.9 上的兼容性与手动部署指南

VMware Tools 10.0.6 在 CentOS 7.9 上的兼容性与手动部署指南

简介：本资源是VMware官方发布的Linux版VMware Tools 10.0.6离线安装包（tar.gz格式），专为无法稳定联网的虚拟机环境设计，面向Linux系统管理员、虚拟化运维工程师及高校实验教学人员，解决在线安装失败、源仓库…

2026/10/16 0:42:26 阅读更多 →
交互型文本匹配模型：从设计思路到工程落地的完整指南

交互型文本匹配模型：从设计思路到工程落地的完整指南

1. 文本匹配任务里，交互型模型到底在解决什么问题文本匹配这四个字，做搜索、推荐、问答、客服系统的人应该都不陌生。简单说，就是判断两段文本在语义上是不是一回事、有多相关。比如用户搜"怎么退火车票"，知识库里有一条…

2026/10/16 0:42:26 阅读更多 →
OpenCV与CNN车牌识别系统实现：从定位分割到字符识别的完整流程

OpenCV与CNN车牌识别系统实现：从定位分割到字符识别的完整流程

简介：一套基于OpenCV与卷积神经网络的车牌识别系统完整代码，面向计算机视觉毕业设计、课程项目及入门学习者，解决从车牌定位到字符识别的完整流程问题。压缩包内共包含两千个文件，除大量车牌样本图片外，还包含Python源…

2026/10/16 0:42:26 阅读更多 →
动态环境下视觉SLAM如何保持鲁棒？SOF-SLAM语义与几何双重校验解析

动态环境下视觉SLAM如何保持鲁棒？SOF-SLAM语义与几何双重校验解析

做视觉SLAM的人，多半都有过这种经历：实验室里跑得飞起的demo，一搬到地铁站、商场这种人多的地方，轨迹就开始画龙。移动的行人、旋转的推拉门、飞过的球——任何一个出现在画面里的动态物体，都可能让相机的位姿估计在一…

2026/10/16 0:42:26 阅读更多 →
R语言散点图边际分布图：ggExtra与手动拼图实战指南

R语言散点图边际分布图：ggExtra与手动拼图实战指南

1. 散点图搭配边际分布图，到底解决了什么痛点做过数据分析的人都有个体会：单纯一张散点图，能看两个变量之间有没有关系、关系大致是线性还是非线性、有没有明显的离群点，但它有个天然的短板——看不出单个变量自己的分布形态。比如…

2026/10/16 0:42:26 阅读更多 →
PyTorch DataLoader加载高光谱数据：从HDF5到Batch的实现与避坑

PyTorch DataLoader加载高光谱数据：从HDF5到Batch的实现与避坑

简介：面向PyTorch开发者的高光谱数据加载配套代码包，针对高光谱图像光谱通道多、数据量大的特点，提供基于数据集类与加载器的完整实现，解决批处理、多线程读取、随机打乱与数据增强等常见难题。包内包含印度松等公开数据集的读取示…

2026/10/16 0:41:26 阅读更多 →

日新闻

个人 AI Agent 平台接入 TaoToken：统一 Key 与 API 通道的配置大纲

个人 AI Agent 平台接入 TaoToken：统一 Key 与 API 通道的配置大纲

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 0:00:05 阅读更多 →
信号与系统频域分析作业解题指南

信号与系统频域分析作业解题指南

1. 作业背景与核心要求解析信号与系统作为电子信息类专业的核心基础课，其作业设计往往直接关联课程的核心知识框架。2026年春季第六次作业的布置，通常对应着课程进展到频域分析的关键阶段。根据常规教学进度推测，本次作业可能涉及以下核心内容…

2026/10/16 0:00:05 阅读更多 →
Django MVT实战：从零构建图书借阅系统，彻底搞懂Model-View-Template分层

Django MVT实战：从零构建图书借阅系统，彻底搞懂Model-View-Template分层

1. 从一个"四不像"的练手项目说起如果你已经看完了Django的官方教程前几章，跟着敲完了投票应用，大概会有一种"我好像会了，又好像什么都不会"的割裂感。教程里每个知识点都是拆开的——这一章讲模型，下一章讲视…

2026/10/16 0:00:05 阅读更多 →

周新闻

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战：ARIMA/LSTM全流程拆解与避坑指南

简介：基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码，面向计算机相关专业课程设计与期末大作业学生，以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程，…

2026/10/15 16:18:54 阅读更多 →
影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程：键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化，十个新手有八个栽在"往输入框里填东西"这件事上：要么填不进去，要么填了一半，要么直接把原来内容追加在后面。这背后的根因&…

2026/10/15 19:41:51 阅读更多 →
影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程：阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀：什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面，跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/15 13:48:15 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/15 0:14:36 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/14 22:45:47 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/15 9:49:14 阅读更多 →