【STM32F429】第21章 ThreadX GUIX窗口圖標滑動操做實現方法

時間 2021-01-11

標籤 php 框架 ide 函數佈局性能學習測試字體優化欄目 PHP 简体版

原文原文鏈接

最新教程下載：http://www.armbbs.cn/forum.php?mod=viewthread&tid=98429php

第21章 ThreadX GUIX窗口圖標滑動操做實現方法

本章節爲你們講解GUIX窗口圖標滑動操做實現方法，相似手機界面圖標滑動效果。框架

22.1初學者重要提示ide

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);
    }
}