주요 내용으로 건너뛰기

Animated Image

Animated Image는 공통 식별자를 공유하는 여러 이미지를 사용해 처음부터 끝까지 애니메이션을 실행할 수 있습니다. 단일 애니메이션을 실행할 수도 있고, 혹은 정지하거나 일시적으로 멈출 때까지 애니메이션을 반복 실행할 수도 있습니다.

시뮬레이터에서 실행 중인 Animated Image

위젯 그룹​

Animated Image는 TouchGFX Designer의 Images 위젯 그룹에 있습니다.

TouchGFX Designer의 Animated Image

속성​

TouchGFX Designer에서 Animated Image의 속성은 다음과 같습니다.

속성 그룹속성 설명
Name위젯 이름입니다. 이는 TouchGFX Designer와 코드에서 사용되는 고유 식별자입니다.
LocationX 와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다.

W 와 H는 위젯의 가로 및 세로 길이를 지정합니다.
버튼의 크기는 선택한 이미지의 크기에 따라 결정됩니다.

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는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

MoveAnimator는 위젯의 X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

인터랙션​

Animated Image에서 지원되는 액션과 트리거는 다음 섹션에서 설명합니다.

액션​

표준 위젯 액션설명
Move widget시간이 지나면서 위젯을 새로운 위치로 이동시킵니다.
Fade widget시간이 지나면서 위젯의 알파 값을 변경합니다.
Hide widget위젯을 숨깁니다(visibility를 false로 설정).
Show widget숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정).

트리거​

트리거설명
Animation is doneAnimated Image가 애니메이션을 완료했습니다.

성능​

Animated Image는 이미지 그리기에 따라 다르기 때문에 대부분의 플랫폼에서 속도가 빠른 위젯으로 알려져 있습니다.
Animated Image는 속성에 따라 이미지를 그립니다. 따라서 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
사용자 코드의 AnimatedImage 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면 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 Example​

Animated Image에 대해 자세히 알아보려면 TouchGFX Designer에서 다음 UI 템플릿 중 하나를 사용해 새로운 애플리케이션을 생성하십시오.

TouchGFX Designer의 Animated Image Example UI 템플릿

API 참조​

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