メイン･コンテンツまでスキップ

Animated Image（アニメーション画像）

Animated Imageは、共通の識別子を共有する広範な画像を使用して、アニメーションを開始から終了まで実行することができます。 アニメーションを1回だけ実行することも、停止または一時停止するまでアニメーションをループさせることもできます。

シミュレータで実行されるAnimated Image

ウィジェット･グループ​

Animated Imageは、TouchGFX DesignerのImagesウィジェット･グループ内にあります。

TouchGFX DesignerのAnimated Image

プロパティ​

TouchGFX DesignerのAnimated Imageのプロパティは以下のとおりです。

プロパティ･グループプロパティの説明
Nameウィジェットの名前。 Nameは、TouchGFX Designerおよびコードで使用される一意の識別子です。
LocationXおよびYは、親を基準としてウィジェットの左上隅の位置を指定します。

WおよびHは、ウィジェットの幅と高さを指定します。
Animated Imageのサイズは関連付けられる画像のサイズから取得され、その画像を変更しない限り変更できません。

Lockは、ウィジェットを現在のX、Y、W、Hでロックするかどうかを指定します。
ウィジェットをロックすると、スクリーンを通したウィジェットとのインタラクションも無効になります。

Visibleは、ウィジェットの可視性を指定します。 ウィジェットを非表示にすると、スクリーンを通したウィジェットとのインタラクションも無効になります。
ImageFirst ImageおよびLast Imageは、アニメーションに使用する画像範囲の最初と最後の画像を指定します。
使用する画像には、img_01.png、img_02.png、img_03.png、img_04.png、img_05.png、img_06.png、img_07.pngなどの識別子が必要です。
AnimationStart on loadは、スクリーンの読み込み後すぐにアニメーションを開始するかどうかを指定します。

Reverse Animationは、アニメーションに使用する画像の順序を反転させて実行するかどうかを指定します。

Loop Animationは、アニメーションを連続して実行するかどうかを指定します。

Update Intervalは、アニメーション内で現在の画像から次の画像に移るまでの時間の長さを指定します。
AppearanceAlphaは、ウィジェットの透明度を指定します。 ウィジェットのアルファ値の範囲は、0～255です。 0は完全に透明で、255は塗りつぶされた状態です。
MixinsDraggableは、実行時にウィジェットをドラッグ可能にするかどうかを指定します。

ClickListenerは、ウィジェットがクリックされたときにコールバックを発行するかどうかを指定します。

FadeAnimatorは、ウィジェットがAlpha値への変更をアニメーション化できるかどうかを指定します。

MoveAnimatorは、ウィジェットがXおよびY値への変更をアニメーション化できるかどうかを指定します。

インタラクション​

以下のセクションでは、Animated Imageによってサポートされるアクションとトリガについて説明します。

アクション​

標準のウィジェット･アクション説明
Move widget時間の経過に伴ってウィジェットを新しい位置に移動します。
Fade widget時間の経過に伴ってウィジェットのアルファ値を変更します。
Hide widgetウィジェットを非表示にします（可視性をfalseに設定します）。
Show widget非表示のウィジェットを表示します（可視性をtrueに設定します）。

トリガ​

トリガ説明
Animation is doneAnimated Imageがアニメーションを完了しました。

パフォーマンス​

Animated Imageは画像描画に依存するため、ほとんどのプラットフォーム上で高速処理のウィジェットであると見なされます。
Animated Imageは、Update Intervalに従って画像を描画します。 このため、Update Intervalが短いほど多くの画像が描画されることになります。

画像描画のパフォーマンスの詳細については、「一般的なUIコンポーネントのパフォーマンス」セクションを参照してください。

例​

生成済みコード​

View基底クラスの生成済みコードを見ると、TouchGFX DesignerによるAnimated Imageの設定方法がわかります。

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() を呼び出して、再描画を行う必要があることを忘れないでください。

ユーザ･コード​

次のコード例は、アニメーション実行時のAnimated Imageのコールバックの設定方法を示しています。

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の例​

Animated Imageをさらに探索するには、次のUIテンプレートのいずれかを使用して、TouchGFX Designer内で新しいアプリケーションを作成してみてください。

TouchGFX DesignerのAnimated Image Example UIテンプレート

API参照​

Further reading
  • AnimatedImageクラスのAPI参照