TouchGFXを使おう4～アニメーション～

TouchGFXを使おう3～画面遷移編～の続きです。

今回は、アニメーションを作ってみましょう。

アニメーション

当初handleTickEventのみの予定でしたが、Youtubeに合わせた内容及びコードに変更しました。
TouchGFX入門：ウィジェットを移動 / アニメーション化する3つの方法

Movingwidget

Trigger：Button is clicked
Action：Move widget を選択します。

次に、移動先を指定します。
Choose widget to move：画像
Positon：移動先

以上でボタンをクリックすることで移動するようになります。

handleTickEvent

今回は、image3を左から右へ移動させます。

handleTickEvent は、TouchGFXで コード生成後 、別途 コード修正 が必要になります。
今回は VisualStudioCode を使用していますが、STM32CubeIDE等 でも 可能 です。
Generate Code または Run Simulator で コードを生成し Files から 生成されたコード を開きます。

ファイル⇒フォルダーを開く からフォルダーを指定して開きます。

今回は、Screen1View.hpp と Screen1View.cpp に コード を 追加 します。

• gui⇒include_gui⇒Screen1_screen⇒Screen1View.hpp
• gui⇒src⇒Screen1_screen⇒Screen1View.cpp

最初に、Screen1View.hpp に handleTickEvent を 追加 します。
さらに、カウンターを uint16_t で 追加 します。

Screen1View.hpp

public:
    virtual void handleTickEvent();
protected:
    uint16_t cntr = 0;

次に、Screen1View.cpp に 動作内容 を 追加 します。
image3 の表示をするため、最初に invalidate を行い
次に、setX で X座標 を 指定 します。

void Screen1View::handleTickEvent()
{
    if(cntr<900)
    {
        image3.setX(cntr -100);
        cntr++;
    }else{
        cntr=0;
    }
    image3.invalidate();
}

以上で、指定位置まで移動するプログラムが完成しました。

FlexButton

次はFlexButtonを使い、クリックすることで動作するボタンを製作します。
最初に透明なボタンを作ります。
Buttons から FlexButton を 選択 します。



W、H を 0 にします。
0にすることで FlexButton が 画面から消す ことができます。

画面から見えなくなりました。

MoveAnimator

移動させるimageの Mixins に MoveAnimator の チェック を入れます。

次に Interactions を ＋ で 追加 します。

Trigger を Button is clicked
CHoose clicked source を flexButton1
Action を Call new virtual function
にします。

非表示化

次に今回、移動させる move_image を一度 見えなく します。
👁 の アイコン で 非表示 にします。

表示させるときは

image.setVisible(true);

で表示させます。

コード追加

ここでコード生成を行い以下を追加します。
TouchGFX\gui\include\gui\screen1_screen\Screen1View.hpp

virtual void function1();

TouchGFX\gui\src\screen1_screen\Screen1View.cpp

void Screen1View::function1()
{
    move_image.setVisible(true);
    move_image.clearMoveAnimationEndedAction();
    move_image.startMoveAnimation(50 , 300, 300, touchgfx::EasingEquations::linearEaseNone, touchgfx::EasingEquations::linearEaseOut);
}

コンパイルすることでボタンをクリックすると画像が表示され移動します。

TouchGFXを使おう4～画面遷移編～に続きます。