1. 引言
: O9 a& F% T" ?
TouchGFX 是专用于 STM32 的图形界面设计软件，可基于低成本开发优秀的图形界面，而且它已变的越来越流行。为了帮助客户更加深入地理解和使用 TouchGFX ，本文针对TouchGFX 屏幕切换的实现方式进行了介绍。通过简析基本例程“Transition Example”的源码，剖析其中切屏实现的流程；并简介了如何使用 TouchGFX Designer 快捷地修改屏幕切换模式，希望能帮助客户更好地使用 TouchGFX 切屏特色与功能。

+ }: U- j2 e0 ~1 K2 n: n- O
2. TouchGFX 屏幕切换功能
2.1. TouchGFX Transition 类介绍
# X* r0 x" W$ ITouchGFX 框架中关于屏幕切换功能，实现了一个 Transition 基类和五个派生类，其关系如下图图 1 所示。其中，Transition 是切屏的抽象基类，定义了屏幕切换期间发生的基本事务。虚函数主要包括：Init（初始化）、tearDown（销毁，切屏完成需要的清理过程）、handleTickEvent（Tick 事件处理函数，主要用于完成切屏的动画效果）、invalidate（失效，用于重绘）等。五个派生类，其中 NoTransition 是最基本的派生类，它没有任何视觉效果，当前屏幕会直接被新屏内容替换。另外四个派生类则具有动画效果：BlockTransition、CoverTransition、SlideTransition 和 WipeTransition。
6 ]  F5 T6 r" R. q' T, K, W) G! Y
$ y( M6 m! i  Q  e
3 y" g& T5 t3 l9 n1 @9 {" i
BlockTransition 将屏幕分成 8x6 份块，在屏幕切换时会每次随机重绘其中的 2 个块，比较节省 MCU 资源，适合性能不高的 MCU；CoverTransition 的动画效果是“新屏画面从一个方向移动过来，直至完全覆盖原屏幕内容”；SlideTransition 的动画效果是“新屏与原屏拼接在一起，（原屏在前，新屏在后）从指定的方向滑过来”；WipeTransition 的动画效果是“新屏内容从一个方向展开（有一种擦除原屏，露出新屏的效果）”。BlockTransition、CoverTransition、SlideTransition 和 WipeTransition 均在 handleTickEvent 函数中实现各自风格的动画效果，tearDown 函数中则销毁切屏过程中创建的用于动画的临时快照控件等。下面我们首先生成Transition 例程，并对例程源码相关部分做进一步的分析。

3 v9 u8 v  u8 f5 z2 G& w
+ o1 Z- E$ X0 I2 a2 Y/ u! E) {2.2. TouchGFX Transition 例程
/ L) M/ @* {4 q" N4 D4 m* a运行 TouchGFX Designer，选择 Examples；通过 Select Board Setup 选择 STM32H735G DK 板（也可以是 TouchGFX 适用的其它板件）；从众多例程中选择“Transition Example”例程；将 Application name 改为 Transition_Example，如下图图 2 所示，然后点击 Create 创建工程。
  V6 F. a. n5 A4 O  o3 u# p
0 Z8 o+ L) r, n! ]

: \4 }% X, {( c
2 J) [- }0 n# k( @3 c6 k. d0 T
8 p- a) n0 Y6 }, x) r# u3 W/ | 进入 TouchGFX Designer 主界面后，会看到画布上有四个方向按钮和一个背景图片，如下 图图 3 所示。我们对界面不做更改，直接选择 Designer 右下角 (Run Target)在目标板上运行。该操作将会复制 TouchGFX 框架文件，生成配置文件、makefile、代码及资源文件（images、fonts、texts），然后编译链接、烧录目标板并运行。程序运行起来后，您可以熟悉一下该例程应用，该应用有 5 个屏幕画面，一个主屏及上下左右 4 个屏幕。点击方向按钮会进行相关方向的切屏。例程中切屏方式是 SlideTransition 模式。下面我们解读一下相关代码，再对Transition 模式进行修改。





2.3. 例程代码解读与切屏模式修改
+ G8 p# Y7 D! d' m1 d1 f* m8 a2.3.1. 关键代码流程
切屏操作是由点击按钮触发的，我们以右向按钮 为例，一步步查看调用过程。首先我们可以确定当前屏幕是 MainView 类，MainView 继承自 MainViewBase，该 MainViewBase 由Designer 自动生成。它已经包含了四个按钮、一个背景框和一个背景图片。按钮点击的处理函数为 buttonCallbackHandler。详细代码如下：
# a( [7 m- A/ {9 \2 l

1. // MainViewBase.hpp
   ; B' X  \0 u% \9 }9 V
2. class MainViewBase : public touchgfx::View<MainPresenter>
   3 A4 n( b/ v3 C" `) j
3. {
   & ~% m3 N/ F; D  {: i( H0 M$ Z( {
4. public:
   
5. MainViewBase();
   9 y+ z% `$ C( E# y9 H0 e
6. virtual ~MainViewBase() {}
   
7. virtual void setupScreen();
   
8. protected:
   5 e% x1 s6 h: K) ?: a9 w
9. FrontendApplication& application() {
   
10. return *static_cast<FrontendApplication*>(touchgfx::Application::getInstance());
    ' G! p- V' e9 X) a/ [; A* b
11. }
    
12. /* Member Declarations */
    3 P$ D7 H. z3 W) @6 K
13. touchgfx::Box __background;
    
14. touchgfx::Image backgroundMain;
    
15. touchgfx::Button buttonUp;
    6 A: g0 \& U/ c  V/ N
16. touchgfx::Button buttonDown;
    
17. touchgfx::Button buttonRight;
    
18. touchgfx::Button buttonLeft;
    1 N, D" x; k% M7 ?5 h
19. private:
    % E$ G3 ]+ V& U6 u2 o, V
20. /* Callback Declarations */
    
21. touchgfx::Callback<MainViewBase, const touchgfx::AbstractButton&>
    9 P- I' K$ v# N" x
22. buttonCallback;
    
23. /* Callback Handler Declarations */
    
24. void buttonCallbackHandler(const touchgfx::AbstractButton& src);
    
25. };

复制代码

我们再来看该按钮处理函数，这里右向按钮调用了 application 对象的

1. gotoRightScreenSlideTransitionEast 函数：
   
2. // MainViewBase.cpp
   
3. void MainViewBase::buttonCallbackHandler(const
   
4. touchgfx::AbstractButton& src)
   * t1 x+ [1 N# }/ e; n, ~: L8 g
5. {
   ' \& f( @9 A; C0 d8 f. h, d& [0 @
6. if (&src == &buttonUp)
   + B1 n( v" b% Z  a- Y! E; Y3 J2 I
7. {
   : n/ w" P& n, _3 Q, }) z2 {* Z
8. //GotoScreenUp
   + A' q. z$ f1 u* G! H, n
9. //When buttonUp clicked change screen to Up
   
10. //Go to Up with screen transition towards North
    
11. application().gotoUpScreenSlideTransitionNorth();
    ' c; K& ?( t/ G  {* Q8 B
12. }
    9 t! ?- h, k. ^( W: U& A3 _
13. else if (&src == &buttonDown)
    # \9 V- E6 ~0 z8 Q) F# P
14. {
    
15. //GotoScreenDown
    
16. //When buttonDown clicked change screen to Down
    
17. //Go to Down with screen transition towards South
    2 D' W1 ]) N' [3 }
18. application().gotoDownScreenSlideTransitionSouth();
    3 x4 ]4 ~9 ~# i; f  Y. \; |& K
19. }
    8 R3 Z& @  p- v( R+ E# [
20. else if (&src == &buttonRight)
    ' u/ L* O2 P$ u$ f( X) a
21. {
      ^- P0 ^0 ?$ i1 o* y. ]
22. //GotoScreenRight
    
23. //When buttonRight clicked change screen to Right
    # _8 x  }3 U1 I6 t" h. ^5 Z: k; v' s
24. //Go to Right with screen transition towards East
    
25. application().gotoRightScreenSlideTransitionEast();
    
26. }
    , ^) p1 o' @. c: H$ V4 d4 z
27. else if (&src == &buttonLeft)
    9 |0 {/ M, U/ w
28. {
    
29. //GotoScreenLeft
    
30. //When buttonLeft clicked change screen to Left
    
31. //Go to Left with screen transition towards West
    
32. application().gotoLeftScreenSlideTransitionWest();
    
33. }
    ; Z# Z; H3 A* r( d8 Z
34. }

复制代码

在 FrontendApplicationBase 中，gotoRightScreenSlideTransitionEast 接口通过transitionCallback 跳转到 gotoRightScreenSlideTransitionEastImpl 函数。具体过程，首先application 事务处理过程中会调用 handlePendingScreenTransition，再转至函数evaluatePendingScreenTransition，经 transitionCallback 完成对函数 gotoRightScreenSlideTransitionEastImpl 的调用（更多的关于 Callback 的介绍请参阅相关文档或 LAT）。如下图图 4 所示：
2 _+ \- X1 x% n5 o7 o
8 Q/ E+ L$ Y7 @% F
# O0 |2 O- [2 A# w& x# H( A

完整版请查看：附件 STM32GUI TouchGFX Transition 屏幕切换功能简介_v1.0.pdf (547.24 KB, 下载次数: 37)

2023-2-14 20:47 上传

点击文件名下载附件
3 t: h( l, R; n( m9 h$ t4 B+ C0 |

支持一波，已下载
/ q* ^+ c- n) t) ^* C" }# a# N; s- C