TouchGFX 屏幕切换 Transition 功能全解 从原理到实战配置

TouchGFX 作为 STM32 平台专属的嵌入式 GUI 开发工具，凭借轻量高效、硬件加速的特性，成为工业 HMI、智能家居、车载设备等界面开发的主流方案。屏幕切换（Transition） 是 GUI 交互的核心环节，流畅的切屏动画能大幅提升产品体验。

本文基于 ST 官方 LAT1212 应用笔记，从 Transition 架构、官方例程解析、代码流程到可视化配置，全面讲解 TouchGFX 屏幕切换功能，帮你快速掌握切屏动画的实现与优化。

资料获取：【应用笔记】LAT1212 STM32GUI TouchGFX Transition 屏幕切换功能简介

1. TouchGFX Transition 架构与 5 种切屏效果

TouchGFX 针对屏幕切换设计了一套完整的Transition 类体系，由 1 个抽象基类 + 5 个派生类构成，兼顾无动画切换与多种动画效果，适配不同性能的 STM32 芯片。

1.1 Transition 基类核心作用

Transition 是切屏功能的抽象基类，定义了切屏的标准流程：

• init()：初始化切屏动画
• handleTickEvent()：逐帧驱动动画效果
• invalidate()：触发界面重绘
• tearDown()：切屏完成后清理临时资源（如屏幕快照）

2.2 5 种官方切屏效果对比

TouchGFX 内置 5 种 Transition 派生类，覆盖主流切屏需求：

2. 官方 Transition Example 例程快速搭建

TouchGFX Designer 提供了现成的Transition Example例程，基于该例程可快速上手切屏功能：

1. 打开 TouchGFX Designer，选择Examples；
2. 目标板选择STM32H735G-DK（或其他适配板卡）；
3. 选中Transition Example，设置工程名后点击Create；
4. 无需修改 UI，直接点击Run Target生成代码并下载到开发板；
5. 例程包含 1 个主屏 + 4 个方向屏，点击方向按钮可触发SlideTransition滑动切屏。

3. 切屏核心代码流程解析（MVP 架构）

TouchGFX 基于MVP 架构实现界面逻辑，切屏流程围绕View-Presenter-Model与 Transition 联动，核心调用链清晰：

3.1 按钮触发切屏

以右向切屏为例，按钮点击回调函数触发切屏接口：

void MainViewBase::buttonCallbackHandler(const touchgfx::AbstractButton& src)
{
    if (&src == &buttonRight)
    {
        // 调用滑动切屏（向东方向）
        application().gotoRightScreenSlideTransitionEast();
    }
}

3.2 切屏回调与实现

gotoRightScreenSlideTransitionEast通过回调函数，最终执行Impl实现函数：

void FrontendApplicationBase::gotoRightScreenSlideTransitionEastImpl()
{
    // 创建滑动切屏（EAST方向）
    makeTransition<RightView, RightPresenter, touchgfx::SlideTransition<EAST>, Model>(
        &currentScreen, &currentPresenter, frontendHeap, &currentTransition, &model);
}

3.3 核心模板函数 makeTransition

makeTransition是切屏的核心函数，完成旧界面销毁→新界面创建→绑定架构→激活动画全流程：

1. prepareTransition：销毁当前 View、Presenter、Transition；
2. 模板实例化：创建指定的 Transition、View、Presenter 对象；
3. 绑定 MVP：Presenter 与 Model 绑定，View 与 Presenter 绑定；
4. finalizeTransition：初始化新界面，启动切屏动画。

3.4 动画帧驱动

所有动画效果均在handleTickEvent中逐帧实现，以SlideTransition为例：通过缓动算法（cubicEaseOut）计算偏移量，控制新旧屏快照的位置，实现平滑滑动效果。

4. 可视化修改切屏效果（无需改代码）

实际开发中，无需深入底层代码，通过TouchGFX Designer可一键修改切屏效果：

1. 选中触发切屏的按钮（或控件）；
2. 打开右侧Interactions面板；
3. 选择触发动作Change screen；
4. 在Transition下拉菜单中选择目标效果（Slide/Cover/Wipe/Block/NoTransition）；
5. 设置切屏方向，重新生成代码即可生效。

5. 切屏功能开发要点

1. 按需选择 Transition 类型：低性能 MCU 优先用BlockTransition或NoTransition，高性能 MCU 可使用滑动、覆盖等动画。
2. 动画资源优化：切屏会创建屏幕快照，占用一定 RAM，大分辨率屏幕需注意内存分配。
3. 切屏流程规范：遵循销毁旧界面→创建新界面→绑定MVP→启动动画的标准流程，避免界面卡顿、内存泄漏。

TouchGFX 的 Transition 屏幕切换功能，将复杂的动画逻辑封装为标准化类体系，既支持底层代码自定义开发，也支持可视化快速配置，完美适配 STM32 全系列芯片。

从官方例程的滑动切屏，到自定义的分块、擦除效果，开发者可根据产品需求灵活选择，在有限的嵌入式资源下，实现流畅、精致的 GUI 交互体验。