KR20160097673A

KR20160097673A - 애니메이션 처리 장치 및 방법

Info

Publication number: KR20160097673A
Application number: KR1020150019662A
Authority: KR
Inventors: 남기훈; 계인호
Original assignee: 삼성전자주식회사
Priority date: 2015-02-09
Filing date: 2015-02-09
Publication date: 2016-08-18
Also published as: EP3054388A1; US20160232700A1; US9767593B2; EP3054388B1

Abstract

API를 통해 제공받은 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 interpolated 애니메이션 모드 및 CSS3 애니메이션 모드 중 어느 하나로 결정하는 애니메이션 제어부, 상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드로 결정된 경우, 각 프레임마다 오브젝트에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 상기 애니메이션을 처리하는 애니메이션 엔진부 및 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정된 경우, 상기 오브젝트에 대한 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, 상기 애니메이션을 처리하는 웹 엔진부를 포함하는 애니메이션 처리 장치가 개시된다.

Description

애니메이션 처리 장치 및 방법{Apparatus and method for processing animation}

다양한 실시예들은 애니메이션 처리 장치 및 방법에 관한 것으로서, 더욱 상세하게는 애니메이션의 속성에 따라, 애니메이션의 처리 방법을 제어할 수 있는 애니메이션 처리 장치 및 방법에 관한 것이다.

웹 페이지는 HTML(Hyper Text Markup Language) 명세(Specification)에 의해 정의된 문서로서, 본문에 텍스트뿐 아니라 이미지, 동영상, 오디오 등의 다양한 웹 컨텐츠를 포함할 수 있다. 웹 페이지에 포함된 각각의 웹 컨텐츠들은 레이아웃과 관련한 태그에 의해 HTML 문서상에 적절히 배치되어 웹 페이지를 구성한다. 초기 HTML 명세는 정적(static)인 웹 페이지만 구성할 수 있었다. 그런데 근래 HTML 명세는 점차 자바 스크립트(Java Script) 및 CSS(Cascading Style Sheets)와 같은 기술들을 활용함으로써, 동적(dynamic)인 웹 페이지를 구성할 수 있도록 확장되었다.

일반적으로 웹 브라우저가 웹 페이지를 화면에 표시하는 프로세스는 다음과 같다. 먼저 웹 브라우저는 HTML 문서를 읽어서 필요한 자원(resource)들을 로딩(loading)한다. 웹 브라우저는 로딩된 자원들을 파싱(parsing)하여 돔(DOM; Document Object Model) 트리(tree) 및 렌더(render) 트리를 구성한다. 웹 브라우저는 렌더 트리를 기반으로 레이아웃 작업 및 HTML 문서에 포함된 각각의 웹 컨텐츠들에 대해 페인팅 작업을 수행하여, 웹 페이지를 만들고, 이를 화면에 표시한다.

다양한 실시예들은, 애니메이션의 속성에 따라, CSS3 애니메이션 처리 방법 또는 interpolated 애니메이션 처리 방법을 적응적으로 사용함으로써, 애니메이션 처리를 최적화할 수 있는 애니메이션 처리 장치 및 방법을 제공할 수 있다.

일 실시예에 따른 애니메이션 처리 장치는, API를 통해 제공받은 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 interpolated 애니메이션 모드 및 CSS3 애니메이션 모드 중 어느 하나로 결정하는 애니메이션 제어부, 상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드로 결정된 경우, 각 프레임마다 오브젝트에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 상기 애니메이션을 처리하는 애니메이션 엔진부 및 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정된 경우, 상기 오브젝트에 대한 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, 상기 애니메이션을 처리하는 웹 엔진부를 포함할 수 있다.

일 실시예에 따른 애니메이션 제어부는, 상기 애니메이션의 속성이, translate, opacity, scale, rotate, perspective 및 matrix 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 CSS3 애니메이션 모드로 결정할 수 있다.

일 실시예에 따른 애니메이션 제어부는, 상기 애니메이션의 속성이 pause, reverse, seek 및 time line animation 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 결정할 수 있다.

일 실시예에 따른 애니메이션 제어부는, 상기 애니메이션 처리 모드의 기본 모드를 상기 CSS3 애니메이션 모드로 설정하고, 상기 애니메이션 처리 모드가 상기 interpolate 애니메이션 모드로 결정되는 경우, 상기 CSS3 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 전환할 수 있다.

일 실시예에 따른 애니메이션 엔진부는, 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드에서 상기 interpolated 애니메이션 모드로 전환되는 경우, 전환된 시점의 오브젝트에 대한 매트릭스를 계산할 수 있다.

일 실시예에 따른 애니메이션 제어부는, 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정되는 경우, 상기 interpolated 애니메이션 모드를 상기 CSS3 애니메이션 모드로 전환할 수 있다.

일 실시예에 따른 애니메이션 엔진부는, 상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드에서 상기 CSS3 애니메이션 모드로 전환된 경우, 상기 오브젝트에 대한 타겟 매트릭스를 설정할 수 있다.

일 실시예에 따른 타겟 매트릭스는 오브젝트의 타겟 위치를 나타내는 매트릭스일 수 있다.

일 실시예에 따른 CSS3 트랜지션은, 상기 애니메이션에 대한 지연 시간(delay), 진행 방향(direction), 진행 시간(duration) 및 반복횟수(iteration-count) 중 적어도 하나를 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은 API를 통해 제공받은 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 interpolated 애니메이션 모드 및 CSS3 애니메이션 모드 중 어느 하나로 결정하는 단계, 상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드로 결정된 경우, 각 프레임마다 오브젝트에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 상기 애니메이션을 처리하는 단계 및 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정된 경우, 상기 오브젝트에 대한 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, 상기 애니메이션을 처리하는 단계를 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 모드를 결정하는 단계는, 상기 애니메이션의 속성이, translate, opacity, scale, rotate, perspective 및 matrix 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 CSS3 애니메이션 모드로 결정하는 단계를 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 모드를 결정하는 단계는, 상기 애니메이션의 속성이 pause, reverse, seek 및 time line animation 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 결정하는 단계를 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은, 상기 애니메이션 처리 모드의 기본 모드를 상기 CSS3 애니메이션 모드로 설정하는 단계 및 상기 애니메이션 처리 모드가 상기 interpolate 애니메이션 모드로 결정되는 경우, 상기 CSS3 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 전환하는 단계를 더 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은, 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드에서 상기 interpolated 애니메이션 모드로 전환되는 경우, 전환된 시점의 오브젝트에 대한 매트릭스를 계산하는 단계를 더 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은, 상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정되는 경우, 상기 interpolated 애니메이션 모드를 상기 CSS3 애니메이션 모드로 전환하는 단계를 더 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은, 상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드에서 상기 CSS3 애니메이션 모드로 전환된 경우, 상기 오브젝트에 대한 타겟 매트릭스를 설정하는 단계를 더 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법 및 장치는 애니메이션의 속성에 따라, CSS3 애니메이션 처리 방법 또는 interpolated 애니메이션 처리 방법을 적응적으로 사용함으로써, 애니메이션 처리를 최적화할 수 있다.

일 실시예에 따른 애니메이션 처리 방법 및 장치는 CSS3 애니메이션 처리 방법과 interpolated 애니메이션 처리 방법의 장점을 모두 제공할 수 있다.

도 1은 일 실시예에 따른 애니메이션 처리 방법을 설명하기 위해 참조되는 도면이다.
도 2는 일 실시예에 따른 애니메이션 처리 장치의 구성을 나타내는 블록도이다.
도 3은 도 2의 제어부(120)의 구성을 나타내는 도면이다.
도 4는 일 실시예에 따른 애니메이션 처리 방법을 나타내는 흐름도이다.
도 5는 일 실시예에 따른 애니메이션 처리 방법을 나타내는 흐름도이다.

본 명세서에서 사용되는 용어에 대해 간략히 설명하고, 본 발명에 대해 구체적으로 설명하기로 한다.

본 발명에서 사용되는 용어는 본 발명에서의 기능을 고려하면서 가능한 현재 널리 사용되는 일반적인 용어들을 선택하였으나, 이는 당 분야에 종사하는 기술자의 의도 또는 판례, 새로운 기술의 출현 등에 따라 달라질 수 있다. 또한, 특정한 경우는 출원인이 임의로 선정한 용어도 있으며, 이 경우 해당되는 발명의 설명 부분에서 상세히 그 의미를 기재할 것이다. 따라서 본 발명에서 사용되는 용어는 단순한 용어의 명칭이 아닌, 그 용어가 가지는 의미와 본 발명의 전반에 걸친 내용을 토대로 정의되어야 한다.

명세서 전체에서 어떤 부분이 어떤 구성요소를 "포함"한다고 할 때, 이는 특별히 반대되는 기재가 없는 한 다른 구성요소를 제외하는 것이 아니라 다른 구성요소를 더 포함할 수 있음을 의미한다. 또한, 명세서에 기재된 "...부", "모듈" 등의 용어는 적어도 하나의 기능이나 동작을 처리하는 단위를 의미하며, 이는 하드웨어 또는 소프트웨어로 구현되거나 하드웨어와 소프트웨어의 결합으로 구현될 수 있다.

아래에서는 첨부한 도면을 참고하여 실시예들에 대하여 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자가 용이하게 실시할 수 있도록 상세히 설명한다. 그러나 본 발명은 여러 가지 상이한 형태로 구현될 수 있으며 여기에서 설명하는 실시예에 한정되지 않는다. 그리고 도면에서 본 발명을 명확하게 설명하기 위해서 설명과 관계없는 부분은 생략하였으며, 명세서 전체를 통하여 유사한 부분에 대해서는 유사한 도면 부호를 붙였다.

도 1은 일 실시예에 따른 애니메이션 처리 방법을 설명하기 위해 참조되는 도면이다.

도 1의 (a)는 일 실시예에 따른 CSS3 애니메이션의 처리 방법을 나타내는 도면이고, 도 1의 (b)는 일 실시예에 따른 interpolated 애니메이션의 처리 방법을 나타내는 도면이다.

도 1의 (a)를 참조하면, CSS3 애니메이션의 경우, 오브젝트를X1(처음 위치)에서 X2(목표 위치)로 이동하라는 명령을 수신하면, 웹 엔진부는 오브젝트가 X1에서 X2로 이동하는 중간 과정 계산을 수행하여, 애니메이션을 처리할 수 있다. 또한, 웹 엔진부는 CSS3 트랜지션(transition)에 기초하여, CSS3 애니메이션을 처리할 수 있다. 예를 들어, CSS3 트랜지션 중 진행 시간이 설정되면, 웹 엔진부는 설정된 진행 시간에 맞추어 오브젝트의 중간 위치를 계산할 수 있다.

반면에, 도 1의 (b)를 참조하면, interpolated 애니메이션의 경우, 오브젝트가X1(처음 위치)에서 X2(목표 위치)로 이동하는 애니메이션의 중간 과정 계산을 애니메이션 엔진부가 프레임마다 수행할 수 있다. 예를 들어, 오브젝트가 X1에서 X2로 이동하는 애니메이션이 6개의 프레임에 걸쳐서 재생되는 경우, 애니메이션 엔진부는 오브젝트의 제1 프레임(F1)에서의 위치, 제2 프레임(F2)에서의 위치, 제3 프레임(F3)에서의 위치, 제4 프레임(F4)에서의 위치, 제5 프레임(F5)에서의 위치, 제6 프레임(F6)에서의 위치를 각각 계산할 수 있다.

이와 같이, CSS3 애니메이션의 경우, 웹 엔진부에서 애니메이션에 대한 계산(예를 들어, 중간 과정 계산)을 수행하고, 렌더링하므로, 고성능 애니메이션 처리가 가능하다. 그러나, 웹 엔진부에서 애니메이션에 대한 계산을 수행하기 때문에, 웹 엔진부에서 지원되는 애니메이션 속성만 처리 가능하고, 복합적인 애니메이션을 처리하기 어려운 단점이 있다.

반면에, interpolated애니메이션의 경우, 애니메이션 엔진부에서 프레임마다 애니메이션에 대한 계산을 수행하므로, 복합적인 애니메이션의 처리가 가능하다. 그러나, 애니메이션 엔진부에서 매 프레임마다 계산을 수행하기 때문에 성능이 다소 떨어진다는 단점이 있다.

따라서, 일 실시예에 따른 애니메이션 처리 장치(100)는 애니메이션 처리 방법을 적응적으로 적용하여, CSS3 애니메이션 처리 방법과 interpolate 애니메이션 처리 방법을 적응적으로 혼용하여, 애니메이션 성능의 최적화가 가능할 수 있다.

도 2는 일 실시예에 따른, 애니메이션 처리 장치의 구성을 나타내는 블록도이다.

일 실시예에 따른 애니메이션 처리 장치(100)는 TV, 휴대폰, 태블릿 PC, 디지털 카메라, 캠코더, 노트북 컴퓨터(laptop computer), 태블릿 PC, 데스크탑, 전자책 단말기, 디지털 방송용 단말기, PDA(Personal Digital Assistants), PMP(Portable Multimedia Player), 네비게이션, MP3 플레이어, 착용형 기기(wearable device) 등과 같은 다양한 전자 장치로 구현될 수 있다. 다만, 이에 한정하는 것은 아니다.

도 2를 참조하면, 애니메이션 처리 장치는 네트워크 인터페이스부(110), 제어부(120) 및 디스플레이부(130)를 포함할 수 있다.

네트워크 인터페이스부(110)는, 애니메이션 처리 장치 (100)를 인터넷망을 포함하는 유/무선 네트워크와 연결하기 위한 인터페이스를 제공한다. 예를 들어, 네트워크 인터페이스부(110)는, 네트워크를 통해, 인터넷 또는 컨텐츠 제공자 또는 네트워크 운영자가 제공하는 컨텐츠 또는 데이터들을 수신할 수 있다.

또한, 네트워크 인터페이스부(110)는 인터넷에 접속하여, HTML 문서를 수신하고, 이를 애니메이션 제어부(120)로 전달할 수 있다. 이때, HTML 문서에는 컨텐츠가 포함될 수 있다. 컨텐츠는 인터넷이나 컴퓨터 통신 등을 통해 제공되는 각종 데이터를 의미할 수 있으며, 컨텐츠는 웹 컨텐츠를 포함할 수 있다. 웹 컨텐츠는 HTML 문서에 포함되는 요소로써, 텍스트, 이미지, 아이콘 또는 섬네일 등을 포함할 수 있다. 또한, 컨텐츠에 움직임이 있는 경우, 컨텐츠의 움직임 또는 컨텐츠가 움직이도록 수행하는 기능을 애니메이션으로 지칭할 수 있다. 또한, 컨텐츠에 움직임이 있는 경우, 해당 컨텐츠는 애니메이션 컨텐츠로 지칭할 수 있다.

제어부(120)는 애니메이션 처리 장치(100)의 전반적인 동작 및 애니메이션 처리 장치(100)의 내부 구성들 간의 신호 흐름을 제어하고, 데이터를 처리하는 기능을 수행할 수 있다. 또한, 제어부(120)는 프로그램 영역에 저장된 각종 어플리케이션을 실행할 수 있다. 특히 실시예에 따른 제어부(120)는 애니메이션 처리를 위하여 도 2에 도시된 바와 같이, 웹 어플리케이션(210), 애니메이션 제어부(220), 애니메이션 엔진부(230) 및 웹 엔진부(240)를 포함할 수 있다.

웹 어플리케이션(210)은 네트워크 서비스를 구현하는 어플리케이션으로, 네트워크 인터페이스부(110)를 통해 인터넷에 접속하여, HTML 문서를 수신하는 어플리케이션일 수 있다.

웹 어플리케이션(210)은 API(Application Program Interface)를 통하여, 애니메이션 제어부(220)로 컨텐츠에 포함되는 오브젝트들의 애니메이션 정보를 제공할 수 있다. API는 웹 어플리케이션(210)이 애니메이션 제어부(220)와 통신할 때, 사용되는 언어나 메시지 형식을 제공하는 구성일 수 있다.

API를 통해 제공받은 애니메이션 정보는 애니메이션의 속성 정보를 포함할 수 있으며, 애니메이션 제어부(220)는 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 결정할 수 있다. 애니메이션 제어부(220)는 애니메이션의 속성이 interpolation이 필요한 속성을 포함하는 경우, 애니메이션 처리 모드를 interpolated 애니메이션 처리 모드로 결정할 수 있다.

예를 들어, 애니메이션 제어부(220)는 애니메이션의 속성이, pause, reverse, seek, time line animation 중 적어도 하나를 포함하는 경우, interpolation이 필요한 애니메이션으로 판단하고, 상기 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 결정할 수 있다.

pause, reverse, seek는 애니메이션의 흐름을 제어하는 것으로, pause는 애니메이션 동작 중, 사용자 입력(예를 들어, 마우스 또는 터치 도구를 이용한 홀딩 입력)에 의해 애니메이션을 정지시키는 것을 의미할 수 있다. reverse는 애니메이션 주기가 지정된 방향의 반대 방향으로 재생됨을 나타낼 수 있다.

time line animation은 애니메이션의 각각을 시간대별로 정의할 수 있는 애니메이션을 의미할 수 있다. 예를 들어, A라는 오브젝트가 5초 동안, 0에서 600으로 이동하는데, 그 중 2~3초 구간에서는 2배 확대되고, 3~4초 구간은 90도 회전이 된다면, A라는 오브젝트는 5초동안 움직이면서, 확대와 회전이 동시에 발생되게 된다. 이와 같이, time line animation에서는 2개 이상의 애니메이션 효과가 중복 적용될 수 있다.

반면에, 애니메이션 제어부(220)는 애니메이션의 속성이 interpolation이 필요한 속성을 포함하지 않는 경우, 애니메이션 처리 모드를 CSS3 애니메이션 처리 모드로 결정할 수 있다.

예를 들어, 애니메이션 제어부(220)는 애니메이션의 속성이, translate, opacity, scale, rotate, perspective, matrix 중 적어도 하나를 포함하는 경우, interpolation이 필요하지 않은 애니메이션으로 판단하고, 애니메이션 처리 모드를 CSS3 애니메이션 처리 모드로 결정할 수 있다.

애니메이션 제어부(220)는 애니메이션이, translate, opacity, scale, rotate, perspective, matrix 등, interpolation이 필요하지 않은 속성 만을 포함하는 경우, 애니메이션 처리 모드를 CSS3 애니메이션 처리 모드로 결정할 수 있다.

translate는 오브젝트가 이동하는 것을 나타내고, opacity는 오브젝트가 점차적으로 뚜렷해지거나/흐려지는 등의 투명도가 변경되는 것을 나타내며, scale은 오브젝트가 축소되거나 확대되는 것을 나타낸다. 또한, rotate는 오브젝트가 회전하는 것을, perspective는 오브젝트의 원근감을 나타내고, matrix는 사용자가 직접 지정하는 매트릭스를 나타낸다.

한편, 애니메이션 제어부(220)는 애니메이션 처리 모드의 기본 모드를 CSS3 애니메이션 모드로 설정할 수 있다. 애니메이션 제어부(220)는 애니메이션 모드가 interpolated 애니메이션 모드로 결정되는 경우, CSS3 애니메이션 모드를 interpolated 애니메이션 모드로 전환할 수 있다. 또는 애니메이션 제어부(220)는 애니메이션 모드가 CSS3 애니메이션 모드로 결정되는 경우, interpolated 애니메이션 모드를 CSS3 애니메이션 모드로 전환할 수 있다.

애니메이션 엔진부(230)는 애니메이션 처리 모드가 interpolate 애니메이션 모드인 경우, 하나의 프레임에서 렌더링되는 오브젝트들 각각에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 웹 엔진부(240)에 렌더링 명령을 내릴 수 있다. 이때, 오브젝트들 각각에 대한 매트릭스는 프레임마다 계산될 수 있으며, 계산된 매트릭스는 웹 엔진부(240)로 전달될 수 있다. 예를 들어, x의 좌표를0->600으로 이동하는 애니메이션의 경우, 애니메이션 엔진부(230)는 각 프레임마다 x좌표를 계산하여(예를 들어, 첫번째 프레임에서는 x=0, 두번째 프레임에서는 x=10, 세번째 프레임에서는 x=20, …), 계산된 x좌표 값을 웹 엔진부(240)로 전달하여, 오브젝트들의 렌더링을 수행할 수 있다. 즉, 애니메이션 엔진부(230)가 애니메이션의 중간 과정 계산을 수행할 수 있다.

한편, 오브젝트들 각각의 매트릭스는 오브젝트들 각각에 대한 애니메이션 파라미터를 이용하여 계산될 수 있다. 애니메이션 파라미터는 오브젝트가 몇 픽셀이나 이동할지, 오브젝트를 얼마나 확대할지, 또는 축소할지 등을 나타내는 파라미터일 수 있다.

반면에, 애니메이션 엔진부(230)는 애니메이션 처리 모드가 CSS3 애니메이션 모드인 경우, 오브젝트에 대한 타겟 매트릭스를 설정하여, 웹 엔진부(240)에 렌더링 명령을 내릴 수 있다.

웹 엔진부(240)는 타겟 매트릭스(예를 들어, translate X(600))를 애니메이션 엔진부(230)로부터 전달받으면, X좌표가 0->600으로 이동하도록 애니메이션을 처리할 수 있다. 즉, 웹 엔진부(240)는 애니메이션의 중간 과정 계산을 직접 수행할 수 있다.

또한, 웹 엔진부(240)는 CSS3 트랜지션에 기초하여, CSS3애니메이션을 처리할 수 있다. 예를 들어, CSS3 트랜지션은 지연 시간(delay), 진행 방향(direction), 진행 시간(duration), 반복횟수(iteration-count) 중 적어도 하나를 포함할 수 있다. 지연 시간(delay)은 오브젝트들이 로드되고 나서 언제 애니메이션이 시작될지 지정하는 것일 수 있고, 진행 방향은 애니메이션이 종료되고 다시 처음부터 시작할지 역방향으로 진행할지 지정하는 것일 수 있다. 진행 시간은 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정하는 것일 수 있으며, 반복횟수는 애니메이션이 몇 번 반복될지 지정하는 것일 수 있다.

다시 도 2를 참조하면, 디스플레이부(130)는 렌더링 된 프레임을 표시할 수 있다. 디스플레이부(140)는 PDP, LCD, OLED, 플렉시블 디스플레이(flexible display)등으로 구현될 수 있으며, 또한, 3차원 디스플레이(3D display)로 구현될 수 있다. 또한, 디스플레이부(130)는, 터치 스크린으로 구성되어 출력 장치 이외에 입력 장치로 사용되는 것도 가능하다.

한편, 도 2 및 3에 도시된 애니메이션 처리 장치(100)의 블록도는 일 실시예를 위한 블록도이다. 블록도의 각 구성요소는 실제 구현되는 애니메이션 처리 장치(100)의 사양에 따라 통합, 추가, 또는 생략될 수 있다. 즉, 필요에 따라 2 이상의 구성요소가 하나의 구성요소로 합쳐지거나, 혹은 하나의 구성요소가 2 이상의 구성요소로 세분되어 구성될 수 있다. 또한, 각 블록에서 수행하는 기능은 실시예들을 설명하기 위한 것이며, 그 구체적인 동작이나 장치는 본 발명의 권리범위를 제한하지 아니한다.

도 4는 일 실시예에 따른 애니메이션 처리 방법을 나타내는 흐름도이다.

도 4를 참조하면, 애니메이션 처리 장치(100)는 API를 통하여, 컨테츠에 포함되는 오브젝트들의 애니메이션 정보를 수신할 수 있다(S310).

API를 통해 제공받은 애니메이션 정보는 애니메이션의 속성 정보를 포함할 수 있다.

애니메이션 처리 장치(100)는 애니메이션의 속성에 따라, 애니메이션 처리 모드를 결정할 수 있다(S320).

애니메이션 처리 장치(100)는 애니메이션의 속성이 interpolation이 필요한 속성을 포함하는 경우, 애니메이션 처리 모드를 interpolated 애니메이션 모드로 결정할 수 있으며, 애니메이션의 속성이 interpolation이 필요한 속성을 포함하지 않는 경우, 애니메이션 처리 모드를 CSS3 애니메이션 모드로 결정할 수 있다.

애니메이션 처리 장치(100)는 결정된 처리 모드에 따라, interpolated 애니메이션 처리 모드 및 CSS3 애니메이션 모드 중 어느 하나로 동작할 수 있다(S330).

예를 들어, CSS3 애니메이션 모드는 웹 엔진부(240)에서 애니메이션에 대한 계산(예를 들어, 중간 과정 계산)을 수행하고, 렌더링하는 애니메이션 처리 모드를 나타낸다. 반면에, interpolated애니메이션 모드는 애니메이션 엔진부에서 프레임마다 애니메이션에 대한 계산을 수행하는 애니메이션 처리 모드를 나타낸다. 이에 대해서는, 도 5를 참조하여, 자세히 설명하기로 한다.

도 5는 일 실시예에 따른 애니메이션 처리 방법을 나타내는 흐름도이다.

도 5를 참조하면, 애니메이션 처리 장치(100)는 API에 포함되는 애니메이션의 속성 정보가 interpolation이 필요한 속성을 포함하는지 판단할 수 있다(S410).

판단 결과, 애니메이션의 속성이 interpolation을 필요로 하는 경우, 애니메이션 처리 모드를 interpolated 애니메이션 모드로 전환할 수 있다(S420).

예를 들어, 애니메이션 처리 장치(100)는 애니메이션의 속성이, pause, reverse, seek, time line animation 중 적어도 하나를 포함하는 경우, interpolation이 필요한 애니메이션으로 판단하고, 애니메이션 처리 모드를 interpolated 애니메이션 모드로 결정할 수 있다.

이때, 애니메이션 처리 장치(100)는 이전 애니메이션 처리 모드가 CSS3 애니메이션 모드인 경우, interpolated 애니메이션 모드로 전환하고, 이전 애니메이션 처리 모드가 interpolated 애니메이션 모드인 경우, 그대로 유지할 수 있다.

애니메이션 처리 모드가 interpolated 애니메이션 모드로 전환되면, 애니메이션 처리 장치(100)는 전환된 시점의 오브젝트들에 대한 매트릭스들을 계산할 수 있다(S430). 또한, 애니메이션 처리 장치(100)는 매 프레임마다 오브젝트들 각각에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 웹 엔진부(240)에 렌더링 명령을 내릴 수 있다(S440).

애니메이션 처리 장치(100)는 interpolated 애니메이션이 종료된 상태인지를 판단하고(S450), 종료되지 않은 경우, 매트릭스를 계산하는 과정을 반복할 수 있다.

410단계(S410)의 판단결과, 애니메이션의 속성이 interpolation을 필요로 하지 않는 경우, 애니메이션 처리 모드를 CSS3 애니메이션 모드로 전환할 수 있다(S460).

예를 들어, 애니메이션 처리 장치(100)는 애니메이션의 속성이, translate, opacity, scale, rotate, perspective, matrix 중 적어도 하나를 포함하는 경우, interpolation이 필요하지 않은 애니메이션으로 판단하고, 애니메이션 처리 모드를 CSS3 애니메이션 처리 모드로 결정할 수 있다.

이때, 애니메이션 처리 장치(100)는 이전 애니메이션 처리 모드가 interpolated 애니메이션 모드인 경우, CSS3 애니메이션 모드로 전환하고, 이전 애니메이션 처리 모드가 CSS3 애니메이션 모드인 경우, 그대로 유지할 수 있다.

애니메이션 처리 모드가 CSS3애니메이션 모드로 전환되면, 애니메이션 처리 장치(100)는 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, CSS3 애니메이션을 처리할 수 있다. 애니메이션 처리 모드가 CSS3 애니메이션 모드인 경우, 애니메이션 엔진부(230)는 타겟 매트릭스를 설정하여, 웹 엔진부(240)에 렌더링 명령을 내릴 수 있다. 웹 엔진부(240)는 타겟 매트릭스(예를 들어, translateX(600))를 애니메이션 엔진부(230)로부터 전달받으면, X좌표가 0->600으로 이동하도록 애니메이션을 처리할 수 있다. 즉, 웹 엔진부(240)는 애니메이션의 중간 과정 계산을 직접 수행할 수 있다.

또한, 웹 엔진부(240)는 CSS3 트랜지션에 기초하여, CSS3애니메이션을 처리할 수 있다. 예를 들어, CSS3 트랜지션은 지연 시간(delay), 진행 방향(direction), 진행 시간(duration), 반복횟수(iteration-count) 중 적어도 하나를 포함할 수 있다.

일 실시예에 따른 애니메이션 처리 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다.

이상에서 실시예들에 대하여 상세하게 설명하였지만 본 발명의 권리범위는 이에 한정되는 것은 아니고 다음의 청구범위에서 정의하고 있는 본 발명의 기본 개념을 이용한 당업자의 여러 변형 및 개량 형태 또한 본 발명의 권리범위에 속한다.

Claims

API를 통해 제공받은 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 interpolated 애니메이션 모드 및 CSS3 애니메이션 모드 중 어느 하나로 결정하는 애니메이션 제어부;
상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드로 결정된 경우, 각 프레임마다 오브젝트에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 상기 애니메이션을 처리하는 애니메이션 엔진부; 및
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정된 경우, 상기 오브젝트에 대한 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, 상기 애니메이션을 처리하는 웹 엔진부;를 포함하는 애니메이션 처리 장치.
제1항에 있어서,
상기 애니메이션 제어부는,
상기 애니메이션의 속성이, translate, opacity, scale, rotate, perspective 및 matrix 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 CSS3 애니메이션 모드로 결정하는 애니메이션 처리 장치.
제1항에 있어서,
상기 애니메이션 제어부는,
상기 애니메이션의 속성이 pause, reverse, seek 및 time line animation 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 결정하는 애니메이션 처리 장치.
제1항에 있어서,
상기 애니메이션 제어부는,
상기 애니메이션 처리 모드의 기본 모드를 상기 CSS3 애니메이션 모드로 설정하고, 상기 애니메이션 처리 모드가 상기 interpolate 애니메이션 모드로 결정되는 경우, 상기 CSS3 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 전환하는 애니메이션 처리 장치.
제4항에 있어서,
상기 애니메이션 엔진부는,
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드에서 상기 interpolated 애니메이션 모드로 전환되는 경우, 전환된 시점의 오브젝트에 대한 매트릭스를 계산하는 애니메이션 처리 장치.
제4항에 있어서,
상기 애니메이션 제어부는,
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정되는 경우, 상기 interpolated 애니메이션 모드를 상기 CSS3 애니메이션 모드로 전환하는 애니메이션 처리 장치.
제6항에 있어서,
상기 애니메이션 엔진부는,
상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드에서 상기 CSS3 애니메이션 모드로 전환된 경우, 상기 오브젝트에 대한 타겟 매트릭스를 설정하는 애니메이션 처리 장치.
제1항에 있어서,
상기 타겟 매트릭스는 오브젝트의 타겟 위치를 나타내는 매트릭스인 애니메이션 처리 장치.
제1항에 있어서,
상기 CSS3 트랜지션은, 상기 애니메이션에 대한 지연 시간(delay), 진행 방향(direction), 진행 시간(duration) 및 반복횟수(iteration-count) 중 적어도 하나를 포함하는 애니메이션 처리 장치.
API를 통해 제공받은 애니메이션의 속성(property)에 따라, 애니메이션 처리 모드를 interpolated 애니메이션 모드 및 CSS3 애니메이션 모드 중 어느 하나로 결정하는 단계;
상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드로 결정된 경우, 각 프레임마다 오브젝트에 대한 매트릭스를 계산하고, 계산된 매트릭스에 기초하여, 상기 애니메이션을 처리하는 단계; 및
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정된 경우, 상기 오브젝트에 대한 타겟 매트릭스 및 CSS3 트랜지션에 기초하여, 상기 애니메이션을 처리하는 단계를 포함하는 애니메이션 처리 방법.
제10항에 있어서,
상기 애니메이션 처리 모드를 결정하는 단계는,
상기 애니메이션의 속성이, translate, opacity, scale, rotate, perspective 및 matrix 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 CSS3 애니메이션 모드로 결정하는 단계를 더 포함하는 애니메이션 처리 방법.
제10항에 있어서,
상기 애니메이션 처리 모드를 결정하는 단계는,
상기 애니메이션의 속성이 pause, reverse, seek 및 time line animation 중 적어도 하나를 포함하는 경우, 상기 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 결정하는 단계를 더 포함하는 애니메이션 처리 방법.
제10항에 있어서,
상기 방법은,
상기 애니메이션 처리 모드의 기본 모드를 상기 CSS3 애니메이션 모드로 설정하는 단계; 및
상기 애니메이션 처리 모드가 상기 interpolate 애니메이션 모드로 결정되는 경우, 상기 CSS3 애니메이션 처리 모드를 상기 interpolated 애니메이션 모드로 전환하는 단계를 더 포함하는 애니메이션 처리 방법.
제13항에 있어서,
상기 방법은,
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드에서 상기 interpolated 애니메이션 모드로 전환되는 경우, 전환된 시점의 오브젝트에 대한 매트릭스를 계산하는 단계를 더 포함하는 애니메이션 처리 방법.
제13항에 있어서,
상기 방법은,
상기 애니메이션 처리 모드가 상기 CSS3 애니메이션 모드로 결정되는 경우, 상기 interpolated 애니메이션 모드를 상기 CSS3 애니메이션 모드로 전환하는 단계를 더 포함하는 애니메이션 처리 방법.
제15항에 있어서,
상기 방법은,
상기 애니메이션 처리 모드가 상기 interpolated 애니메이션 모드에서 상기 CSS3 애니메이션 모드로 전환된 경우, 상기 오브젝트에 대한 타겟 매트릭스를 설정하는 단계를 더 포함하는 애니메이션 처리 방법.
제10항에 있어서,
상기 타겟 매트릭스는 오브젝트의 타겟 위치를 나타내는 매트릭스인 애니메이션 처리 방법.
제10항에 있어서,
상기 CSS3 트랜지션은, 상기 애니메이션에 대한 지연 시간(delay), 진행 방향(direction), 진행 시간(duration) 및 반복횟수(iteration-count) 중 적어도 하나를 포함하는 애니메이션 처리 방법.
제10항의 방법을 컴퓨터에서 실행시키기 위한 프로그램을 기록한 컴퓨터로 읽을 수 있는 기록매체.