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

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

https://qiita.com/usashirou/items/501b800c1c286d62289e

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

https://youtu.be/E5RraVX_IuA

## Movingwidget
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/f903d18b-83df-63b5-a2a7-f1945e5b1a03.png)
__Trigger：Button is clicked
Action：Move widget__ を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/857473a3-91f7-65d1-6861-8826fe208acc.png)
次に、移動先を指定します。
Choose widget to move：画像
Positon：移動先
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/fcef69a5-065c-14eb-c84e-9b630bdfa300.png)
以上でボタンをクリックすることで移動するようになります。
## handleTickEvent
今回は、image3を左から右へ移動させます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/60eabe9f-2fb1-9200-8173-3bd47117a29c.png)
__handleTickEvent__ は、TouchGFXで __コード生成後__ 、別途 __コード修正__ が必要になります。
今回は __VisualStudioCode__ を使用していますが、__STM32CubeIDE等__ でも __可能__ です。
__Generate Code__ または __Run Simulator__ で コードを生成し __Files__ から __生成されたコード__ を開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0cfcd812-831d-969b-8f92-c2c5a349aca3.png)
__ファイル⇒フォルダーを開く__ からフォルダーを指定して開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/367464bf-7502-09e7-5589-366d28757ca2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/9ce6107b-937b-ffa4-0e2a-18d62f4cf220.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/7feeee69-aee6-da6a-0317-fb13b677f24a.png)

今回は、__Screen1View.hpp__ と __Screen1View.cpp__ に __コード__ を __追加__ します。
- gui⇒include_gui⇒Screen1_screen⇒Screen1View.hpp
- gui⇒src⇒Screen1_screen⇒Screen1View.cpp

最初に、__Screen1View.hpp__ に __handleTickEvent__ を __追加__ します。
さらに、カウンターを __uint16_t__ で __追加__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/946a3ad6-7de7-fe02-0cc4-fcd7d6de28cb.png)
__Screen1View.hpp__

```
public:
    virtual void handleTickEvent();
protected:
    uint16_t cntr = 0;
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/382d4bf4-c987-ec5a-ce2e-830159e5885d.png)
次に、__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__ を __選択__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/d186632e-d8d1-7307-5fe4-db66634c4cf6.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/6bdb9b27-0f69-0707-d50f-179d3f8def37.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/5a5d416f-6ba2-025e-f0cf-797e75703ed3.png)
__W、H__ を __0__ にします。
0にすることで __FlexButton__ が __画面から消す__ ことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/0234cdc8-afba-9a8f-b3ea-9617c9d09f45.png)
画面から見えなくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/121ee2a4-428f-8fb6-145c-0a8e483c3aff.png)
## MoveAnimator
移動させるimageの __Mixins__ に __MoveAnimator__ の __チェック__ を入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a993a905-96dc-f157-78ab-850eac4eb235.png)
次に __Interactions__ を __＋__ で __追加__ します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/c0512ffa-86b4-a38c-619a-04400fe182a9.png)
__Trigger__ を __Button is clicked__
__CHoose clicked source__ を __flexButton1__
__Action__ を __Call new virtual function__
にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/8b220ea1-ecdf-39e8-a200-ebf26630f199.png)
# 非表示化
次に今回、移動させる __move_image__ を一度 __見えなく__ します。
__👁__ の __アイコン__ で __非表示__ にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/bcba155a-68b3-2e83-45fb-575c18ab1e42.png)
表示させるときは

    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);
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/a75782b2-ae94-f2f1-c6b0-428d18ec16cc.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/285344/3b800ae6-7915-5cc1-3e60-22bafe4de82f.png)
コンパイルすることでボタンをクリックすると画像が表示され移動します。

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