KR20110096957A

KR20110096957A - Object oriented method of animation for component and recording medium for the same

Info

Publication number: KR20110096957A
Application number: KR1020100016544A
Authority: KR
Inventors: 송화준
Original assignee: (주)투비소프트
Priority date: 2010-02-24
Filing date: 2010-02-24
Publication date: 2011-08-31
Also published as: KR101108480B1; JP5261516B2; JP2011175643A

Abstract

컴포넌트의 색깔, 위치 또는 형태 등 속성 변화를 연속적으로 표현하여 시각효과를 극대화하는 애니메이션 기술이 개시된다. 본 발명에 따른 객체 지향적 컴포넌트 애니메이션 방법은, 애니메이션 관리부가 하나 이상의 애니메이션 객체와 상기 애니메이션 객체에 바인딩된 컴포넌트로 이루어진 애니메이션 목록을 로딩하는 단계; 상기 애니메이션 관리부가 일정한 간격으로 발생하는 틱(tick)에 기초하여 상기 애니메이션 목록 중 활성화된 애니메이션 객체로 애니메이션 틱을 전달하는 단계; 상기 활성화된 애니메이션 객체가 상기 애니메이션 틱을 이용하여 보간값을 생성하고, 상기 보간값에 기초하여 애니메이션 이벤트를 생성하여 상기 바인딩된 컴포넌트로 전달하는 단계; 및 상기 바인딩된 컴포넌트가 상기 애니메이션 이벤트에 기초하여 렌더링 엔진으로 리드로우(redraw)를 요청하는 단계를 포함한다. 따라서, 계층 구조의 객체들을 이용하여 정형화되고 구조적으로 애니메이션 효과를 제공할 수 있다.An animation technique for maximizing visual effects by continuously expressing changes in attributes such as color, position, or shape of a component is disclosed. An object-oriented component animation method according to the present invention comprises: loading, by an animation manager, an animation list including at least one animation object and a component bound to the animation object; Transmitting animation ticks to an activated animation object in the animation list based on ticks generated by the animation manager at regular intervals; Generating, by the activated animation object, an interpolation value using the animation tick, generating an animation event based on the interpolation value, and delivering the generated animation event to the bound component; And requesting, by the bound component, a redraw from a rendering engine based on the animation event. Thus, hierarchical objects can be used to provide a structured and structurally animated effect.

Description

Object oriented method of animation for component and recording medium for the same

본 발명은 애니메이션 효과(animation effect)에 관한 것으로, 특히 화면에 표시되는 컴포넌트의 색깔, 위치 또는 형태 등 속성의 변화를 연속적으로 표현하는 애니메이션 기술에 관한 것이다.BACKGROUND OF THE INVENTION 1. Field of the Invention The present invention relates to animation effects, and more particularly, to an animation technique for continuously expressing changes in attributes such as color, position, or shape of a component displayed on a screen.

애니메이션 기능은 화면에 표시되는 컴포넌트의 색깔, 위치 또는 형태 등 속성의 변화를 연속적으로 표현하여 사용자 인터페이스(User Interface; UI)의 시각적인 효과를 극대화하기 위해 사용된다. 예를 들어, 마이크로소프트(Microsoft)사의 파워포인트(PowerPoint)에서 슬라이드 내의 객체에 애니메이션 효과를 적용하면 글자가 하늘에서 떨어지거나 왼편에서 오른편으로 이동하는 등의 시각적인 효과를 얻을 수 있다.The animation function is used to maximize the visual effect of the user interface (UI) by continuously expressing changes in attributes such as color, position, or shape of a component displayed on the screen. For example, if you apply animation effects to objects in a slide in PowerPoint from Microsoft, you can get visual effects such as letters falling from the sky or moving from left to right.

웹 어플리케이션의 경우에도 웹을 통하여 화면에 보여지는 컴포넌트에 애니메이션이 적용되는 경우가 많다. 예를 들어, 화면에 보여지는 컴포넌트의 위치가 (a, b)에서 (c, d)로 바뀌는 경우에 이를 순간적으로 보여주지 않고 기설정된 시간 구간 동안 점진적으로 변화하게 하는 효과가 필요한 경우가 많다. 다른 예로, 화면에 보여지는 컴포넌트의 색깔이 빨간색에서 보라색으로 바뀌는 경우에도 이를 빨간색에서 순간적으로 보라색으로 바꾸지 않고, 빨간색에서 점차적으로 보라색으로 바꿀 필요가 있는 경우가 있다.Even in a web application, animation is often applied to a component displayed on the screen through the web. For example, when the position of the component shown on the screen is changed from (a, b) to (c, d), it is often necessary to have an effect of gradually changing during a predetermined time period without showing it instantaneously. As another example, even when the color of a component displayed on the screen changes from red to purple, it may be necessary to gradually change from red to purple, instead of changing from red to instant purple.

나아가, 요구되는 그래피컬 유저 인터페이스(Graphical User Interface)의 수준이 날로 높아져 감에 따라 단순한 화면 구성으로는 사용자들을 만족시키기 어렵고, 따라서 보다 많은 애니메이션 기법의 적용이 요구된다.Furthermore, as the level of the required graphical user interface increases, it is difficult to satisfy users with a simple screen configuration, and thus more animation techniques are required.

근본적으로 애니메이션은 속성이나 위치 등의 시작점과 끝점이 정의되고 그 사이에서 기설정된 시간간격으로 발생하는 이벤트에 근거하여 중간값들을 산출하는 방식으로 구현된다.Fundamentally, animations are implemented in such a way that start and end points, such as properties and positions, are defined and intermediate values are calculated based on events that occur at predetermined time intervals between them.

따라서, 애니메이션 효과를 구현하기 위해서는 개발자가 타이머 등을 이용하여 반복적인 이벤트(event)를 발생시키고 이벤트 발생시마다 유저 인터페이스 객체(User Interface Object)의 속성값을 적절히 변경하거나 이미지를 반복적으로 사용하여야 한다.Therefore, in order to implement an animation effect, a developer must generate a repetitive event using a timer or the like and appropriately change an attribute value of a user interface object or use an image repeatedly whenever an event occurs.

그러나, 애니메이션 효과를 구현하는 개발자의 능력에 따라 애니메이션 효과가 천차만별이고 애니메이션 효과 구현에 중복되는 부분이 있음에도 유사한 애니메이션 효과 구현을 위해 노력과 시간이 중복 투자되는 문제점이 있었다.However, according to the developer's ability to implement animation effects, even though the animation effects vary greatly, and there are overlapping parts in the implementation of animation effects, there is a problem in that effort and time are repeatedly invested in implementing similar animation effects.

결국, 쉽고 용이하게 애니메이션 효과를 구현할 수 있고 새로운 애니메이션 효과가 필요한 경우 주어진 패턴을 간단히 변경하는 것 만으로도 원하는 애니메이션 효과를 구현할 수 있는 새로운 애니메이션 기법의 필요성이 절실하게 대두된다.As a result, when an animation effect can be easily and easily implemented, and a new animation effect is needed, a necessity of a new animation technique that can realize desired animation effect by simply changing a given pattern is urgently needed.

상기한 과제를 해결하기 위한 본 발명의 목적은, 렌더링 엔진, 애니메이션 객체 및 컴포넌트 객체 등의 다양한 주체가 객체 지향적으로 동작하여 간단하고 체계적으로 애니메이션 효과를 제공하여 컴포넌트의 색깔, 위치 또는 형태 등 속성의 변화를 연속적으로 표현하는 것이다.An object of the present invention for solving the above problems is that various subjects such as rendering engines, animation objects, and component objects operate in an object-oriented manner to provide animation effects simply and systematically, thereby providing a property such as color, position, or shape of a component. It is a continuous expression of change.

또한, 본 발명은 애니메이션 효과의 공통 특성을 가진 애니메이션 베이스 객체 및 이를 상속한 3가지 애니메이션 객체를 이용하여 정형화되고 구조적으로 애니메이션 효과를 제공할 수 있는 패턴을 제공하는 것을 목적으로 한다.In addition, an object of the present invention is to provide a pattern that can provide a standardized and structurally animated effect using the animation base object having the common characteristics of the animation effect and three animation objects inheriting it.

또한, 본 발명은 둘 이상의 애니메이션 객체에 상응하는 복합 애니메이션 객체를 정의하고, 복합 애니메이션 객체 내에서 정의된 속성을 상기 복합 애니메이션 객체에 포함된 애니메이션 객체의 속성이 정의되지 않은 경우에 디폴트(default) 값으로 사용되도록 하여 애니메이션 효과의 기능변경이 용이해지도록 하는 것을 목적으로 한다.In addition, the present invention defines a complex animation object corresponding to two or more animation objects, the default value when the properties defined in the complex animation object is not defined in the properties of the animation object included in the complex animation object Its purpose is to make it easy to change the function of animation effects.

상기한 목적을 달성하기 위한 본 발명에 따른 객체 지향적 컴포넌트 애니메이션 방법은, 애니메이션 관리부가 하나 이상의 애니메이션 객체와 상기 애니메이션 객체에 바인딩된 컴포넌트로 이루어진 애니메이션 목록을 로딩하는 단계; 상기 애니메이션 관리부가 일정한 간격으로 발생하는 틱(tick)에 기초하여 상기 애니메이션 목록 중 활성화된 애니메이션 객체로 애니메이션 틱을 전달하는 단계; 상기 활성화된 애니메이션 객체가 상기 애니메이션 틱을 이용하여 보간값을 생성하고, 상기 보간값에 기초하여 애니메이션 이벤트를 생성하여 상기 바인딩된 컴포넌트로 전달하는 단계; 및 상기 바인딩된 컴포넌트가 상기 애니메이션 이벤트에 기초하여 렌더링 엔진으로 리드로우(redraw)를 요청하는 단계를 포함한다.According to an aspect of the present invention, there is provided an object-oriented component animation method comprising: loading, by an animation manager, an animation list including at least one animation object and a component bound to the animation object; Transmitting animation ticks to an activated animation object in the animation list based on ticks generated by the animation manager at regular intervals; Generating, by the activated animation object, an interpolation value using the animation tick, generating an animation event based on the interpolation value, and delivering the generated animation event to the bound component; And requesting, by the bound component, a redraw from a rendering engine based on the animation event.

이 때, 상기 애니메이션 객체는, 시작값과 끝값을 가지고 중간값이 명확한 속성(property)의 변화를 나타내는 속성 애니메이션(property animation) 객체; 변경 전/후의 두 이미지들 사이의 형태 변화를 나타내는 트랜지션 애니메이션(transition animation) 객체; 및 좌표값 변경을 나타내는 무브 애니메이션(move animation) 객체 중 어느 하나 이상일 수 있다.In this case, the animation object may include: a property animation object having a start value and an end value and indicating a change in a property in which an intermediate value is apparent; A transition animation object representing a shape change between two images before and after the change; And a move animation object indicating a change in coordinate values.

이 때, 상기 속성 애니메이션 객체, 상기 트랜지션 애니메이션 객체 및 상기 무브 애니메이션 객체는 모두 애니메이션 베이스 객체(animation base object)를 상속받으며, 상기 애니메이션 베이스 객체는 상기 틱에 기반하여 인터폴레이션 객체(interpolation object)를 이용하여 상기 보간값을 생성하는 기본 기능을 수행할 수 있다.In this case, the property animation object, the transition animation object, and the move animation object all inherit an animation base object, and the animation base object uses an interpolation object based on the tick. The basic function of generating the interpolation value may be performed.

이 때, 상기 애니메이션 객체는 상기 속성 애니메이션 객체, 상기 트랜지션 애니메이션 객체 및 상기 무브 애니메이션 객체 중 둘 이상에 상응하는 객체인 복합 애니메이션(composite animation) 객체일 수 있다.In this case, the animation object may be a composite animation object that is an object corresponding to two or more of the property animation object, the transition animation object, and the move animation object.

이 때, 상기 복합 애니메이션 객체에서 정의된 속성은 상기 복합 애니메이션 객체에 포함되는 상기 속성 애니메이션 객체, 상기 트랜지션 애니메이션 객체 또는 상기 무브 애니메이션 객체의 속성이 정의되지 않은 경우에 디폴트(default) 값으로 사용될 수 있다.In this case, the property defined in the complex animation object may be used as a default value when the property of the property animation object, the transition animation object, or the move animation object included in the complex animation object is not defined. .

본 발명에 따르면, 렌더링 엔진, 애니메이션 객체 및 컴포넌트 객체 등의 다양한 주체가 객체 지향적으로 동작하여 간단하고 체계적으로 애니메이션 효과를 제공하여 컴포넌트의 색깔, 위치 또는 형태 등 속성의 변화를 연속적으로 표현할 수 있다.According to the present invention, various subjects, such as a rendering engine, an animation object, and a component object, operate object-oriented to provide animation effects simply and systematically to continuously express changes in attributes such as color, position, or shape of a component.

또한, 본 발명은 애니메이션 효과의 공통 특성을 가진 애니메이션 베이스 객체 및 이를 상속한 3가지 애니메이션 객체를 이용하여 정형화되고 구조적으로 애니메이션 효과를 제공할 수 있다.In addition, the present invention can provide a standardized and structurally animated effect using an animation base object having common characteristics of animation effects and three animation objects inheriting the animation base object.

또한, 본 발명은 둘 이상의 애니메이션 객체에 상응하는 복합 애니메이션 객체를 정의하고, 복합 애니메이션 객체 내에서 정의된 속성을 상기 복합 애니메이션 객체에 포함된 애니메이션 객체의 속성이 정의되지 않은 경우에 디폴트(default) 값으로 사용되도록 하여 애니메이션 효과의 기능변경이 용이하다.In addition, the present invention defines a complex animation object corresponding to two or more animation objects, the default value when the properties defined in the complex animation object is not defined in the properties of the animation object included in the complex animation object It is easy to change the function of animation effect.

도 1은 컴포넌트 애니메이션의 일 예를 나타낸 도면이다.
도 2는 애니메이션 객체의 계층구조를 나타낸 블록도이다.
도 3은 본 발명의 일실시예에 따른 애니메이션 관리부로 로딩되는 애니메이션 목록의 일 예를 나타낸 도면이다.
도 4는 본 발명의 일실시예에 따른 컴포넌트 애니메이션 방법의 동작 주체를 나타낸 블록도이다.
도 5는 본 발명의 일실시예에 따른 컴포넌트 애니메이션 방법을 나타낸 동작 흐름도이다.1 is a diagram illustrating an example of a component animation.
2 is a block diagram illustrating a hierarchy of animation objects.
3 is a diagram illustrating an example of an animation list loaded into the animation manager according to an embodiment of the present invention.
4 is a block diagram showing the operation of the component animation method according to an embodiment of the present invention.
5 is an operation flowchart showing a component animation method according to an embodiment of the present invention.

본 발명을 첨부된 도면을 참조하여 상세히 설명하면 다음과 같다. 여기서, 반복되는 설명, 본 발명의 요지를 불필요하게 흐릴 수 있는 공지 기능, 및 구성에 대한 상세한 설명은 생략한다. 본 발명의 실시형태는 당 업계에서 평균적인 지식을 가진 자에게 본 발명을 보다 완전하게 설명하기 위해서 제공되는 것이다. 따라서, 도면에서의 요소들의 형상 및 크기 등은 보다 명확한 설명을 위해 과장될 수 있다.
Hereinafter, the present invention will be described in detail with reference to the accompanying drawings. Here, the repeated description, well-known functions and configurations that may unnecessarily obscure the subject matter of the present invention, and detailed description of the configuration will be omitted. Embodiments of the present invention are provided to more completely describe the present invention to those skilled in the art. Accordingly, the shape and size of elements in the drawings may be exaggerated for clarity.

이하, 본 발명에 따른 바람직한 실시예를 첨부된 도면을 참조하여 상세하게 설명한다.
Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings.

도 1은 컴포넌트 애니메이션의 일 예를 나타낸 도면이다.1 is a diagram illustrating an example of a component animation.

도 1을 참조하면, 컴포넌트가 시작점(110)에서 끝점(120)까지 이동하는 동안 그 좌표값의 변화(130)가 연속적으로 표시되는 것을 알 수 있다.Referring to FIG. 1, it can be seen that the change 130 of the coordinate value is continuously displayed while the component moves from the start point 110 to the end point 120.

즉, 본 발명에서 애니메이션은 시작과 끝을 가지고 변화하는 속성, 형태 또는 위치를 연속적으로(사실은 불연속적이지만 사용자가 느끼기에 연속적으로) 표시하는 것을 의미한다.In other words, in the present invention, animation means continuously displaying attributes, shapes, or positions that change with the beginning and the end (in fact, discontinuously but continuously by the user's feeling).

예를 들어, 애니메이션은 빨간 사과가 파란색으로 바뀌어 가는 과정을 처음과 끝만 표시하는 것이 아니고 연속적으로 표시하는 것일 수 있다.For example, the animation may be to display the process of the red apple turning blue, not only the beginning and the end but also in succession.

예를 들어, 애니메이션은 종이의 앞면을 나타내는 이미지가 종이의 뒷면을 나타내는 이미지로 변하는 과정을(종이가 뒤집히는 과정) 연속적으로 표시하는 것일 수 있다.For example, the animation may be to continuously display a process of turning the image representing the front side of the paper into the image representing the back side of the paper (the process of turning the paper upside down).

예를 들어, 애니메이션은 공의 위치가 화면의 왼쪽 하단에서 오른쪽 상단으로 이동하는 과정을 연속적으로 표시하는 것일 수 있다.For example, the animation may continuously display a process of moving the ball position from the lower left to the upper right of the screen.

이와 같이, 애니메이션은 시작과 끝을 가지고 변화하는 속성, 형태 또는 위치를 연속적으로 표시하기 위해 그 중간값을 산출하여야 한다. 본 발명에서는 중간값을 산출하는 애니메이션의 기본 기능을 애니메이션 베이스 객체를 통하여 구현하고, 구체적인 애니메이션 동작을 애니메이션 베이스 객체의 하위 객체로 구현함으로써 애니메이션이 보다 효율적으로 동작하고 그 기능 변경이 용이하도록 한다.
As such, the animation must calculate its median value in order to continuously display changing attributes, shapes, or positions with start and end. In the present invention, the basic function of the animation for calculating the intermediate value is implemented through the animation base object, and the specific animation motion is implemented as a sub-object of the animation base object, so that the animation operates more efficiently and its function can be easily changed.

도 2는 애니메이션 객체의 계층구조를 나타낸 블록도이다.2 is a block diagram illustrating a hierarchy of animation objects.

도 2를 참조하면, 애니메이션 객체는 크게 속성 애니메이션 객체(property animation object)(220), 트랜지션 애니메이션 객체(transition animation object)(230), 무브 애니메이션 객체(move animation object)(240)로 구분되는 것을 알 수 있다.Referring to FIG. 2, it can be seen that the animation object is roughly divided into a property animation object 220, a transition animation object 230, and a move animation object 240. Can be.

속성 애니메이션 객체(220), 트랜지션 애니메이션 객체(230) 및 무브 애니메이션 객체(240)는 모두 애니메이션 베이스 객체(210)라는 공통 객체를 상속받는다.The property animation object 220, the transition animation object 230, and the move animation object 240 all inherit a common object called the animation base object 210.

애니메이션 베이스 객체(210)는 애니메이션이 가져야 할 기본 속성을 정의하며, 인터폴레이션 객체(interpolation object)(211)를 이용하여 보간값을 생성하고 이를 통해 애니메이션의 공통 기능을 수행한다.The animation base object 210 defines a basic property that the animation should have, generates an interpolation value using an interpolation object 211, and performs a common function of the animation.

즉, 애니메이션은 공통적으로 시작과 끝을 가지고 시작과 끝 사이에서 소정의 간격마다 이벤트를 생성하는 기능을 필요로 하고, 애니메이션 베이스 객체에서는 틱이 발생할 때마다 시작과 끝 사이의 중간값에 해당하는 보간값을 인터폴레이션 객체를 이용하여 생성하는 기능이 정의되고 하위 애니메이션 객체들은 애니메이션 베이스 객체를 상속 받음으로써 보간값을 생성하는 애니메이션의 기본 기능을 제공 받게 된다.In other words, animation commonly has the beginning and end, and requires the ability to generate an event at predetermined intervals between the beginning and the end, and in an animation base object, the interpolation corresponding to the median value between the beginning and the end of each tick occurs. The function to create a value using an interpolation object is defined, and the lower animation objects inherit the animation base object to provide the basic function of animation to generate interpolation values.

인터폴레이션 객체(211)는 애니메이션의 여러 가지 표현형태를 제공할 수 있도록 몇 가지 미리 정의된 함수를 제공할 수 있고, 인터폴레이션 객체(211)에는 사용자가 정의한 함수가 추가될 수도 있다. 인터폴레이션이란 시작값과 끝값을 기준으로 진행 정도에 따른 미지의 중간값을 결정하는 것이다.The interpolation object 211 may provide some predefined functions to provide various representations of animation, and the user-defined function may be added to the interpolation object 211. Interpolation is the determination of the unknown median value of the progress based on the start and end values.

시간에 따른 애니메이션의 진행은 렌더링 엔진(rendering engine)에 내장된 애니메이션 관리부(animation manager)에 의해서 관리되며 시간에 따라 틱(tick)을 발생시키면서 진행하게 된다.The progress of animation over time is managed by an animation manager embedded in a rendering engine, and progresses while generating ticks over time.

도 2에 도시된 계층 구조를 가지는 애니메이션 객체에 의해 컴포넌트의 속성이 바뀌거나 형태나 위치가 변경된 컴포넌트가 렌더링 엔진에 리드로우(redraw)를 요청하게 되고 컴포넌트의 캔버스(canvas)를 통해 리드로우가 반복적으로 수행됨으로써 화면에 애니메이션 효과가 표현되게 된다.
A component whose property is changed or whose shape or position is changed by the animation object having the hierarchical structure shown in FIG. 2 requests a redraw from the rendering engine, and the redraw is repeatedly performed through the canvas of the component. As a result, the animation effect is expressed on the screen.

도 3은 본 발명의 일실시예에 따른 애니메이션 관리부로 로딩되는 애니메이션 목록의 일 예를 나타낸 도면이다.3 is a diagram illustrating an example of an animation list loaded into the animation manager according to an embodiment of the present invention.

도 3을 참조하면, 애니메이션 목록에는 M(M은 1 이상의 자연수) 개의 애니메이션 객체들(Animation 1 ~ Animation M) 및 애니메이션 객체들(Animation 1 ~ Animation M)에 바인딩(binding)된 N(N은 1 이상의 자연수) 개의 컴포넌트들(Component 1 ~ Component N)이 포함되는 것을 알 수 있다.Referring to FIG. 3, the animation list includes N (M is 1 or more natural numbers) animation objects (Animation 1 to Animation M) and N (N is 1) bound to animation objects (Animation 1 to Animation M). It can be seen that the number of components (Component 1 to Component N) is included.

한 개의 컴포넌트에 복수 개의 애니메이션 기능이 제공되는 경우 해당 컴포넌트는 복수 개의 애니메이션 객체에 바인딩될 수 있다.When a plurality of animation functions are provided to one component, the corresponding component may be bound to a plurality of animation objects.

반대로, 한 개의 애니메이션 객체에 연동하여 둘 이상의 컴포넌트에 애니메이션 기능에 제공되는 경우 한 개의 애니메이션 객체에 복수 개의 컴포넌트가 바인딩될 수 있다.On the contrary, when the animation function is provided to two or more components in association with one animation object, a plurality of components may be bound to one animation object.

컴포넌트들은 각각 자신과 바인딩된 애니메이션 객체를 통해 애니메이션 기능이 제공된다.The components are each animated with an animation object bound to it.

본 명세서에서 컴포넌트(component)란 사용자와의 상호작용을 지원하기 위하여 사용자 인터페이스를 제공하거나, 사용자에게는 보이지 않지만 특정한 비즈니스 로직을 수행하기 위한 소프트웨어이다. 컴포넌트는 재사용성이 높도록 배포 및 실행 가능하게 개발된 것일 수 있다. 예를 들어, 컴포넌트는 웹 어플리케이션에서 사용되는 버튼(button)일 수 있다.In the present specification, a component is software for providing a user interface to support an interaction with a user or for performing specific business logic that is not visible to the user. Components may be developed to be distributed and executable to be highly reusable. For example, the component may be a button used in a web application.

애니메이션 목록에 포함된 컴포넌트들(Component 1 ~ Component N) 중에는 활성화된 애니메이션들(310)이 있고, 나머지 애니메이션들은 비활성화 되어있을 수 있다.Among the components included in the animation list (Component 1 to Component N), there are activated animations 310 and the remaining animations may be inactive.

즉, 애니메이션 기능 제공을 위해 주기적으로 틱이 발생하는 경우 애니메이션 목록에 포함된 활성화된 애니메이션들(310)에 대해서는 애니메이션 기능을 위한 동작이 수행되나, 비활성화된 애니메이션들에 대해서는 애니메이션 기능을 위한 동작이 수행될 필요가 없다.
That is, when a tick occurs periodically to provide an animation function, an operation for an animation function is performed for the activated animations 310 included in the animation list, but an operation for an animation function is performed for the deactivated animations. Need not be.

도 4는 본 발명의 일실시예에 따른 컴포넌트 애니메이션 방법의 동작 주체를 나타낸 블록도이다.4 is a block diagram showing the operation of the component animation method according to an embodiment of the present invention.

도 4를 참조하면, 컴포넌트(410)는 상응하는 캔버스(411)를 포함할 수 있다.Referring to FIG. 4, component 410 may include a corresponding canvas 411.

캔버스(canvas)(411)는 화면에 드로잉(drawing)되는 최소 단위로, 상응하는 영역을 가지고 있다. 하나의 컴포넌트 안에는 복수 개의 캔버스들이 포함될 수도 있다.The canvas 411 is a minimum unit drawing on the screen and has a corresponding area. A single component may include a plurality of canvases.

속성 애니메이션 객체(420), 트랜지션 애니메이션 객체(430) 및 무브 애니메이션 객체(440)는 모두 도 2를 통하여 설명한 바와 같이 애니메이션 베이스 객체를 상속받는다.The attribute animation object 420, the transition animation object 430, and the move animation object 440 all inherit the animation base object as described with reference to FIG. 2.

애니메이션 베이스 객체는 애니메이션이 가져야 할 기본 속성들(시작 값, 끝 값, 사용되는 인터폴레이션 객체 등)을 정의하고 있으며, 인터폴레이션 객체를 이용하여 보간값을 만들어내고 이를 통해 애니메이션의 기능을 수행한다.The animation base object defines the basic properties (start value, end value, interpolation object, etc.) that the animation should have. The interpolation object is used to create interpolation values and perform animation functions.

속성 애니메이션 객체(420)는 속성 값을 직접 변경하는 애니메이션이다. 이 때, 속성 값은 시작값과 끝값을 가지고 중간값을 구할 수 있는 스칼라(scalar)값이다. 예를 들어, 속성 값은 컬러 값일 수 있다. 숫자로 표현된 컬러 값은 시작값과 끝 값이 정해지면 그 중간값이 명확하게 결정될 수 있다.The property animation object 420 is an animation that directly changes the property value. At this time, the attribute value is a scalar value from which the median value can be obtained from the start value and the end value. For example, the attribute value may be a color value. The color value represented by the number can be clearly determined when the start value and the end value are determined.

따라서, 텍스트(text)나 불리언(Boolean) 값과 같이 중간 값의 개념이 모호한 속성(property)은 애니메이션의 대상이 아니고, 위치(position)나 글로우(glow)의 팩터(factor) 와 같은 속성의 경우에는 애니메이션의 대상이 될 수 있다.Therefore, properties whose ambiguity, such as text or Boolean values, are ambiguous, are not subject to animation, but properties such as position or glow factors. Can be the target of animation.

트랜지션 애니메이션(430)은 변경 전/후의 두 이미지들 사이의 형태 변화를 애니메이션 시킨다. 즉, 트랜지션 애니메이션(430)은 컴포넌트가 프로퍼티 셋(property set)이나 매쏘드(method) 호출로 인해서 변경이 되었을 때 변경전과 후의 모습이나 형태를 변경 전 이미지와 변경 후 이미지로 만들어 두 이미지의 변화를 애니메이션 시킨다.The transition animation 430 animate the shape change between the two images before and after the change. That is, the transition animation 430 animate the change of two images by making the before and after image and the before and after image when the component is changed due to property set or method call. Let's do it.

예를 들어, 트랜지션 애니메이션(430)은 종이의 앞/뒷면을 나타내는 이미지가 점차적으로 바뀌는 변화(앞면이 보이던 종이가 점차적으로 뒤집히는 변화)를 나타내는 애니메이션일 수 있다. 이러한 기능의 예로는 flip3d나 slide가 있다.For example, the transition animation 430 may be an animation indicating a change in which an image representing the front / back side of the paper is gradually changed (the change in which the front view paper is gradually turned over). Examples of such functions are flip3d or slide.

무브 애니메이션(440)은 컴포넌트의 좌표 변경 시, 시작 값에서 끝 값으로 위치 변경을 인터폴레이션식에 의해 애니메이션 시킨다.The move animation 440 animate the position change from the start value to the end value by interpolation when changing the coordinates of the component.

무브 애니메이션(440)은 말 그대로 객체의 위치가 바뀌는 경우에 시작 위치로부터 끝 위치까지의 위치 변화를 점진적으로 나타내는 애니메이션이다.The move animation 440 is an animation that gradually shows the position change from the start position to the end position when the position of the object is changed.

도 4에는 도시되지 아니하였으나, 본 발명의 일실시예에 따르면 복합 애니메이션 객체(composite animation object)가 제공될 수 있다.Although not shown in FIG. 4, a composite animation object may be provided according to an embodiment of the present invention.

복합 애니메이션 객체는 트랜지션 애니메이션 객체 및 프로퍼티 애니메이션 객체 등의 애니메이션 객체들이 복수개 등록되어 동시에 여러 개의 애니메이션을 동작시킬 수 있는 애니메이션 객체이다.The composite animation object is an animation object that can register several animation objects such as transition animation objects and property animation objects and operate several animations at the same time.

복합 애니메이션 객체에서 정의된 속성은 복합 애니메이션 객체에 포함되는 속성 애니메이션 객체, 트랜지션 애니메이션 객체 또는 무브 애니메이션 객체의 속성이 정의되지 않은 경우에 디폴트(default) 값으로 사용될 수 있다.Properties defined in the composite animation object may be used as default values when the properties of the property animation object, transition animation object, or move animation object included in the composite animation object are not defined.

렌더링 엔진(rendering engine)(450)은 컴포넌트(410)를 캔버스(411)에 드로잉(drawing)하는 엔진으로 렌더링 엔진(450)을 통해 실제 드로잉(drawing)이 작동된다.The rendering engine 450 is an engine for drawing the component 410 on the canvas 411, and the actual drawing is performed through the rendering engine 450.

렌더링 엔진(450)은 애니메이션 관리부(animation manager)(451)를 포함할 수 있다. 애니메이션 관리부(451)는 사용자가 실행시킨 애니메이션들을 관리하는 객체로, 애니메이션 관리부(451)에 등록된 애니메이션을 렌더링 엔진이 화면에 표현하게 된다.The rendering engine 450 may include an animation manager 451. The animation manager 451 is an object managing animations executed by a user, and the rendering engine expresses an animation registered in the animation manager 451 on the screen.

애니메이션 기능은 컴포넌트(410)의 속성값의 변화나 형태의 변화 또는 위치의 변화를 연속적으로 표현해줌으로써 유저 인터페이스의 시각적인 효과를 극대화하기 위해 사용된다.The animation function is used to maximize the visual effect of the user interface by continuously expressing the change in the attribute value, the change in form or the change in position of the component 410.

시간에 따른 애니메이션의 진행은 렌더링 엔진(450)에 내장된 애니메이션 관리부(451)에 의해서 관리되며 시간에 따라서 틱을 발생시키면서 진행하게 된다.The progress of the animation over time is managed by the animation manager 451 embedded in the rendering engine 450 and progresses while generating a tick according to time.

애니메이션 객체들(420, 430, 440)에 의해 컴포넌트(410)의 속성이 바뀌거나 형태가 변경되거나 위치가 변경되는 경우에 컴포넌트(410)가 렌더링 엔진(450)에 리드로우를 요청하게 되고, 컴포넌트(410)의 캔버스(411)를 통해 화면에 애니메이션 되는 모습이 표현되게 된다.
When the properties of the component 410 are changed, changed in shape, or repositioned by the animation objects 420, 430, and 440, the component 410 requests a render to the rendering engine 450. The animation 410 is displayed on the screen through the canvas 411 of 410.

도 5는 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법을 나타낸 동작 흐름도이다.5 is a flowchart illustrating an object-oriented component animation method according to an embodiment of the present invention.

도 5를 참조하면, 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법은 애니메이션 관리부가 하나 이상의 애니메이션 객체와 상기 애니메이션 객체에 바인딩된 컴포넌트로 이루어진 애니메이션 목록을 로딩한다(S510).Referring to FIG. 5, in the object-oriented component animation method according to an embodiment of the present invention, the animation manager loads an animation list including one or more animation objects and components bound to the animation object (S510).

이 때, 상기 애니메이션 객체는 시작값과 끝값을 가지고 중간값이 명확한 속성(property)의 변화를 나타내는 속성 애니메이션(property animation) 객체, 변경 전/후의 두 이미지들 사이의 형태 변화를 나타내는 트랜지션 애니메이션(transition animation) 객체 및 좌표값 변경을 나타내는 무브 애니메이션(move animation) 객체 중 어느 하나 이상일 수 있다.In this case, the animation object has a start value and an end value, and a property animation object representing a change in property having a clear intermediate value, and a transition animation representing a shape change between two images before and after the change. At least one of an animation object and a move animation object indicating a change in coordinate values.

실시예에 따라, 상기 애니메이션 객체는 상기 속성 애니메이션 객체, 상기 트랜지션 애니메이션 객체 및 상기 무브 애니메이션 객체 중 둘 이상에 상응하는 객체인 복합 애니메이션(composite animation) 객체일 수 있다.According to an embodiment, the animation object may be a composite animation object that is an object corresponding to two or more of the property animation object, the transition animation object, and the move animation object.

또한, 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법은 상기 애니메이션 관리부가 일정한 간격으로 발생하는 틱(tick)에 기초하여 상기 애니메이션 목록 중 활성화된 애니메이션 객체로 애니메이션 틱을 전달한다(S520).In the object-oriented component animation method according to an embodiment of the present invention, the animation manager transmits the animation ticks to the activated animation object in the animation list based on ticks generated at regular intervals (S520).

이 때, 틱이 일정한 간격으로 발생한다면, 애니메이션 틱은 해당 애니메이션이 리드로우되어야 하는 타이밍마다 발생하는 것일 수 있다. 예를 들어, 틱이 1ms 간격으로 발생한다면 애니메이션 틱은 5ms 간격으로 발생하는 것일 수 있다.At this time, if the ticks occur at regular intervals, the animation ticks may be generated at each timing at which the corresponding animation should be read. For example, if ticks occur at 1 ms intervals, animation ticks may occur at 5 ms intervals.

또한, 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법은 상기 활성화된 애니메이션 객체가 상기 애니메이션 틱을 이용하여 보간값을 생성하고, 상기 보간값에 기초하여 애니메이션 이벤트를 생성하여 상기 바인딩된 컴포넌트로 전달한다(S530).In addition, in the object-oriented component animation method according to an embodiment of the present invention, the activated animation object generates an interpolation value using the animation tick, and generates an animation event based on the interpolation value to the bound component. Transfer (S530).

이 때, 애니메이션 이벤트는 해당 타이밍의 진행 상태에 상응하는 상태값(상태, 위치, 형태 등)을 포함할 수 있다.At this time, the animation event may include a state value (state, position, shape, etc.) corresponding to the progress state of the corresponding timing.

또한, 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법은 상기 바인딩된 컴포넌트가 상기 애니메이션 이벤트에 기초하여 렌더링 엔진으로 리드로우(redraw)를 요청한다(S540).In addition, in the object-oriented component animation method according to an embodiment of the present invention, the bound component requests a redraw to a rendering engine based on the animation event (S540).

또한, 본 발명의 일실시예에 따른 객체 지향적 컴포넌트 애니메이션 방법은 상기 렌더링 엔진이 상기 바인딩된 컴포넌트에 상응하는 캔버스에 상기 컴포넌트를 리드로우한다(S550).In addition, in the object-oriented component animation method according to an embodiment of the present invention, the rendering engine reads the component onto a canvas corresponding to the bound component (S550).

단계들(S520 ~ S550)은 틱이 발생할 때마다 활성화된 애니메이션 객체에 대하여 반복되어 소정 시간 동안 해당 컴포넌트가 애니메이션 되는 모습이 표현되게 된다.
Steps S520 to S550 are repeated with respect to the activated animation object whenever a tick occurs so that the corresponding component is animated for a predetermined time.

본 발명에 따른 객체 지향적 컴포넌트 애니메이션 방법은 다양한 컴퓨터 수단을 통하여 수행될 수 있는 프로그램 명령 형태로 구현되어 컴퓨터 판독 가능 매체에 기록될 수 있다. 상기 컴퓨터 판독 가능 매체는 프로그램 명령, 데이터 파일, 데이터 구조 등을 단독으로 또는 조합하여 포함할 수 있다. 상기 매체에 기록되는 프로그램 명령은 본 발명을 위하여 특별히 설계되고 구성된 것들이거나 컴퓨터 소프트웨어 당업자에게 공지되어 사용 가능한 것일 수도 있다. 컴퓨터 판독 가능 기록 매체의 예에는 하드 디스크, 플로피 디스크 및 자기 테이프와 같은 자기 매체(magnetic media), CD-ROM, DVD와 같은 광기록 매체(optical media), 플롭티컬 디스크(floptical disk)와 같은 자기-광 매체(magneto-optical media), 및 롬(ROM), 램(RAM), 플래시 메모리 등과 같은 프로그램 명령을 저장하고 수행하도록 특별히 구성된 하드웨어 장치가 포함된다. 프로그램 명령의 예에는 컴파일러에 의해 만들어지는 것과 같은 기계어 코드뿐만 아니라 인터프리터 등을 사용해서 컴퓨터에 의해서 실행될 수 있는 고급 언어 코드를 포함한다.
The object-oriented component animation method according to the present invention can be implemented in the form of program instructions that can be executed by various computer means and recorded in a computer readable medium. The computer readable medium may include program instructions, data files, data structures, etc. alone or in combination. Program instructions recorded on the media may be those specially designed and constructed for the purposes of the present invention, or they may be of the kind well-known and available to those having skill in the computer software arts. Examples of computer-readable recording media include magnetic media such as hard disks, floppy disks, and magnetic tape, optical media such as CD-ROMs, DVDs, and magnetic disks, such as floppy disks. Magneto-optical media, and hardware devices specifically configured to store and execute program instructions, such as ROM, RAM, flash memory, and the like. Examples of program instructions include not only machine code generated by a compiler, but also high-level language code that can be executed by a computer using an interpreter or the like.

이상에서와 같이 본 발명에 따른 객체 지향적 컴포넌트 애니메이션 방법은 상기한 바와 같이 설명된 실시예들의 구성과 방법이 한정되게 적용될 수 있는 것이 아니라, 상기 실시예들은 다양한 변형이 이루어질 수 있도록 각 실시예들의 전부 또는 일부가 선택적으로 조합되어 구성될 수도 있다.As described above, the object-oriented component animation method according to the present invention is not limited to the configuration and method of the embodiments described as described above, but the embodiments are all of the embodiments so that various modifications can be made. Or some may be selectively combined.

S510: 애니메이션 목록 로딩 단계
S520: 애니메이션 틱 전달 단계
S530: 애니메이션 이벤트 전달 단계
S540: 리드로우 요청 단계
S550: 리드로우 단계S510: Loading animation list step
S520: Animation Tick Delivery Step
S530: Animation event delivery step
S540: Reedlow Request Step
S550: Reed Low Step

Claims

Loading, by the animation manager, an animation list including one or more animation objects and components bound to the animation objects;
Transmitting animation ticks to an activated animation object in the animation list based on ticks generated by the animation manager at regular intervals;
Generating, by the activated animation object, an interpolation value using the animation tick, generating an animation event based on the interpolation value, and delivering the generated animation event to the bound component; And
The bound component requests a redraw to a rendering engine based on the animation event
Object oriented component animation method comprising a.

The method according to claim 1,
The animation object
A property animation object having a start value and an end value and indicating a change in a property in which an intermediate value is apparent;
A transition animation object representing a shape change between two images before and after the change; And
Move animation object for changing coordinate values
An object-oriented component animation method, characterized in that any one or more of.

The method according to claim 2,
The property animation object, the transition animation object, and the move animation object all inherit an animation base object.
And the animation base object performs a basic function of generating the interpolation value using an interpolation object based on the tick.

The method according to claim 3,
The animation object
And a composite animation object which is an object corresponding to at least two of the property animation object, the transition animation object, and the move animation object.

The method according to claim 4,
The property defined in the composite animation object is used as a default value when the property of the property animation object, the transition animation object, or the move animation object included in the composite animation object is not defined. Object-oriented component animation method.

A computer-readable recording medium in which a program for executing the method of any one of claims 1 to 5 is recorded.