KR20140070915A - A method and apparatus for editing the animation of web applications - Google Patents

Abstract

The present invention relates to a method and an apparatus for editing the animation of web applications, which enable even a user unfamiliar with CSS to produce an animation, to which various CSS animation effects are applied, easily and intuitively, to directly check the operation of the animation, produced by applying the CSS animation effects, within an authoring tool, and to edit and modify the animation while directly checking the operation of the animation as described above.

Description

METHOD AND APPARATUS FOR EDITING THE ANIMATION OF WEB APPLICATIONS [0002]

The present invention relates to a method and apparatus for editing an animation of a web application included in a web application, and more particularly, to a method and apparatus for editing an animation using a CSS animation The present invention relates to a method and an apparatus for editing an animation of a web application, which allows an operation result of an animation produced by applying the effect to be directly checked even in a web application authoring tool.

In general, HTML (Hyper Text Markup Language) is a basic programming language that has been conventionally used to create a web document. However, it is not easy to design and change the structure of the web document created using the HTML. Accordingly, a style sheet has been created to overcome the above problems, and CSS (Cascading Style Sheets) is a standard of the style sheet.

For example, when a web document (a web page or a web application) is produced using the above-described HTML, it is necessary to designate every single fine font of the web document as a whole. However, if the style of the web page , Even if only one element of the web page is changed, the contents of the entire related page are changed at once, so that the consistency of the entire document can be maintained and the working time can be shortened. As a result, web developers can design the web with a richer design, and can freely select and change the size of the letters, typeface, line spacing, background color, arrangement position, and so on.

CSS, which has various advantages as described above, is continuously upgraded and now CSS3 is being developed. The biggest feature of CSS3 is that it is based on modules. For example, the CSS module includes various types of modules such as text, fonts, color, backgrounds & borders, transforms, transitions, and animations, and other modules are continuously being developed and added.

As described above, since the CSS is configured in a module form, there is a convenience that various browsers or devices can load only the desired CSS module or update frequently necessary modules frequently, CSS3 alone makes it possible for a wide range of features that rely entirely on scripting and server-side technologies (such as box size reduction, transparent backgrounds, drop shadows, rounded corners, gradients, rotation and twisting of shapes, animation effects, etc.) To improve the display of web documents more colorful and dynamic.

However, in order to create a web document or a web application by using the convenient CSS function as described above, it is necessary to have a specialized knowledge thereof, and a conventional web page editor (or a web page editor such as a Dreamweaver, a Namo web editor, Tools) do not support features such as HTML5 or CSS3 (Cascading Style Sheet 3), which are widely used in recent web applications. Therefore, users who do not have expertise in this matter have difficulty in developing a recent web application, In order to develop a web page using a conventional web page editor, the HTML source file is directly encoded and then uploaded to a web page operation server using a file transfer program such as FTP, and then a complicated procedure There is a problem to be performed.

It is an object of the present invention to provide a method and an apparatus for editing animation of a web application that are created to solve the above problems, and which enable users who are not familiar with CSS to produce animations using various CSS animation effects .

It is another object of the present invention to provide a method and apparatus for editing animation of a web application that allows an operation of an animation produced by applying a CSS animation effect to be immediately confirmed in an authoring tool.

The present invention also provides a method and apparatus for editing an animation of a web application that directly edits an animation produced by applying a CSS animation effect in the authoring tool and can immediately check the modified operation result in the authoring tool .

According to an aspect of the present invention, there is provided a method of editing an animation of a web application, the method comprising: a first step of creating an animation to which an arbitrary attribute is applied; A second step of converting an attribute applied to the animation into a CSS format; A third step of storing an animation of the attribute converted into the CSS format; And a fourth step of reading the CSS property of the animation and converting the read CSS property of the animation into a format suitable for a playback apparatus and reproducing the animation, wherein the attribute applied to the animation is at least one The second step is to select and convert the corresponding one of the animation attributes provided in the CSS format, and the fourth step is to convert the selected animation attribute into a format that can be played by the web application authoring tool or the web browser And reproduces the converted data.

An apparatus for editing an animation of a web application according to an aspect of the present invention is a web application authoring tool for authoring a CSS animation. The web application authoring tool stores the generated animation in the CSS format, reads the animation stored in the CSS format, The CSS parser comprising: an animation attribute providing unit that defines at least one animation attribute to be applied to animation in a CSS format and provides the animation attribute; An animation property conversion unit for converting an arbitrary property applied to an animation into a corresponding CSS format defined by the animation attribute providing unit; And an animation output unit for reading the animation property converted and stored in the CSS format and converting the read animation property into a format suitable for the playback apparatus, and outputting the converted animation property, and converting an arbitrary attribute applied to the animation into the corresponding CSS format, And a CSS engine unit for controlling to read the animation property stored in the format and convert the animation property into a format suitable for the animation reproduction apparatus, wherein the attribute applied to the animation is at least one of animation attributes provided by the CSS module Wherein the animation property providing unit defines a CSS animation attribute provided by the CSS module and an animation attribute provided by the authoring tool itself in a CSS format and provides the animation attribute providing unit with a CSS format in the animation attribute providing unit, to Select the appropriate ones of the animation properties provided by the conversion, the playback device is characterized in that at least one of a web application authoring tool or web browser.

An animation editor of a web application according to an aspect of the present invention includes a tool button area including at least one of an animation, a deletion of a selected animation, or a tool button for stopping a preview or preview of a selected animation; An animation tree area for displaying a name of an animation being edited or being produced and a list of effects to be applied thereto; And a timeline area for displaying the designated state of the key frame and the effect so that the designated state of the key frame and the effect can be known by the time, wherein the key frame and the effect assigned to the key frame are distinguished in a bar form, You can place the mouse pointer on any item in the animation tree area or timeline area and click the right mouse button to select at least one of the corresponding options Wherein the web application animation editor provides at least one or more HTML and CSS-based animation presets or templates that are pre-made and selects the animation presets or templates to apply to the animation currently being produced Or if the user And the animation being produced can be stored as a template.

The present invention has been made in order to solve the above problems, and it is an object of the present invention to provide an apparatus and method for creating an animation using various CSS animation effects even for a user who is not familiar with CSS, There is an effect that the operation of the animation can be immediately confirmed in the authoring tool and the editing and modification of the animation can be performed while confirming the operation of the animation immediately as described above.

BRIEF DESCRIPTION OF THE DRAWINGS FIG. 1 is an exemplary diagram showing a schematic screen structure of a web application authoring tool according to the present invention; FIG.
FIG. 2 is an exemplary diagram showing a detailed configuration of an animation editor in FIG. 1; FIG.
3 is an exemplary diagram showing an option setting screen for specifying an animation state in the animation editor according to the present invention.
FIG. 4 is a diagram illustrating a schematic configuration of a CSS parser in a web application authoring tool according to the present invention; FIG.
FIG. 5 is a flowchart illustrating a method of storing and outputting animation using a CSS parser in FIG. 4; FIG.

Hereinafter, an animation editing method and apparatus according to an embodiment of the present invention will be described. The web application authoring tool according to the present invention is a web application authoring tool according to the present invention, Patent Application No. 10-2012-0085995 describes in detail the composition of the integrated platform for web application authoring and the screen structure of the authoring tool.

Therefore, in the present embodiment, a detailed description of the configuration of the web application authoring tool will be omitted, and only a part related to the present invention will be described in order to prevent the confusion of the technical gist of the present invention.

 1 is an exemplary diagram illustrating a schematic screen structure of a web application authoring tool according to the present invention. As shown, the authoring tool includes work areas such as a viewport, a page browser, a project manager, a custom property browser, a DOM tree browser, a component browser, and an animation editor.

Here, the project manager is a window that includes the components of the project created in the integrated development environment. When the HTML file is double-clicked, it appears in the viewport, and other image and html files can be added and deleted. Can be added or deleted.

The page browser is a page navigator capable of creating and adding a page, which is an individual screen of the UI. When a page is selected, all the UI configurations including the viewport of the authoring tool are updated and displayed, It is easy to grasp.

The viewport editor is a work area for visually viewing UI contents. After selecting a page in the page browser, the user can register the selected component in the component browser through drag & drop, and the custom property browser displays the selected object You can select and change various properties of the component, and these properties can be changed by keyboard input or mouse control.

In addition, the component browser is an edit window containing various components and widgets that can decorate a page, the DOM tree editor displays information about a page selected in a page browser explorer window, and the animation editor displays an animation So that it can be produced or edited.

FIG. 2 is an exemplary diagram showing a detailed configuration of the animation editor in FIG. 1; FIG. The animation editor can easily animate a DOM object in a page based on HTML and CSS. So, even if you are not familiar with CSS animation style scripts, you can create CSS animation effects, animate the DOM objects in the page, and see the results immediately.

The animation editor includes a tool button area 710, an animation tree area 720, and a time-line panel 730.

In the tool button region 710, a button for adding an animation, a button for deleting a selected animation, a button for previewing the selected animation by applying the selected animation to a selected component in the DOM tree view or a viewport, and a button for stopping animation in preview .

A list of animation names (e.g., a2) and applicable effects (e.g., Origin, Scale, Rotate, Translate, Skew, Opacity, Dimension, Color, etc.) is displayed in the animation tree area 720.

If the user clicks the right button of the mouse, an option to change the state of the animation (for example, Edit Action, Delete Action) is provided. If the Edit Action item is selected, The Changeable Options window is displayed. In the option window, 'Name' designates the animation name, 'Duration' designates the animation operation time in milliseconds (ms), 'Delay' designates the delay time before animation in milliseconds (ms) ). And 'Timing Function' is an option to specify the flow (how to play the animation) function during the duration of the animation. In this case, the function can be selected from 'linear', 'ease', 'ease-out', and 'cubic-bezier'. If you select 'cubic-bezier' among the functions, you must specify four function arguments. And 'Iteration Count' is an option to specify the number of repetitions of the animation. You can input 1 or more value. The default value is 1. If you want to specify infinite repetition, check 'infinitely'. And 'Direction' is an option to specify the playback direction of the animation. You can select 'normal' or 'alternate'. The default is 'normal'. If you want to play back in the reverse direction of forward playback, select 'alternate'. And 'Fill Mode' is an option to specify the behavior before or after the animation is played. You can choose between 'none', 'forwards', 'backwards', or 'both' .

The 'Delete Action' can remove the created animation.

The timeline panel 730 provides a function of displaying the designated state of key frames and effects by time, and adding key frames and effects. To do this, display keyframes and effects in the form of timelines and bars.

Here, if a mouse pointer is placed on the key frame bar and a right button is clicked, a key frame menu (e.g., Add Key Frame, Edit Key Frame) can be called. The 'Add Key Frame' menu is a menu for adding a key frame, and the 'Edit Key Frame' menu is a menu for changing the state (time) of a key frame. When the key frame menu is selected, a window for inputting corresponding information is displayed.

When the mouse pointer is raised on the effect bar (or each effect item in the animation tree area) and the right button is clicked, a corresponding effect edit menu (eg, Edit Effect, Delete Effect) can be called. Among the above effect items, 'Origin' can designate the origin of transformation (x axis, y axis) in percentage when editing, and 'Scale' specifies the value (x axis, y axis) (X, y) can be specified in units of pixels (px). In this case, 'Rotate' can specify the rotation angle in degree units. 'Translate' 'Skew' can specify the degree of distortion (x-axis, y-axis) in degrees, 'Opacity' can specify the ratio of opacity in percentage (%), 'Dimension' allows you to specify the width and height in pixels (px), 'Color' allows you to specify the background color as RGB or RGBA, you can display the color picker for color selection, You can also display a slide bar to select the degree of alpha channel. When the effect editing menu is selected, a window for inputting corresponding effect information is displayed.

Also, the animation editor according to the present invention provides at least one or more animation templates used by users. The animation templates can be called through a CSS animation preset menu (e.g., CSS Animation Presets). The CSS animation presets provide users with easy access to effects on components (DOM objects) based on HTML and CSS.

Therefore, even if you do not create CSS animation effects, you can use various CSS animation effects that are provided beforehand, and you can apply animation effects to the DOM objects in the page and see the results immediately.

For example, when the CSS animation preset menu is selected, a window displaying presets (e.g., Appear, Bounce, Curve Down, Drop, Faded, Float, etc.) of various pre-created CSS animations is displayed. And the CSS animation effect can be applied. The detailed effect can be modified by calling the effect editing menu. Or you can save the animations you are creating as templates. Wherein the name of the preset (or template) is illustratively described and can be modified to any other name.

As described above, the web application authoring tool according to the present invention easily applies the HTML and CSS-based animation effects to the DOM objects in the web page using the CSS animation editor, and also applies the animation application results in the web application authoring tool So that web applications can be easily created.

In the present invention, the animation effect can be immediately checked in the 'authoring tool' instead of 'the web'. The reason why the animation animation effect can be directly checked in the 'authoring tool' This is because it includes a 'CSS parser' that can read the contents of the format programmatically.

In other words, the 'web application authoring tool' according to the present invention provides all the animation attributes that are provided or required by the CSS through the above-mentioned 'animation CSS format', so that the animations created by the CSS animation editor can be referred to as' As shown in FIG. By playing back the animation stored in the CSS using the CSS parser, the attributes and effects applied to the CSS animation can be displayed not only in the CSS environment but also in an environment other than the authoring tool according to the present invention (e.g., a web page or a web site) So that it can be reproduced as it is.

In addition, the CSS animation presets provide the above CSS animation attributes in the XML (Extensible Markup Language) format so that they can be used in the animation production, and the generated animation presets are stored in the XML format as they are . This is because the nature of XML allows information to be modified and extended to suit the intended use in almost any situation where information needs to be transferred between different uses. In other words, in the case of creating an animation using CSS, display is possible only on the web. However, when an animation preset is produced using XML, the information is modified according to the environment in which the animation is reproduced, This is because it is possible to reproduce the data even within the area.

As described above, in the conventional 'web application authoring tool', not only CSS animation can be produced, but even if the CSS animation is produced, it is necessary to reproduce through HTML5 and a CSS based web browser in order to check the operation of the CSS animation did. However, in the 'web application authoring tool' according to the present invention, the CSS animation can be easily produced through the 'CSS animation editor', and the 'CSS parser' So that it can be implemented and reproduced in the non-authoring tool as it is.

4 is an exemplary diagram illustrating a schematic configuration of a CSS parser in a web application authoring tool according to the present invention.

An animation attribute providing unit 810 for defining all the CSS animation properties (or effects) provided by the CSS module and the animation properties (or effects) provided by the CSS parser 800 in a CSS format, as shown in FIG. An animation property conversion unit 820 for converting the corresponding CSS animation property (or effect) applied to the animation created by the CSS animation editor into the CSS format defined by the animation attribute providing unit 810 and storing the converted CSS animation property; And an animation property output unit 830 that reads the CSS animation attributes stored in the CSS format and stores the converted CSS animation attributes, and converts the format into a format suitable for a CSS animation editor (or an animation playback screen of the authoring tool).

At this time, the CSS engine unit 840 controls the conversion of the attribute applied to the CSS animation to the corresponding CSS format, or conversely, the animation attribute stored in the CSS format is converted into a format suitable for a device (e.g., an authoring tool) ); ≪ / RTI > Here, the CSS engine unit 840 is not necessarily required, and may be configured to perform its function in the CSS parser 800 itself or in the authoring tool.

In the present embodiment, the 'web application authoring tool' may store CSS animation in a CSS format and may also output a CSS animation attribute stored in the CSS format with a 'CSS parser' You can read CSS animation presets saved in a format and apply them to CSS animation production. In addition, the 'web application authoring tool' may store the CSS animation preset in the XML format when the CSS animation preset is modified and stored. If the CSS animation preset is stored in the CSS animation format, the CSS animation preset may be stored in the CSS format.

That is, when a user creates a CSS animation by applying at least one of the CSS animation attributes (effects), the CSS animation is converted into a CSS format when the created CSS animation is stored, and the created CSS animation is stored. When playing the produced CSS animation, the 'CSS parser' reads the CSS animation properties stored in the CSS format and converts the read CSS animation attributes into a format provided by the authoring tool playback screen.

5 is a flowchart for explaining a method of storing and outputting animation using a CSS parser in FIG.

As shown, when the animation is created using the authoring tool, the user applies the attribute to the animation to be produced (S101). When the attribute is applied to the animation as described above, the 'web application authoring tool' according to the present invention stores the animation having the corresponding animation attribute in the CSS format (S102). When a user inputs a playback menu provided in the authoring tool to confirm the operation of the animation, the 'web application authoring tool' according to the present invention transmits the animation through the 'CSS parser' The animation property is read and converted in accordance with the format of the animation reproduction apparatus and reproduced (S103).

As described above, in the web application authoring tool according to the embodiment of the present invention, when the CSS animation is produced, the operation result of the CSS animation can be directly confirmed by the authoring tool (i.e., the CSS animation can be reproduced) And a CSS parser. In addition, the web application authoring tool according to an embodiment of the present invention can read a CSS animation preset in XML format when producing a CSS animation, and can use it for animation production, and stores the created animation in a CSS format.

Accordingly, the present invention allows the authoring tool to quickly and easily create a CSS animation by allowing the web application authoring tool to directly check the creation of the animation and its operation result.

While the present invention has been particularly shown and described with reference to exemplary embodiments thereof, it is to be understood that the invention is not limited to the disclosed embodiments, but, on the contrary, I will understand the point. Accordingly, the technical scope of the present invention should be defined by the following claims.

710: Tool button area 720: Animation tree area
730: Timeline panel 800: CSS parser
810: Animation Attribute Offering
820: animation property conversion unit
830: animation property output unit
840: CSS engine section

Claims (15)

A first step of producing an animation to which an arbitrary attribute is applied;
A second step of converting an attribute applied to the animation into a CSS format;
A third step of storing an animation of the attribute converted into the CSS format;
And a fourth step of reading the CSS property of the animation and converting the CSS property of the animation into a format suitable for a playback apparatus and reproducing the animation.
The method of claim 1,
And the animation properties provided by the CSS module.
The method according to claim 1,
And selecting a corresponding one of animation properties provided in the CSS format and converting the selected animation property.
4. The method of claim 1,
Wherein the web application is converted into a format that can be reproduced by a web application authoring tool or a web browser and reproduced.
A web application authoring tool for authoring a CSS animation,
And a CSS parser for storing the created animation in the CSS format, reading the animation stored in the CSS format, and playing the animation in the animation playback device,
The CSS parser includes: an animation attribute providing unit that defines at least one animation attribute to be applied to an animation in a CSS format and provides the animation attribute;
An animation property conversion unit for converting an arbitrary property applied to an animation into a corresponding CSS format defined by the animation attribute providing unit; And
And an animation output unit for reading and storing the animation property converted and stored in the CSS format into a format suitable for a playback apparatus and outputting the converted animation property.
The method of claim 5,
And a CSS engine unit for converting the arbitrary attribute applied to the animation into the corresponding CSS format or conversely controlling the animation attribute stored in the CSS format to be converted into a format suitable for the animation reproduction apparatus. An animation editing device for a web application.
The method of claim 5,
And the animation properties provided by the CSS module.
[6] The apparatus of claim 5,
Wherein the CSS animation module provides the CSS animation properties provided by the CSS module and the animation properties provided by the authoring tool itself in a CSS format.
6. The image processing apparatus according to claim 5,
Wherein the animation attribute providing unit selects and converts the corresponding one of the animation attributes provided in the CSS format in the animation attribute providing unit.
The playback apparatus according to claim 5,
A web application authoring tool, or a web browser.
A tool button area including at least one of an animation, a deletion of a selected animation, or a preview of a selected animation or a tool button for stopping the preview;
An animation tree area for displaying a name of an animation being edited or being produced and a list of effects to be applied thereto; And
And a timeline area for displaying the designated state of the key frame and the effect so that they can be noticed by time.
The method of claim 11,
Wherein the key frame and the key frame are separately displayed in a bar form.
The method of claim 11,
When a mouse pointer is placed on any one of the items in the animation tree area or the timeline area and the right button of the mouse is clicked, at least one or more corresponding And displaying the window containing the option.
The method of claim 11,
Wherein the web application animation editor provides at least one pre-created HTML or CSS based animation preset or template.
15. The method of claim 14,
The animation preset or the template may be selected and applied to the animation currently being produced or the animation being produced by the user may be stored as a template.

Images