주요 내용으로 건너뛰기

믹스인

Mixin(이하 믹스인)이란 예를 들어 위치 변경이나 알파 값 변경을 애니메이션 처리할 수 있도록 위젯의 기능을 확장하는 클래스를 말합니다. Move Animator 믹스인과 Fade Animator 믹스인은 TouchGFX Designer 상호작용에서 위치 변경과 알파 값 변경을 애니메이션 처리하는 코드를 생성하는 데 반드시 필요합니다. 이 두 가지 믹스인은 TouchGFX Designer를 통해, 혹은 사용자 코드에서 직접 위젯에 추가할 수 있습니다.

Move Animoator 및 Fade Animator는 선택에 따라 이징(easing) 방정식을 사용해 애니메이션의 진행을 자세히 설명합니다. 이징 방정식에 대한 자세한 내용은 이 섹션 끝부분을 참조하십시오.

Move Animator​

위치 변경 애니메이터는 위젯이 현재 위치에서 지정된 마지막 위치까지 이동하는 것을 애니메이션 처리할 수 있는 믹스인입니다. X 및 Y축 방향의 위치 변경은 EasingEquation을 통해 설명할 수 있습니다.

이 믹스인은 TouchGFX Designer의 해당 위젯 속성을 사용해 아래 이미지와 같은 “Mixins” 섹션에서 활성화하면 적용됩니다.

Move Animator 믹스인은 위젯의 위치를 변경하는 상호작용이 생성되면 해당 위젯에 자동으로 적용됩니다.

TouchGFX Designer에서 활성화된 Move Animator 믹스인

Move Animator를 활성화하면 아래와 같이 생성된 위젯의 선언 서명(signature)이 바뀝니다. 여기에서 Box의 Move Animator 믹스인이 활성화됩니다.

touchgfx::MoveAnimator< touchgfx::Box > box;

사용자 코드에서 Move Animator 사용하기​

Move Animator 믹스인이 위젯에 적용되면 해당 위젯이 현재 위치에서 다른 위치로 이동하는 것을 애니메이션 처리할 수 있습니다. 이 섹션에서는 이러한 새 기능을 사용하는 방법에 대한 데모를 소개합니다.

TouchGFX Designer의 Box 위젯에서 Move Animator 믹스인을 활성화하면 startMoveAnimation 메소드를 사용할 수 있게 됩니다. 이 메소드는 다음과 같은 순서로 5가지 인수를 갖습니다.

  • endX: 부모와 관련하여 위젯이 이동해야 하는 X 위치입니다.
  • endY: 부모와 관련하여 위젯이 이동해야 하는 Y 위치입니다.
  • duration: X축과 Y축으로 이동하는 데 걸리는 시간(tick)입니다.
  • xProgressionEquation: X축으로 이동하는 데 사용되는 EasingEquation입니다.
  • yProgressionEquation: Y축으로 이동하는 데 사용되는 EasingEquation입니다.

아래는 X축과 Y축에서 linear EasingEquation을 사용하여 40tick 시간 동안 X: 0, Y: 0 좌표로 이동하는 예제입니다.

    box.startMoveAnimation(0, 0, 40, EasingEquations::linearEaseNone, EasingEquations::linearEaseNone);

사용자 코드를 통한 콜백 구현​

Move Animator 믹스인이 애니메이션을 완료하면 콜백이 실행됩니다. 이 섹션에서는 이러한 콜백을 구현하는 방법에 대한 데모를 소개합니다.

TouchGFX Designer의 Box 위젯에서 Move Animator 믹스인을 활성화했다면 이제 Box 위젯이 위치한 기본 클래스에서 상속하는 스크린 헤더 클래스 파일에 콜백 선언과 이벤트 처리 함수를 추가해야 합니다.

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;
};

그런 다음 콜백 선언과 이벤트 처리 함수를 View 객체로 바인딩해야 합니다.

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) { }

다음 단계에서는 이동 애니메이션이 종료되었을 때 사용할 콜백을 Box 위젯에게 알려주는 것 입니다. 이 작업은 setupScreen() 파일에서 작성하며, 해당 스크린으로 전환될 때마다 콜백이 설정되도록 해야 합니다.

Screen1View.cpp
void Screen1View::setupScreen()
{
  // Add the callback to box
  box.setMoveAnimationEndedAction(boxMoveAnimationEndedCallback);
}

마지막으로 콜백을 처리할 boxMoveAnimationEndedHandler 함수를 구현합니다. 효과적인 연습이 될 수 있도록 위치 변경 애니메이션을 마친 Box가 실제로 해당하는 ‘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
  • MoveAnimator 클래스에 대한 API 참조

    • Fade Animator​

    Fade Animator는 위젯이 알파 값을 현재 값에서 지정된 마지막 값으로 변경하여 페이드 효과를 애니메이션 처리할 수 있는 믹스인입니다. 페이드 속도는 EasingEquation을 통해 설명할 수 있습니다.

    Note
    알파 값을 구현하는 위젯에서만 Fade Animator 믹스인을 지원합니다. 따라서 컨테이너처럼 다른 위젯을 포함할 수 있는 위젯이라고 해서 Fade Animator 믹스인을 전부 지원하는 것은 아닙니다.

    이 믹스인은 TouchGFX Designer의 해당 위젯 속성을 사용해 아래 이미지와 같은 “Mixins” 섹션에서 활성화하면 적용됩니다.

    Fade Animator 믹스인은 0보다 큰 시간 동안 위젯을 페이드 처리하는 상호작용이 추가되면 해당 위젯에 자동으로 적용됩니다.

    TouchGFX Designer에서 활성화된 페이드 애니메이터 믹스인

    Fade Animator를 활성화하면 아래와 같이 생성된 위젯의 선언 서명이 바뀝니다. 여기서 Box의 Fade Animator 믹스인이 활성화됩니다.

    touchgfx::FadeAnimator< touchgfx::Box > box;

    사용자 코드에서 Fade Animator 사용하기​

    Fade Animator 믹스인이 위젯에 적용되면 해당 위젯이 알파 값을 현재 설정에서 다른 설정으로 애니메이션 처리할 수 있습니다. 이 섹션에서는 이러한 새 기능을 사용하는 방법에 대한 데모를 소개합니다.

    TouchGFX Designer의 Box 위젯에서 Fade Animator 믹스인을 활성화하면 startFadeAnimation 메소드를 사용할 수 있게 됩니다. 이 메소드는 다음과 같은 순서로 세 가지 인수를 갖습니다.

    • endAlpha: 애니메이션 종료 시 위젯에 설정되어야 하는 알파 값입니다.
    • duration: 애니메이션이 새로운 알파 값 설정까지 걸리는 시간(tick)입니다.
    • alphaProgressionEquation: 알파 값 변경 속도에 사용되는 EasingEquation입니다.

    아래는 linear EasingEquation을 사용하여 40tick 시간 동안 알파 값을 0으로 변경하는 예제입니다.

        box.startFadeAnimation(0, 40, EasingEquations::linearEaseNone);

    linearEaseNone erasing equation 이 기본값이기 때문에 인수로 이 값을 제공할 필요가 없습니다.

    사용자 코드를 통한 콜백 구현​

    Fade Animator 믹스인이 애니메이션을 완료하면 콜백이 실행됩니다. 이 섹션에서는 이러한 콜백을 구현하는 방법에 대한 데모를 소개합니다.

    TouchGFX Designer의 Box 위젯에서 Fade Animator 믹스인을 활성화했다면 이제 Box 위젯이 위치한 기본 클래스에서 상속하는 스크린 헤더 클래스 파일에 콜백 선언과 이벤트 처리 함수를 추가해야 합니다.

    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;
    };

    그런 다음 콜백 선언과 이벤트 처리 함수를 View 객체로 바인딩해야 합니다.

    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) { }

    다음 단계에서는 이동 애니메이션이 종료되었을 때 사용할 콜백을 Box 위젯에게 알려주는 것 입니다. 이 작업은 setupScreen() 파일에서 작성하며, 해당 스크린으로 전환될 때마다 콜백이 설정되도록 해야 합니다.

    Screen1View.cpp
    void Screen1View::setupScreen()
    {
      // Add the callback to box
      box.setFadeAnimationEndedAction(boxFadeAnimationEndedCallback);
    }

    마지막으로 콜백을 처리할 boxFadeAnimationEndedHandler 함수를 구현합니다. 효과적인 연습이 될 수 있도록 Fade Animator을 마친 Box가 실제로 해당하는 ‘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
  • FadeAnimator클래스에 대한 API 참조

    • Click Listener​

    Click Listener는 콜백을 사용해 위젯을 확장하여 위젯이 터치 입력에 응답할 수 있도록 설정하는 믹스인입니다.

    이 믹스인은 TouchGFX Designer의 해당 위젯 속성을 사용해 아래 이미지와 같은 “Mixins” 섹션에서 활성화하면 적용됩니다.

    TouchGFX Designer에서 활성화된 Click Listener 믹스인

    Click Listener 믹스인을 활성화하면 아래와 같이 생성된 위젯의 선언 서명이 바뀝니다. 여기서 Box의 Click Listener 믹스인이 활성화됩니다.

    touchgfx::ClickListener< touchgfx::Box > box;

    사용자 코드를 통한 콜백 구현​

    Click Listener 믹스인이 터치 이벤트를 수신하면 콜백이 실행됩니다. 이 섹션에서는 이러한 콜백을 구현하는 방법에 대한 데모를 소개합니다.

    TouchGFX Designer의 Box 위젯에서 Click Listener 믹스인을 활성화했다면 이제 Box 위젯이 위치한 기본 클래스에서 상속하는 스크린 헤더 클래스 파일에 콜백 선언과 이벤트 처리 함수를 추가해야 합니다.

    콜백은 바인딩할 클래스 유형, 콜백이 시작되는 위젯, 그리고 발생하는 이벤트 유형, 세 가지를 선언해야 합니다. 아래 예제에서 Screen1View, const Box& 및 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;
    };

    그런 다음 콜백 선언과 이벤트 처리 함수를 View 객체로 바인딩해야 합니다.

    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) { }

    다음 단계에서는 터치 되었을 때 사용할 콜백을 Box 위젯에게 알려주는 것 입니다. 이 작업은 setupScreen() 파일에서 작성하며, 해당 스크린으로 전환될 때마다 콜백이 설정되도록 해야 합니다.

    Screen1View.cpp
    void Screen1View::setupScreen()
    {
        // Add the callback to box
        box.setClickAction(boxClickedCallback);
    }

    마지막으로 콜백을 처리할 boxClickHandler 함수를 구현합니다. 효과적인 연습이 될 수 있도록 콜백을 시작한 Box가 실제로 해당하는 ‘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
  • ClickListener 클래스에 대한 API 참조

    • Draggable​

    Draggable은 터치 입력을 통해 위젯을 드래그할 수 있도록 설정하는 믹스인입니다.

    이 믹스인은 TouchGFX Designer의 해당 위젯 속성을 사용해 아래 이미지와 같은 “Mixins” 섹션에서 활성화하면 적용됩니다.

    TouchGFX Designer에서 활성화된 Draggable 믹스인

    Draggable 믹스인을 활성화하면 아래와 같이 생성된 위젯의 선언 서명이 바뀝니다. 여기서 Box의 Click Listener 믹스인이 활성화됩니다.

    touchgfx::Draggable< touchgfx::Box > box;

    API 참조​

    Further reading
  • Draggable 클래스에 대한 API 참조

    • 이징 방정식​

    기본적으로 Move Animoator 및 Fade Animator는 두 값 간에 선형 진행을 사용합니다. 예를 들어, 알파 값을 50단계에 걸쳐 0에서 100으로 변경하면 알파 값은 0, 2, 4, 6, 8, ..., 98, 100 단계를 거치게 됩니다. 변경 비율은 모든 단계에서 동일합니다.

    선형 진행은 다소 단순하거나 부자연스러워 보일 수 있기 때문에 또 다른 알고리즘을 사용해 UI를 개선하는 경우가 종종 있습니다. TouchGFX에는 각기 다른 특성을 가진 30개의 알고리즘이 함께 제공됩니다. 모든 이징 방정식에 대한 목록은 API 참조에서 찾아볼 수 있습니다(이 섹션 끝에 있는 링크 참조).

    이징 방정식은 EasingEquations 클래스에서 정적 함수로 구현됩니다. 이러한 함수는 다음과 같이 애니메이션을 시작할 때 MoveAnimator에 손쉽게 전달할 수 있습니다.

        box.startMoveAnimation(0, 0, 40, EasingEquations::cubicEaseIn, EasingEquations::cubicEaseIn);

    첫 번째 이징 인수는 x축(가로) 이동에 사용되는 이징 방정식이고, 두 번째 이징 함수는 y축 이동에 사용되는 이징 방정식입니다. 오직 하나의 함수를 전달하는 경우에는 x축 이동에 사용되고, 선형 진행은 y축 이동에 사용된다는 점에 유의하시기 바랍니다.

    입방 이동​

    입방 이징 방정식은 사용자 인터페이스에서 널리 사용됩니다. TouchGFX에서는 세 가지 버전이 제공되고 있기 때문에 올바르게 사용하는 것이 중요합니다. 아래 이미지는 세 가지 변형을 보여줍니다. 모든 경우에 가로축(0-400)에 시간이 있고, 이징 방정식의 값은 그 위(0-200)에 있습니다.

    cubicEaseIn 이징 방정식. 처음에는 천천히 이동하다가 끝에는 빠르게 이동합니다.

    cubicEaseIn은 화면 밖의 디스플레이에 이미 표시되는 값들을 애니메이션화할 때 매우 유용합니다. 느리게 시작하는 것이 매우 자연스럽게 보입니다. 그래야 속도를 얻고 짧은 시간 안에 디스플레이에서 벗어날 수 있습니다.

    cubicEaseOut 이징 방정식. 처음에는 빠르게 이동하고 느리게 끝납니다.

    cubicEaseOut은 화면으로 무언가를 애니메이션화할 때 매우 유용합니다. 최종 위치에 가까워지면 속도가 느려지지만, 초기 오프 스크린 속도가 빠릅니다.

    cubicEaseInOut 이징 방정식. 처음에 느리게 이동하고 느리게 끝납니다.

    cubicEaseInOut은 cubicEaseIn과 cubicEaseOut의 조합입니다. 느리게 시작해서 느리게 끝납니다. 화면에서 요소를 이동할 때 자연스럽게 선택하게 됩니다.

    토글 버튼과 같이 화면에서 짧고 빠르게 이동하는 경우에는 단순성으로 인해 직선 이동이 더 나아보일 수 있습니다.

    Further reading
  • 사용 가능한 EasingEquations에 대한 API 참조
  • EasingEquations에 대한 그래픽 데모