ミックスイン
ミックスインとはウィジェットの機能を拡張するクラスで、移動やアルファ値の変化をアニメーション化することなどができます。 Move AnimatorおよびFade Animatorミックスインは、TouchGFX Designerインタラクションの基本となるもので、移動やアルファの変化をアニメーション化するコードを生成できます。 これらのミックスインは、TouchGFX Designerを介して、あるいはユーザ･コードで手動でウィジェットに追加されます。
Move Animator
Move Animatorミックスインにより、ウィジェットは、現在の位置から指定された最終位置までの移動をアニメーション化できるようになります。 X方向とY方向の移動はどちらも、EasingEquationを設定することで記述できます。
TouchGFX Designerでミックスインを適用可能にするには、下の画像に示すように、所定のウィジェットのプロパティの"Mixins"セクションでこれを有効にします。
Move Animatorミックスインは、ウィジェットを移動させるインタラクションが作成されると、そのウィジェットに自動的に適用されます。
TouchGFX DesignerでMove Animatorミックスインを有効化
Move Animatorミックスインを有効化すると、次に示すように、生成されたウィジェットの宣言署名が変更されます。ここでは、ボックスのMove Animatorミックスインが有効化されています。
touchgfx::MoveAnimator< touchgfx::Box > box;
ユーザ･コードでのMove Animatorの使用
ウィジェットにMove Animatorミックスインが適用されると、そのウィジェットはある位置から別の位置への移動をアニメーション化できるようになります。 このセクションでは、この新機能の使用方法の実例を示します。
TouchGFX Designerでボックス･ウィジェットに対してMove Animatorミックスインを有効化すると、startMoveAnimationメソッドが使用可能になります。 このメソッドは5つの引数を以下の順序でとります。
- endX: ウィジェットの移動先となるその親を基準とするX位置
- endY: ウィジェットの移動先となるその親を基準とするY位置
- duration: X軸とY軸での移動にかかる時間（ティック）
- xProgressionEquation: X軸での移動に使用されるEasingEquation
- yProgressionEquation: Y軸での移動に使用されるEasingEquation
次に、X軸とY軸の両方で線形のEasingEquationを使用して、40ティックの間にX: 0, X: 0の座標に移動する例を示します。
box.startMoveAnimation(0, 0, 40, EasingEquations::linearEaseNone, EasingEquations::linearEaseNone);
Further reading
ユーザ･コードでのコールバック実装
Move Animatorミックスインがアニメーションを完了すると、コールバックが発行されます。 このセクションでは、このコールバックの実装方法を示します。
TouchGFX Designerでボックス･ウィジェットに対してMove Animatorミックスインを有効化したら、その次のステップでは、コールバックと関数の宣言を追加して、ボックス･ウィジェットがある基底クラスから継承されるスクリーン･ヘッダ･クラス･ファイルでイベントを処理します。
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for move animation ended on a Box
void boxMoveAnimationEndedHandler(const touchgfx::MoveAnimator<Box>& comp);
protected:
// Declaring callback type of MoveAnimator<Box>
Callback <Screen1View, const touchgfx::MoveAnimator<Box>&> boxMoveAnimationEndedCallback;
};
次に、イベントを処理するためのコールバック宣言と関数をビュー･オブジェクトにバインドする必要があります。
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxMoveAnimationEndedCallback(this, &Screen1View::boxMoveAnimationEndedHandler) { }
その次のステップは、移動アニメーションが終了したときにどのコールバックを使用するのかを、ボックス･ウィジェットに指示することです。これはsetupScreen()内で実行し、スクリーンに入るたびにコールバックが設定されるようにします。
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setMoveAnimationEndedAction(boxMoveAnimationEndedCallback);
}
最後のステップは、boxMoveAnimationEndedHandler関数の実装です。この関数はコールバックを処理します。 良い習慣として、移動アニメーションの終了したボックスが本当に'box'であることを確認します。
Screen1View.cpp
void Screen1View::boxMoveAnimationEndedHandler(const touchgfx::MoveAnimator<touchgfx::Box>& b)
{
if (&b == &box)
{
//Implement what should happen when move animation on 'box' has ended here.
}
}
API参照
Further reading
Fade Animator
Fade Animatorミックスインにより、ウィジェットは、現在のアルファ値から指定された目標のアルファ値までのアルファ値の減衰をアニメーション化できるようになります。 減衰率はEasingEquationを設定することで記述できます。
Note
TouchGFX Designerでミックスインを適用可能にするには、下の画像に示すように、所定のウィジェットのプロパティの"Mixins"セクションでこれを有効にします。
Fade Animatorミックスインは、ゼロより大きい時間をかけてウィジェットを減衰させるインタラクションが追加されると、そのウィジェットに自動的に適用されます。
TouchGFX DesignerでFade Animatorミックスインを有効化
Fade Animatorミックスインを有効化すると、次に示すように、生成されたウィジェットの宣言署名が変更されます。ここでは、ボックスのFade Animatorミックスインが有効化されています。
touchgfx::FadeAnimator< touchgfx::Box > box;
ユーザ･コードでのFade Animatorの使用
ウィジェットにFade Animatorミックスインが適用されると、そのウィジェットはある設定から別の設定へのアルファ値の変化をアニメーション化できるようになります。 このセクションでは、この新機能の使用方法の実例を示します。
TouchGFX Designerでボックス･ウィジェットに対してFade Animatorミックスインを有効化すると、startFadeAnimationメソッドが使用可能になります。 このメソッドは3つの引数を以下の順序でとります。
- endAlpha: アニメーションの完了時のウィジェットのアルファ値
- duration: 新しいアルファ値までのアニメーションにかかる時間（ティック）
- alphaProgressionEquation: アルファ値の変化率に使用されるEasingEquation
次に、線形のEasingEquationを使用して、40ティックの間にアルファ値が0まで変化する例を示します。
box.startFadeAnimation(0, 40, EasingEquations::linearEaseNone);
linearEaseNoneイージング式はデフォルトなので、引数として指定する必要はありません。 使用可能なイージング式のリストについては、下のリンクを参照してください。
Further reading
ユーザ･コードでのコールバック実装
Fade Animatorミックスインがアニメーションを完了すると、コールバックが発行されます。 このセクションでは、このコールバックの実装方法を示します。
TouchGFX Designerでボックス･ウィジェットに対してFade Animatorミックスインを有効化したら、その次のステップでは、コールバックと関数の宣言を追加して、ボックス･ウィジェットがある基底クラスから継承されるスクリーン･ヘッダ･クラス･ファイルでイベントを処理します。
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for fade animation ended on a Box
void boxFadeAnimationEndedHandler(const touchgfx::FadeAnimator<Box>& comp);
protected:
// Declaring callback type of FadeAnimator<Box>
Callback <Screen1View, const touchgfx::FadeAnimator<Box>&> boxFadeAnimationEndedCallback;
};
次に、イベントを処理するためのコールバック宣言と関数をビュー･オブジェクトにバインドする必要があります。
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxFadeAnimationEndedCallback(this, &Screen1View::boxFadeAnimationEndedHandler) { }
その次のステップは、移動アニメーションが終了したときにどのコールバックを使用するのかを、ボックス･ウィジェットに指示することです。これはsetupScreen()内で実行し、スクリーンに入るたびにコールバックが設定されるようにします。
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setFadeAnimationEndedAction(boxFadeAnimationEndedCallback);
}
最後のステップは、boxFadeAnimationEndedHandler関数の実装です。この関数はコールバックを処理します。 良い習慣として、減衰アニメーションの終了したボックスが本当に'box'であることを確認します。
Screen1View.cpp
void Screen1View::boxFadeAnimationEndedHandler(const touchgfx::FadeAnimator<touchgfx::Box>& b)
{
if (&b == &box)
{
//Implement what should happen when fade animation on 'box' has ended here.
}
}
API参照
Further reading
ClickListener
Click Listenerミックスインにより、コールバックでウィジェットを拡張することで、ウィジェットがタッチ入力に応答できるようになります。
TouchGFX Designerでミックスインを適用可能にするには、下の画像に示すように、所定のウィジェットのプロパティの"Mixins"セクションでこれを有効にします。
TouchGFX DesignerでClick Listenerミックスインを有効化
Click Listenerミックスインを有効化すると、次に示すように、生成されたウィジェットの宣言署名が変更されます。ここでは、ボックスのClick Listenerミックスインが有効化されています。
touchgfx::ClickListener< touchgfx::Box > box;
ユーザ･コードでのコールバック実装
Click Listenerミックスインがタッチ･イベントを受信すると、コールバックが発行されます。 このセクションでは、このコールバックの実装方法を示します。
TouchGFX Designerでボックス･ウィジェットに対してClick Listenerミックスインを有効化したら、その次のステップでは、コールバックと関数の宣言を追加して、ボックス･ウィジェットがある基底クラスから継承されるスクリーン･ヘッダ･クラス･ファイルでイベントを処理します。
コールバックでは、バインド先のクラス･タイプ、コールバックの発生元のウィジェット、発生したイベントのタイプ、という3つの内容を宣言する必要があります。 この例では、Screen1View、const Box& および<code>const ClickEvent&です。
Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
Screen1View();
// Declaring callback handler for Box
void boxClickHandler(const Box& b, const ClickEvent& e);
protected:
// Declaring callback type of box and clickEvent
Callback<Screen1View, const Box&, const ClickEvent&> boxClickedCallback;
};
次に、イベントを処理するためのコールバック宣言と関数をビュー･オブジェクトにバインドする必要があります。
Screen1View.cpp
Screen1View::Screen1View() :
// In constructor for callback, bind to this view object and bind which function to handle the event.
boxClickedCallback(this, &Screen1View::boxClickHandler) { }
その次のステップは、タッチされたときにどのコールバックを使用するのかを、ボックス･ウィジェットに指示することです。これはsetupScreen()内で実行し、スクリーンに入るたびにコールバックが設定されるようにします。
Screen1View.cpp
void Screen1View::setupScreen()
{
// Add the callback to box
box.setClickAction(boxClickedCallback);
}
最後のステップは、boxClickHandler関数の実装です。この関数はコールバックを処理します。 良い習慣として、コールバックを開始したボックスが本当に'box'であることを確認します。
Screen1View.cpp
void Screen1View::boxClickHandler(const Box& b, const ClickEvent& evt)
{
if (&b == &box)
{
//Implement what should happen when 'box' is touched/clicked here.
}
}
API参照
Further reading
Draggable
Draggableミックスインにより、タッチ入力を介してウィジェットをドラッグできるようになります。
TouchGFX Designerでミックスインを適用可能にするには、下の画像に示すように、所定のウィジェットのプロパティの"Mixins"セクションでこれを有効にします。
TouchGFX DesignerでDraggableミックスインを有効化
Draggableミックスインを有効化すると、次に示すように、生成されたウィジェットの宣言署名が変更されます。ここでは、ボックスのClick Listenerミックスインが有効化されています。
touchgfx::Draggable< touchgfx::Box > box;