跳轉到主要內容

動畫圖像

動畫圖像(Animated Image)能夠使用一系列共用的圖像從頭至尾運行動畫。 動畫圖像能夠在停止或暫停之前運行一次動畫或迴圈運行動畫。

在模擬器中運行的動畫圖像

小部件組​

動畫圖像位於TouchGFX Designer中的Images小部件組中。

TouchGFX Designer中的動畫圖像

屬性​

TouchGFX Designer中動畫圖像的屬性。

屬性組屬性說明
Name小部件的名稱。 Name是TouchGFX Designer和程式碼中使用的唯一識別碼。
LocationX 和Y 指定小部件左上角相對于其父的位置。

W 和 H 指定小部件的寬度和高度。
類比圖像的大小是從關聯圖像的大小獲取的，其大小無法更改（除非更改圖像）。

鎖定指定小部件是否應鎖定為其當前的X、Y、W和H。
如果鎖定小部件，還會禁止通過螢幕與小部件進行交互。

可見 指定小部件的可見性。 使小部件不可見還將禁用與小部件之間通過螢幕進行的交互。
Image第一個圖像和最後一個圖像指定用於動畫的一系列圖像中的第一個圖像和最後一個圖像。
所用圖像必須使用識別字，例如img_01.png、img_02.png、img_03.png、img_04.png、img_05.png、img_06.png、img_07.png等。
Animation載入時啟動指定動畫是否應在螢幕載入時立即啟動。

反向動畫指定用於動畫的圖像是否應按相反順序運行。

迴圈動畫指定動畫是否應連續運行。

更新間隔指定動畫中每個圖像間隔的時長。
AppearanceAlpha 指定小部件的透明度。 小部件的Alpha值介於0和255之間。 0為完全透明，255為實心。
Mixin可拖動 指定在運行時小部件是否可拖動。

ClickListener 指定小部件被點擊時是否會呼叫callback函數。

FadeAnimator 指定小部件是否可繪製其 Alpha 值變化的動畫。

MoveAnimator 指定小部件是否可繪製 X 和 Y 值變化的動畫。

交互​

下面的部分介紹了動畫圖像支援的操作和觸發條件。

操作​

標準小部件操作說明
Move widget隨時間的推移將小部件移動到新位置。
Fade widget隨時間的推移改變小部件的Alpha值。
Hide widget隱藏小部件（將可見性設置為false）。
Show widget使隱藏的小部件可見（將可見性設置為true）。

觸發條件​

觸發條件說明
Animation is done動畫圖像已完成其動畫。

性能​

動畫圖像取決於其圖像繪圖，在大部分平臺上，會將動畫圖像視為執行速度較快的小部件。
動畫圖像會按照更新間隔繪製圖像。 因此，較低的更新間隔會產生更多的圖像繪製。

關於圖像繪製性能的更多資訊，請閱讀通用UI元件性能一節。

範例​

生成程式碼​

在為View基類生成的程式碼中，可以看到TouchGFX Designer如何設置按鈕。

mainViewBase.cpp
#include <gui_generated/main_screen/mainViewBase.hpp>
#include "BitmapDatabase.hpp"

mainViewBase::mainViewBase()
{

    image.setXY(0, 0);
    image.setBitmap(touchgfx::Bitmap(BITMAP_BLUE_BACKGROUNDS_MAIN_BG_TEXTURE_480X272PX_ID));

    animatedImage.setXY(0, -104);
    animatedImage.setBitmaps(BITMAP_BUTTERFLY_01_ID, BITMAP_BUTTERFLY_72_ID);
    animatedImage.setUpdateTicksInterval(2);
    animatedImage.startAnimation(false, true, true);

    add(image);
    add(animatedImage);
}

void mainViewBase::setupScreen()
{

}
Tip
您可以在用戶程式碼中使用Animated Image類中的這些函數和其他可用函數。 如果更改小部件的外觀，請必須呼叫 animatedImage.invalidate() 以強制重繪。

用戶程式碼​

以下程式碼範例介紹了動畫完成後如何設置動畫圖像的callback函數：

mainView.hpp
#ifndef MAINVIEW_HPP
#define MAINVIEW_HPP

#include <gui_generated/main_screen/mainViewBase.hpp>
#include <gui/main_screen/mainPresenter.hpp>

class mainView : public mainViewBase
{
public:
    mainView();
    virtual ~mainView() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
protected:
    /*
     * Callback Declarations
     */
    touchgfx::Callback<mainView, const touchgfx::AnimatedImage&> animatedImageAnimationDoneCallback;

    /*
     * Callback Handler Declarations
     */
    void animatedImageAnimationDoneCallbackHandler(const touchgfx::AnimatedImage& src);
};

#endif // MAINVIEW_HPP
mainView.cpp
#include <gui/main_screen/mainView.hpp>

mainView::mainView():
    animatedImageAnimationDoneCallback(this, &mainView::animatedImageAnimationDoneCallbackHandler)
{

}

void mainView::setupScreen()
{
    mainViewBase::setupScreen();
    animatedImage.setDoneAction(animatedImageAnimationDoneCallback);
}

void mainView::tearDownScreen()
{
    mainViewBase::tearDownScreen();
}

void mainView::animatedImageAnimationDoneCallbackHandler(const touchgfx::AnimatedImage& src)
{
    if (&src == &animatedImage)
    {
        //execute code whenever the animation of animatedImage stops
    }
}

TouchGFX Designer範例​

如需進一步瞭解動畫圖像，請嘗試在TouchGFX Designer中使用下列UI範本之一創建新應用：

TouchGFX Designer中的動畫圖像UI範本

API參考​

Further reading
  • AnimatedImage類別的API參考