【STM32F429】第21章 ThreadX GUIX視窗圖示滑動操作實現方法
最新教程下載：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429
第21章 ThreadX GUIX視窗圖示滑動操作實現方法
本章節為大家講解GUIX視窗圖示滑動操作實現方法，類似手機介面圖示滑動效果。
22.1初學者重要提示
22.2 GUIX Studio滑動介面佈局設計
22.3 GUIX視窗滑動效果實現
22.4 實驗例程設計框架
22.5 實驗例程
22.6 總結
21.1 初學者重要提示
- 務必看第11章學習GUIX Studio的使用方法和第12章學習GUIX Studio生成的程式碼移植到硬體平臺的方法。
- 本章僅作了800*480解析度大小的介面設計。
- 本章使用的圖示是帶透明通道的PNG格式圖片，測試發現GUIX Studio不支援帶透明通道的BMP格式圖片。
- 大家滑動的時候，可以看到圖示輕微的撕裂感（細看才能看出來），下一章節為大家分享GUIX雙緩衝的實現，配套例子介面效果和本章一樣。
21.2 GUIX Studio滑動介面佈局設計
與前章節略有不同，本章需要大家建立一個背景視窗和兩個透明的圖示視窗。實現類似手機的滑動效果，滑動切換兩個圖示介面。
21.2.1 整理需要的背景圖和圖示
需要的背景圖片和圖示都存到了工程V6-2026_GUIX Studio Window Sliding(only 800x480)裡面：
21.2.2 新增背景圖片和圖示到GUIX Studio
注：GUIX Studio工程的建立方法在本教程第11章有詳細說明。
新增背景圖和圖示到GUIX Studio：
新增進來的效果如下（部分截圖）：
雙擊任意新增的圖片，大家可以更新需要修改輸出格式，我們這裡使用預設配置：
21.2.3 建立背景視窗併為其新增背景圖片
背景視窗設定如下：
ID設定：GUIX_ID_WINDOW0
事件回撥：slide_win_event_process。
21.2.4 建立第1個桌面圖示視窗
建立的第1個桌面圖示視窗配置如下：
設定透明效果很重要，這樣可以僅顯示桌面視窗上的圖示控制元件，實現類似手機的介面效果。新增Pixelmap button：
Pixelmap Button設定如下：
主要是將正常顯示效果設定為點陣圖。然後在此點陣圖下面新增文字控制元件prompt：
Prompt控制元件的配置如下：
主要是設定為透明，並設定字型為NewFont1。NewFont1的設定如下：
整體新增完畢的效果如下：
21.2.5 建立第2個桌面圖示視窗
第2個桌面視窗的建立方法和第1個桌面視窗是一樣的，整體新增完畢的效果如下：
21.3 GUIX視窗滑動效果實現
21.3.1 第1步：建立背景視窗和兩個桌面視窗並啟動Animation動畫
實現的程式碼如下：
/* ********************************************************************************************************* * 函 數 名: MainTask * 功能說明: GUI主函式 * 形 參: 無 * 返 回 值: 無 ********************************************************************************************************* */ void MainTask(void) { /* 避免上電後瞬間的撕裂感 */ LCD_SetBackLight(0); /* 觸控校準函式預設是註釋掉的，電阻屏需要校準，電容屏無需校準。如果使用者需要校準電阻屏的話，執行 此函式即可，會將觸控校準引數儲存到EEPROM裡面，以後系統上電會自動從EEPROM裡面載入。 */ #if 0 LCD_SetBackLight(255); LCD_InitHard(); TOUCH_Calibration(2); #endif /*初始化配置 */ gx_initconfig(); /* 配置顯示屏 */ gx_studio_display_configure(DISPLAY_1, stm32f4_graphics_driver_setup_565rgb, LANGUAGE_ENGLISH, DISPLAY_1_THEME_1, &root); /* 建立視窗 */ gx_studio_named_widget_create("window", (GX_WIDGET *)root, (GX_WIDGET **)&pScreen); gx_studio_named_widget_create("window_1", (GX_WIDGET *)GX_NULL, (GX_WIDGET **)&pScreen1); gx_studio_named_widget_create("window_2", (GX_WIDGET *)GX_NULL, (GX_WIDGET **)&pScreen2); /* pScreen2附加到pScreen，即作為其子視窗 */ gx_widget_attach((GX_WIDGET *)pScreen, (GX_WIDGET *)pScreen2); /* 建立動畫功能並啟動 */ gx_animation_create(&slide_animation); slide_animation_start((GX_WINDOW *)pScreen); /* 顯示根視窗 */ gx_widget_show(root); /* 啟動GUIX */ gx_system_start(); tx_thread_sleep(100); LCD_SetBackLight(255); while(1) { tx_thread_sleep(20); } }
- gx_studio_named_widget_create
通過此函式建立了三個視窗。
- gx_widget_attach
pScreen2附加到pScreen，即作為其子視窗。
- gx_animation_create
建立Animation動畫功能。
- slide_animation_start
啟動Animation動畫功能，這裡要特別注意，啟動的動畫視窗是pScreen。這個函式是我們使用者自己建立，詳細實現看下一步。
21.3.2 第2步：Animation動畫功能實現
程式碼如下：
/* ********************************************************************************************************* * 函 數 名: slide_animation_start * 功能說明: 啟動滑動 * 形 參: 無 * 返 回 值: 無 ********************************************************************************************************* */ static VOID slide_animation_start(GX_WINDOW *window) { GX_ANIMATION_INFO slide_animation_info = {0}; slide_animation_info.gx_animation_parent = (GX_WIDGET *)window; slide_animation_info.gx_animation_style = GX_ANIMATION_SCREEN_DRAG | GX_ANIMATION_HORIZONTAL | GX_ANIMATION_WRAP | GX_ANIMATION_CUBIC_EASE_OUT; slide_animation_info.gx_animation_id = GX_NEXT_ANIMATION_ID; slide_animation_info.gx_animation_frame_interval = 2; slide_animation_info.gx_animation_steps = 10; slide_animation_info.gx_animation_slide_screen_list = win_list; gx_animation_drag_enable(&slide_animation, (GX_WIDGET *)window, &slide_animation_info); }
- GX_ANIMATION_INFO slide_animation_info = {0}
將結構體區域性變數清零，防止部分沒有初始化的結構體成員是隨機值。
- 成員gx_animation_style
- GX_ANIMATION_SCREEN_DRAG
使能滑動功能。
-
- GX_ANIMATION_HORIZONTAL
使能水平方向滑動。
-
- GX_ANIMATION_WRAP
將多個滑動介面設定成環形的，依次執行滑動。
-
- GX_ANIMATION_WRAP
將多個滑動介面執行順序設定成環形的，依次執行滑動。
-
- GX_ANIMATION_CUBIC_EASE_OUT
動畫執行效果，當前GUIX支援的動畫效果如下：
/* flag that can be used in combination with translate animation */ #define GX_ANIMATION_PUSH_STACK 0x4000U #define GX_ANIMATION_DETACH 0x8000U #define GX_ANIMATION_EASING_FUNC_MASK 0x10f0U #define GX_ANIMATION_BACK_EASE_IN 0x0010U #define GX_ANIMATION_BACK_EASE_OUT 0x0020U #define GX_ANIMATION_BACK_EASE_IN_OUT 0x0030U #define GX_ANIMATION_BOUNCE_EASE_IN 0x0040U #define GX_ANIMATION_BOUNCE_EASE_OUT 0x0050U #define GX_ANIMATION_BOUNCE_EASE_IN_OUT 0x0060U #define GX_ANIMATION_CIRC_EASE_IN 0x0070U #define GX_ANIMATION_CIRC_EASE_OUT 0x0080U #define GX_ANIMATION_CIRC_EASE_IN_OUT 0x0090U #define GX_ANIMATION_CUBIC_EASE_IN 0x00a0U #define GX_ANIMATION_CUBIC_EASE_OUT 0x00b0U #define GX_ANIMATION_CUBIC_EASE_IN_OUT 0x00c0U #define GX_ANIMATION_ELASTIC_EASE_IN 0x00d0U #define GX_ANIMATION_ELASTIC_EASE_OUT 0x00e0U #define GX_ANIMATION_ELASTIC_EASE_IN_OUT 0x00f0U #define GX_ANIMATION_EXPO_EASE_IN 0x1000U #define GX_ANIMATION_EXPO_EASE_OUT 0x1010U #define GX_ANIMATION_EXPO_EASE_IN_OUT 0x1020U #define GX_ANIMATION_QUAD_EASE_IN 0x1030U #define GX_ANIMATION_QUAD_EASE_OUT 0x1040U #define GX_ANIMATION_QUAD_EASE_IN_OUT 0x1050U #define GX_ANIMATION_QUART_EASE_IN 0x1060U #define GX_ANIMATION_QUART_EASE_OUT 0x1070U #define GX_ANIMATION_QUART_EASE_IN_OUT 0x1080U #define GX_ANIMATION_QUINT_EASE_IN 0x1090U #define GX_ANIMATION_QUINT_EASE_OUT 0x10a0U #define GX_ANIMATION_QUINT_EASE_IN_OUT 0x10b0U #define GX_ANIMATION_SINE_EASE_IN 0x10c0U #define GX_ANIMATION_SINE_EASE_OUT 0x10d0U #define GX_ANIMATION_SINE_EASE_IN_OUT 0x10e0U
大家在GUIX Studio的ScreenFlow上可以產看實際執行曲線效果：
- 成員gx_animation_frame_interval
定義每幀執行的時間間隔，單位GUIX Timer執行週期，預設值在gx_port.h。
- 成員gx_animation_steps
配置整個滑動需要的幀數，或者說步數，即從動畫開始到動畫結束需要的幀數。數值越大，效果越細膩，但對效能要求也越高。
- 成員gx_animation_slide_screen_list
定義要執行滑動的視窗列表。
- 函式gx_animation_drag_enable
使能滑動功能。
21.3.3 第3步：優化Animation動畫效果
程式碼如下，主要功能是避免使用者觸控圖示時也影響圖示滑動。
/* ********************************************************************************************************* * 函 數 名: slide_win_event_process * 功能說明: 一定程度上可以避免觸控圖示時也引起圖示滑動 * 形 參: -- * 返 回 值: 無 ********************************************************************************************************* */ UINT slide_win_event_process(GX_WINDOW *window, GX_EVENT *event_ptr) { switch (event_ptr->gx_event_type) { case GX_EVENT_SHOW: slide_animation_start(window); return gx_widget_event_process(window, event_ptr); case GX_EVENT_HIDE: gx_animation_drag_disable(&slide_animation, (GX_WIDGET *)window); return gx_widget_event_process(window, event_ptr); default: return gx_window_event_process(window, event_ptr); } }
21.4 實驗例程設計框架
本章例程的重點是視窗滑動效果的實現。
21.5 實驗例程
（注，如果是電阻屏，需要做觸控校準，校準方法看本教程附件章節A）
配套例子：
本章節配套了如下兩個例子供大家移植參考：
- V6-2025_Window Sliding(only 800x480)
GUIX Studio生成的程式碼在硬體平臺實際執行的工程，含有MDK AC5和AC6四個版本工程。
- V6-2026_GUIX Studio Window Sliding(only 800x480)
GUIX Studio工程模板，設計介面後，生成的檔案可直接新增到MDK，IAR和GCC軟體平臺使用。
實驗目的：
- 本章主要學習視窗圖示滑動功能。
實驗內容：
- 共建立瞭如下幾個任務，通過按下按鍵K1可以通過串列埠列印任務堆疊使用情況
App Task Start任務 ：啟動任務，這裡用作BSP驅動包處理。
App Task MspPro任務 ：訊息處理，這裡用作LED閃爍。
App Task UserIF任務 ：按鍵訊息處理。
App Task GUI任務 ：GUI應用任務。
App Task STAT任務 ：統計任務。
App Task IDLE任務 ：空閒任務。
GUIX System Thread ：GUI系統任務。
System Timer Thread任務：系統定時器任務。
實驗效果：
GUIX Studio的介面設計如下：
串列埠列印任務執行情況：
MDK AC5和AC6工程可以串列埠列印任務執行情況：按開發板的按鍵K1可以列印，波特率 115200，資料位 8，奇偶校驗位無，停止位 1：
21.6 總結
本章節主要為大家講解了滑動效果的實現，推薦大家熟練掌握本章節的函式用法。