Animation display method and device

A technology of animation and animation library, which is applied in the fields of instruments, computing, electrical digital data processing, etc., can solve the problem of low efficiency of CSS animation writing, and achieve the effect of improving animation selection efficiency and editing efficiency

Active Publication Date: 2015-09-23
北京鸿享技术服务有限公司
View PDF4 Cites 27 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

[0004] In the above process, since web developers do not know the specific effect of the CSS animation edited in the editor, they need to constantl

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Animation display method and device
  • Animation display method and device
  • Animation display method and device

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0084] refer to figure 1 , which shows a schematic flow chart of an animation display method of the present invention, which may specifically include:

[0085] Step 110, load the webpage document to be added with CSS animation, and obtain the tab page; the specified page element in the webpage document includes animation adding class identification;

[0086] In the embodiment of the present invention, the aforementioned CSS animation can be written through the CSS style of the target element, such as different CSS styles with different positions of the target element at different times, then the browser can gradually render the target element when rendering style to get an animation.

[0087] For example, in the code of the CSS file, the following example (1) is the target element of the animation:

[0088] Example (1):

[0089] div {

[0090] width:100px;

[0091] height: 100px;

[0092] background: red;

[0093] position: relative;

[0094] animation: myfirst 5s;

[...

Embodiment 2

[0267] refer to figure 2 , which shows a schematic flow chart of an animation display method of the present invention, which may specifically include:

[0268] Step 210, load the webpage document to be added with CSS animation, and obtain the tab page; the specified page elements in the webpage document include animation adding class identification and animation adding position prompt content;

[0269] Step 220, on the tab page, on the page element corresponding to the animation adding class identification, start the animation selection window according to the trigger operation of the user; the animation selection window includes: animation selection interface, animation library addition interface, animation editing interface, Animation delete interface;

[0270] Wherein, the animation selection interface is used to select the CSS animation name, and obtains the CSS code in the CSS animation library according to the CSS animation name; the animation library addition interfac...

Embodiment 3

[0294] refer to image 3 , which shows a schematic structural diagram of an animation display device according to the present invention, which may specifically include:

[0295] The page loading module 310 is adapted to load the webpage document to be added with CSS animation to obtain a tab page; the specified page element in the webpage document includes animation adding class identification;

[0296] The selection window trigger module 320 is suitable for starting the animation selection window according to the trigger operation of the user on the tab page, on the page element corresponding to the animation adding class identification;

[0297] The pre-display module 330 is adapted to display the CSS animation in a pop-up window after receiving a user's specified operation on a CSS animation in the animation selection window;

[0298] The web page display module 340 is adapted to add the CSS animation to the page element corresponding to the animation adding class identifi...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses an animation display method and device, and relates to the technical field of CSS (Cascading Style Sheets) animations. The method comprises the following steps: loading a webpage document of an CSS animation to be added, and obtaining a tab page, wherein an appointed page element in the webpage document comprises an animation adding type identifier; in the tab page, according to a trigger operation of a user, starting an animation selection window above the page element of the corresponding animation adding type identifier; when an appointed operation on one CSS animation by the user is received by the animation selection window, showing the CSS animation in a pop-up window; when the user determines to select the CSS animation, adding the CSS animation in the page element of the corresponding animation adding type identifier in the tab page, and carrying out rendering showing on the CSS animation; and adding a CSS code of the CSS animation on a position corresponding to the page element in the webpage document in a webpage document editor. The animation display method and device does not need to switch the editor and a browser back and forth, and has a beneficial effect that the editing efficiency of the webpage document is improved.

Description

technical field [0001] The invention relates to the technical field of CSS animation, in particular to an animation display method and device. Background technique [0002] With the development of webpage technology, many webpage developers display many animations in the webpage in order to enrich the content displayed in the webpage. Based on the analysis principle of the webpage by the browser kernel, there is a CSS (Cascading Style Sheets, cascading style sheets) animation. The browser kernel can parse webpage documents, such as html (Hypertext Markup Language, Hypertext Markup Language) documents, into DOM (Document Object Model, Document Object Model) trees and CSS files, and process the page elements of each DOM node through CSS files. render. Then, for a certain page element, if it is specified with CSS styles in different positions and shapes at different times, then the page elements will be modified in different positions and shapes over time according to the abo...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
IPC IPC(8): G06F17/30G06F17/22
CPCG06F16/9577G06F40/14
Inventor 黄薇
Owner 北京鸿享技术服务有限公司
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap