CN106294501A - web animation effect display method and device - Google Patents
web animation effect display method and device Download PDFInfo
- Publication number
- CN106294501A CN106294501A CN201510313513.2A CN201510313513A CN106294501A CN 106294501 A CN106294501 A CN 106294501A CN 201510313513 A CN201510313513 A CN 201510313513A CN 106294501 A CN106294501 A CN 106294501A
- Authority
- CN
- China
- Prior art keywords
- parameter
- animation
- character
- display
- main body
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 230000000694 effects Effects 0.000 title claims abstract description 72
- 238000000034 method Methods 0.000 title claims abstract description 30
- 238000007373 indentation Methods 0.000 claims description 28
- 230000006978 adaptation Effects 0.000 claims description 12
- 241000208340 Araliaceae Species 0.000 claims description 5
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 claims description 5
- 235000003140 Panax quinquefolius Nutrition 0.000 claims description 5
- 235000008434 ginseng Nutrition 0.000 claims description 5
- 230000003044 adaptive effect Effects 0.000 claims 1
- 125000004122 cyclic group Chemical group 0.000 description 5
- 238000005516 engineering process Methods 0.000 description 4
- 230000037237 body shape Effects 0.000 description 3
- 230000001186 cumulative effect Effects 0.000 description 2
- 239000000203 mixture Substances 0.000 description 2
- 239000007787 solid Substances 0.000 description 2
- 238000004590 computer program Methods 0.000 description 1
- 230000004899 motility Effects 0.000 description 1
- 150000003839 salts Chemical class 0.000 description 1
- 238000009738 saturating Methods 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
Abstract
The present invention relates to a kind of web animation effect display method, including: judge whether html file exists self-defined animation style；If html file exists self-defined animation style, then obtain the CSS animation configuration data corresponding with described self-defined animation style；According to described CSS animation configuration data display animation effect, as long as judging that html file exists self-defined animation style, just can be by corresponding CSS animation configuration data display animation effect, CSS animation configuration data are realized by CSS, occupy little space, and implementation is flexible, CSS animation configuration data are bound also without with animation main body, display web animation effect that can be convenient, flexible.Additionally, additionally provide a kind of web animation effect display device.
Description
Technical field
The present invention relates to field of computer technology, particularly relate to a kind of web animation effect display method and dress
Put.
Background technology
Along with the development of computer and network technologies, obtaining information by webpage becomes a part for people's life.
During web page browsing, often comprise animation effect, as during by server request data, may
The process of pending data such as have, present the animation effect of wait, represent waiting process.
Existing web animation effect display method mainly has two kinds: a kind of by using the entitled .gif of suffix
Dynamic picture shows, another kind is that the mode using the intervalometer in JavaScript dynamically to revise character content shows
Showing animation effect, but these 2 kinds of methods all exist inferior position, first method Gif dynamic picture takes up room greatly,
Taking flow and performance loss is big, accelerate electric quantity consumption of mobile phone, the display effect of animation is the most dumb, as dynamic
Draw speed can not control.Second method belongs to script due to JavaScript, and technology realizes upper difficulty
Greatly, and bind owing to animation main element and JavaScript operate, if the HTML generation that animation is relevant
Code is modified, and JavaScript code may be caused to make mistakes.
Summary of the invention
Based on this, it is necessary to for the problems referred to above, it is provided that a kind of web animation effect display method and device,
Not only save flow, and display web animation effect that can be convenient, flexible.
A kind of web animation effect display method, described method includes:
Judge whether html file exists self-defined animation style；
If html file exists self-defined animation style, then obtain and described self-defined animation style pair
The CSS animation configuration data answered；
According to described CSS animation configuration data display animation effect.
A kind of web animation effect display device, described device includes:
Judge module, is used for judging whether to exist in html file self-defined animation style；
Acquisition module, if there is self-defined animation style in the html file, then obtain with described from
The CSS animation configuration data that definition animation style is corresponding；
Display module, for according to described CSS animation configuration data display animation effect.
Whether above-mentioned web animation effect display method and device, make by oneself by judging to exist in html file
Justice animation style, if there is self-defined animation style in html file, then obtains and self-defined animation sample
The CSS animation configuration data that formula is corresponding, according to CSS animation configuration data display animation effect, as long as judging
Go out html file and there is self-defined animation style, so that it may show dynamic by corresponding CSS animation configuration data
Drawing effect, CSS animation configuration data are realized by CSS, occupy little space, and implementation is flexible, CSS
Animation configuration data are bound also without with animation main body, display web animation effect that can be convenient, flexible.
Accompanying drawing explanation
Fig. 1 is the cut-away view of terminal in an embodiment；
Fig. 2 is the flow chart of web animation effect display method in an embodiment；
Fig. 3 is the flow chart in an embodiment according to CSS animation configuration data display animation effect；
Fig. 4 is the view of the animation effect that three dot cycles show in an embodiment；
Fig. 5 is another view of the animation effect that three dot cycles show in an embodiment；
Fig. 6 is another view of the animation effect that three dot cycles show in an embodiment；
Fig. 7 is the structured flowchart of web animation effect display device in an embodiment；
Fig. 8 is the structured flowchart of display module in an embodiment.
Detailed description of the invention
In one embodiment, web animation effect display method is applied in terminal, terminal can be smart mobile phone,
Mobile panel computer etc., but be not limited thereto.The internal structure of terminal is as it is shown in figure 1, this terminal includes
The processor that connected by system bus, Graphics Processing Unit, storage medium, internal memory, network interface, aobvious
Display screen curtain and input equipment and outut device.Wherein, the storage medium storage of terminal has operating system, also wraps
Including a kind of web animation effect display device, this web animation effect display device is used for realizing a kind of webpage and moves
Draw effect display method.This processor is used for providing calculating and control ability, supports the operation of whole terminal.
Graphics Processing Unit in terminal, for providing at the drawing ability of display web interface, inside saves as storage and is situated between
The operation of the web animation effect display device in matter provides environment, and network interface is for carrying out with miscellaneous equipment
Network service.Display screen is used for showing web interface animation effect etc..It is defeated that input equipment is used for receiving user
The data entered, as received the network address etc. of user's input.Outut device is used for exporting data.For band touch screen
Terminal, display screen and input equipment can be touch screen.
In one embodiment, as shown in Figure 2, it is provided that a kind of web animation effect display method, to answer
Illustrate for above-mentioned terminal, including:
Step S110, it is judged that whether there is self-defined animation style in html file.
Concrete, HTML is HTML, i.e. HTML (Hypertext Markup Language),
It it is a kind of markup language for describing web document.The description that html file is made up of HTML command
Property text, by HTML command display word, figure, animation, sound, form, link etc..When needing
During webpage to be browsed, terminal sends web-page requests, gets the html file corresponding with webpage, by resolving
Whether html file display webpage, during resolving, it is judged that exist self-defined dynamic in html file
Drawing pattern, self-defined animation style refers to the form of expression of the animation designed as required, showing including animation
Show duration and display mode, the shape of animation main body, the position of animation main body, the number of animation main body, move
Drawing the main body state etc. at different time, animation main body refers to the various piece that animation forms, such as dynamic " ... "
Occurring one by one, one of them ". " is just properly termed as an animation main body.Whether search in html file
There is customized label or the form of preset characters string or HTML carries realizes self-defined animation style
Label, if it is present be judged as in html file existing self-defined animation style, otherwise, it is judged that for
Html file does not exist self-defined animation style.
Step S120, if there is self-defined animation style in html file, then obtains and self-defined animation
The CSS animation configuration data that pattern is corresponding.
Concrete, it is obtained from the CSS animation configuration data that definition animation style is corresponding, can be by identical mark
Sign or preset characters string set up the corresponding relation of self-defined animation style and CSS animation configuration data, find with
Label that self-defined animation style is identical or data corresponding to preset characters string, it is simply that self-defined animation style pair
The CSS animation configuration data answered.CSS (Cascading Style Sheets, CSS) is a kind of using
Showing the computer language of html file pattern, CSS animation configuration data refer to be realized by CSS
It is used for controlling the data of animation effect, as controlled display duration and the parameter of display mode of animation, controlling to move
The parameter drawing body shape, the parameter controlling animation body position, the control parameter of animation main body number, control
Braking picture main body is in the parameter etc. of different time state.Same animation effect, can be by different CSS
Animation configuration data realize, can be by text projective parameter or inset spacing as controlled the parameter of animation body shape
Parameter, frame parameter, context parameter, figure layer projective parameter etc. form, and are generated by the cooperation of various parameters
Animation main body, the parameter controlling animation body position can be made up of character pitch control parameter, it is also possible to by
Character indentation parameter forms, and character can be hidden by the parameter controlling animation main body number by the parameter that hides character
Thus change the number of animation main body, it is also possible to made animation main body transparent by transparency parameter thus change animation
The number of main body.Due to the motility of CSS, can be moved by the control that CSS animation configuration data are convenient, flexible
Draw effect.
Step S130, according to CSS animation configuration data display animation effect.
Concrete, according to the different parameters in CSS animation configuration data, show different animation effects.As
By controlling display duration and the display mode of the parameter determination animation showing duration and display mode of animation,
Display mode can be divided into and continuously displaying or discontinuous display step by step etc., by controlling the shape of animation main body
The length of the parameter determination animation main body of shape and width etc., by controlling the parameter determination animation master of animation body position
The position of body, by controlling the display number of the parameter determination animation main body of animation main body number, by controlling
Main body is in the display state of the parameter determination different time animation main body of different time state.
In the present embodiment, by judging whether html file exists self-defined animation style, if HTML
File exists self-defined animation style, then obtains the CSS animation configuration number corresponding with self-defined animation style
According to, according to CSS animation configuration data display animation effect, as long as it is self-defined to judge that html file exists
Animation style, so that it may by corresponding CSS animation configuration data display animation effect, CSS animation configuration number
Realize according to by CSS, occupy little space, and implementation is flexible, CSS animation configuration data also without
Bind with animation main body, display web animation effect that can be convenient, flexible.
In one embodiment, step S110 is: if there is customized label in html file, then sentence
Break as there is self-defined animation style, if or html file is existed the pattern applied by span label,
Then it is judged as there is self-defined animation style.
Concrete, customized label refers to self-defining label, with the bookmark name that used in HTML
Differentiate, if a customized label is<dot>, if " ... " is used animation effect, then at HTML
File uses code<dot>...</dot>, mean that " ... " has self-defining animation style, find in CSS
The CSS animation configuration parameter corresponding with<dot>just can realize animation effect.Span label is in HTML
The bookmark name used, span label is to be used to combine the row interior element in document, and span is not solid
Fixed form performance.When to its Apply Styles, just can produce visual change and produce animation effect, as
Code is used in html file<span class＝”dotting”>..</span>, then it represents that span is passed through
Class attribute Apply Styles, the entitled dotting of pattern, finds CSS corresponding with dotting in CSS
Animation configuration parameter just can realize animation effect.
In one embodiment, as it is shown on figure 3, step S130 includes:
Step S131, obtains animation style data, shows animation main body original state according to animation style data.
Concrete, animation style data refer to the master data of animation main body, as controlled animation body shape
Parameter, the parameter of animation body position that controls, the parameter etc. of control animation main body number, can be according to animation sample
Formula data determine animation main body original state.Such as during the display of animation a length of 2 seconds, then the initial shape of animation main body
State refers to that animation moment after 0 second has just started state when showing.
Step S132, obtains animation basic attribute data and status data.
Concrete, animation basic attribute data refers to control the data of the dynamic effect of animation, and status data is
Accuse the braking picture main body data in different time display state.
Step S133, determines display cycle and the display mode of animation according to basic attribute data.
Concrete, the display cycle of animation has referred to the time of the most complete animation effect, showing of animation
Show the cycle arrive after the display effect in a repeatable upper cycle.Display mode can be divided into continuously display, pause aobvious
Show, the multiple display modes such as Infinite Cyclic.
According to display cycle, display mode and status data, step S134, shows that animation main body is at different time
State.
Concrete, determine animation main body state of each time point within a display cycle according to status data,
And show, one display cycle of arrival then repeats animation main body original state and shows at the next one simultaneously
Cycle continues display, and carries out the display of correspondence according to display mode.
In one embodiment, animation style data include character pitch control parameter, text projective parameter,
Hide character parameter, and text projective parameter includes self adaptation distance parameter, and step S131 includes: according to character
Spacing controls parameter determination kinds of characters display position, according to the parameter that hides character by the character outside preset range
Hide, according to text projective parameter projection animation main body and according to self adaptation distance parameter self-adaptative adjustment animation
The display position of main body.Status data include time parameter and the text projective parameter corresponding with time parameter,
Transparent control parameter, step S134 includes: project ginseng according to time parameter and the text corresponding with time parameter
Number projects animation main body at different time, and judges whether transparent control parameter is transparent, if it is, make
Projection animation main body shows transparent.
Concrete, character pitch controls parameter and can be selected for the letter-spacing in CSS, between control character
Distance, when letter-spacing the biggest or the least time, in the html tag corresponding with animation configuration parameter
Multiple characters only can show a character.Text projective parameter can be selected for text-shadow in CSS for
Realize text projection, and can be the most cumulative, so that letter-spacing can be controlled with text projective parameter
The character of system display is projected out the identical characters of any number.Meanwhile, text projective parameter include self adaptation away from
From parameter, when projection can according to the determination of the size adaptation of the character projector distance relevant to character boundary,
So that animation effect is more attractive, the character outside preset range can be hidden by the parameter that hides character, transparent
Control parameter controlled braking picture main body and show transparent.
As a example by realizing the animation effect that three dot cycles show, code corresponding in html file is
<dot>...</dot>, pass through customized label<dot>the CSS animation finding correspondence configures data:
Wherein display represents the display pattern of animation main body, and inline-block represents " inline-block " so that point with
Word nature mixing, meanwhile, because containing block block characteristic, can arrange size and hide unwanted
Point character, min-width represents minimum widith, the reserved space of points, it is ensured that when animation shows, does not have partially
Move or with text overlays below .75em is writing a Chinese character in simplified form of 0.75em, and wherein, em is self adaptation distance parameter,
The unit relevant to font size, it is assumed that font is 20 pixels, then .25em=0.25*20 that is 5 pixel,
Wherein 0.75 is empirical value.Letter-spacing is that character pitch controls parameter, and value is bigger negative value,
Such as-4em or-5em etc., when letter-spacing is bigger negative value, character originally can be positioned on the contrary
Position, only show first character.Therefore, acquiescence " ... " 1 point of actual only foremost shows,
Other 2 are positioned at other positions.Letter-spacing:0 9 and _ :-ms-input-placeholder, dot
{letter-spacing:-4em；Effect be to make more than IE10+ browser hide rear 2 point character, reach relatively
Good compatibility.Text-shadow is text projective parameter, currentColor represent the color of the character of projection with
Font color originally is identical, although the default color of text-shadow is actual is exactly currentColor, theoretical
On can be default, but, as under FireFox browser, it is achieved during animation effect, need corresponding color
Transition (from currentColor to transparent), in order to ensure more preferable compatibility, the animation configuration of acquisition
Keyword currentColor with a grain of salt in data..25em 0 represents at 0.25em on the right side of current point character
One point of position reprojection.Text-align:left represents character left-justify, mainly avoids by outside text-align
Alignment effect affects, and overflow:hidden is the parameter that hides character, and represents to overflow and hides, by letter-spacing
It is hidden for 2 points of script outside the predeterminable area scope that is in of control during negative value.Therefore according to dynamic
The animation main body original state that picture pattern data shows is 2 points of display, the point that one of them point is script,
Another point is the point being projected out, and the position of the point being projected out is relevant to the size of character originally, is
The projection of self adaptation distance, improves the effect that animation shows.
Wherein " animation:dot 3s infinite step-start both " is animation basic attribute data, determines
The display cycle of animation and display mode, wherein 3s represents that the display cycle of animation is 3 seconds, and infinite represents
Animation Infinite Cyclic, step-start both is expressed as discontinuous display, has pause during display, to realize one by one
Get effect ready.
Wherein the data after keyframes dot be status data include time parameter 33%, 66% and and time
Between text projective parameter text-shadow corresponding to parameter and transparent control parameter transparent.Wherein " 33%
{text-shadow:.25em 0currentColor,.5em 0currentColor；" represent when animation is shown to
During 33% time point, having equidistant 2 projections, projected position is 0.25em on the right side of current point character
The position of the 0.5em of sum, their color is that currentColor represents identical with the color of current font, this
Time plus 1 character point originally, 3 points of display altogether.Wherein " 66%{text-shadow:.25em 0
Transparent} " represent when animation is shown to 66% time point have 1 projection, and this is projected as transparent,
So 1 character point originally only can be shown.When animation is shown to 100% time point, can return to again initial
State, shows 2 points, so, when animation shows, the number of variations of point be 2 points, 3 points, 1
Individual, the most constantly circulate.
In one embodiment, animation style data include that content area parameter, inset spacing parameter, frame are joined
Number, context parameter and the parameter that hides character, step S131 includes: according to the parameter that hides character by preset range
Outer character is hidden, according to content area parameter determination content area, according to inset spacing parameter determination content regions
Distance between territory and frame, according to frame parameter determination frame region and border color, according to context parameter
Determine background area and background color, according to content area, frame region and border color, background area and
Background color display animation main body original state.Status data includes time parameter and corresponding with time parameter
Border color parameter and background color parameter, step S134 includes: according to time parameter and with time parameter pair
Border color parameter and the background color parameter answered change border color and background color at different time.
Concrete, content area parameter can include length and height, so that it is determined that content area scope, inner edge
Space between parameter definition element frame and element content, can determine that content area according to inset spacing parameter
And the distance between frame, can be selected for padding in CSS, and during use, form is padding:x y, passes through
X coordinate determines upper bottom margin, determines left and right margins by y-coordinate, border in frame parameters selection CSS,
By frame parameter can by border width border-width determine frame region and by border-color true
Determine border color.Context parameter can determine that territory, background display area, as determined background by background-clip
In which region show, as be set to content-box then can in content area display background, also by
Background-color determines background color.Character outside preset range can be hidden by the parameter that hides character.
These parameters coordinate, thus realize the animation effect needed, with moving of realizing that three dot cycles shows
As a example by drawing effect, code corresponding in html file is<dot>...</dot>, pass through customized label
<dot>finds the CSS animation of correspondence to configure data:
Wherein content area parameter width represents that width a little is that 2px, height represent that height a little is 2px,
Wherein px representation unit pixel, now defines a square point, for content area 210, passes through padding:
02px determines the space between frame and content area, as shown in Figure 4, then defines on square point
Being down 0px, left and right is the frame 220 of 2px, by border:solid currentColor；border-width:0
2px determines that the color of frame is current font color, and the size of frame is upper bottom margin 0px, left and right margins 2px,
If current font is black, then define 2, left and right point 230 and 240 as shown in Figure 5 by border color.
Pass through background-color:currentColor；Background area is determined by background-clip:content-box
For in content area display background, and to arrange color be current font color, makes square point be filled to black,
Show the point 210,230 and 240 that animation main body original state is three black the most as shown in Figure 6.Wherein
text-indent:-9em；Overflow:hidden, in the present example, the parameter that hides character is by character indentation parameter
Hide parameter composition with overflowing, hide parameter overflow by character indentation parameter text-indent and spilling
Character point originally is carried out indentation and hides obtain after indentation at the extraneous point of predeterminable area.
Wherein "-webkit-animation:dot 4s infinite step-star；animation:dot 4s infinite
step-star；" it is animation basic attribute data, determine display cycle and the display mode of animation, wherein 4s table
The display cycle showing animation is 4 seconds, and infinite represents animation Infinite Cyclic, and step-start is expressed as discontinuous
Display, have pause during display, with realize one by one get effect ready.-webkit represents the compatibility to browser.
Wherein the data after keyframes dot are status data, including time parameter 25%, 50%, 75%
And border color parameter border-color corresponding with time parameter and background color ginseng background-color.
Wherein " 25%{border-color:transparent；background-color:transparent；" represent when dynamic
When picture is shown to 25% time point, border color is transparent, and background color is transparent, so now 0 point of display.
Wherein " 50%{border-right-color:transparent；background-color:transparent；" represent
When animation is shown to 50% time point, the right border color is transparent, and background color is transparent, so now only
The point that left side frame color is font color can be shown.Wherein " 75%{border-right-color:
transparent；" represent when animation is shown to 75% time point, the right border color is transparent, so now
Can show a point and a point of intermediate background color font color that left side frame color is font color, totally 2
Individual, when 100% time point, animation can return to again original state, shows 3 points, so, when animation shows
When showing, the number of variations of point is 3 points, 0 point, 1 point, 2 points, the most constantly circulates.
In one embodiment, animation style data include character pitch parameter, character indentation parameter, hide
Character properties and virtual animation body data, step S131 includes: according to character pitch parameter, character indentation
Parameter and the parameter display animation main body that hides character, show virtual animation main body according to virtual animation body data.
Status data includes time parameter and the transparency parameter corresponding with time parameter, character pitch parameter and character
Indentation parameter, step S134 includes: control according to time parameter and the transparency parameter corresponding with time parameter
Animation main body and virtual animation main body at the transparency of different time, according to time parameter and with time parameter pair
The character pitch parameter answered, character indentation state modulator animation main body are in the display of different time.
Concrete, character pitch controls parameter and can be selected for the letter-spacing in CSS, between control character
Distance, when letter-spacing the biggest or the least time, in the html tag corresponding with animation configuration parameter
Multiple characters only can show a character.Character indentation parameter can be selected for the text-indent in CSS, controls
Character indentation, when the value of text-indent the biggest or the least time join with parameter overflow:hidden that hides character
Closing, hidden by the character outside preset range, point does not shows.Virtual animation body data can use in CSS
Pseudo-element before creates a point and obtains.
As a example by realizing the animation effect that three dot cycles show, code corresponding in html file is
<span class＝“dotting”>..</span>, by dotting find correspondence CSS animation configuration data be:
Wherein, " letter-spacing:0；text-indent:0；" represent each character in original state animation main body
Spacing is 0, and character indentation is 0, and 2 character point originally normally show, and uses pseudo-element before
Creating a point, this point will not be controlled by letter-spacing and text-indent, normally shows, now shows
Show that animation main body original state is three points.
Wherein " animation:dot 4s infinite step-star；" it is animation basic attribute data, determine animation
Display cycle and display mode, wherein 4s represents that the display cycle of animation is 4 seconds, and infinite represents animation
Infinite Cyclic, step-start is expressed as discontinuous display, has pause during display, with realize one by one get effect ready.
-webkit represents the compatibility to browser.
Wherein the data after keyframes dot are status data, including time parameter 25%, 50%, 75%
And transparency parameter opacity, character indentation parameter text-indent and the character pitch corresponding with time parameter
Parameter letter-spacing.Wherein " 25%{opacity:0；" represent when animation is shown to 25% time point,
Animation main body and virtual animation main body show transparent, now 0 point of display.Wherein " 50%{text-indent:
9em；" represent when animation is shown to 50% time point, character indentation value is very big, and two points are retracted originally
Arrive outside preset range, be hidden.And virtual animation main body is unaffected, so only one point of display.
75%{letter-spacing:9em；Represent when animation is shown to 75% time point, letter-spacing value is very
Greatly, only a point be can show, the point that virtual animation main body shows, the most altogether 2 points of display added.
When 100% time point, animation can return to again original state, shows 3 points, so, when animation shows,
The number of variations of point is 3 points, 0 point, 1 point, 2 points, the most constantly circulates.
In one embodiment, animation style data include figure layer projective parameter, and hide character parameter, step
S131 includes: according to hiding character, the character outside preset range is hidden by parameter, throws according to figure layer projective parameter
Shadow animation main body.Status data includes time parameter and the figure layer projective parameter corresponding with time parameter, step
S134 includes: dynamic in different time projection according to time parameter and the figure layer projective parameter corresponding with time parameter
Draw main body.
Concrete, figure layer projective parameter can be selected for the box-shadow in CSS, is used for realizing the projection of figure layer,
And can be the most cumulative, the parameter that hides character is for hiding the character outside preset range.To realize one three
As a example by the animation effect that dot cycle shows, code corresponding in html file is<dot>...</dot>, logical
Cross customized label<dot>find correspondence CSS animation configuration data be:
Wherein min-width represents minimum widith, the reserved space of points, it is ensured that when animation shows, does not have partially
Move or with text overlays below, min-height represents minimum constructive height.“text-indent:-9em；overflow:
hidden；" in order to hide character, parameter by character indentation parameter text-indent and overflows hiding parameter overflow
Composition, carries out indentation by character point originally and hides obtain after indentation at the extraneous point of predeterminable area.
“box-shadow:2px 0,6px 0,10px 0；" represent 2 pixel, 6 pixels and 10 pixels on the right side of level
Position projected 3 points, now show that animation main body original state is three points.
Wherein " animation:dot 4s infinite step-start both；" it is animation basic attribute data, determine
The display cycle of animation and display mode, wherein 4s represents that the display cycle of animation is 4 seconds, and infinite represents
Animation Infinite Cyclic, step-start is expressed as discontinuous display, has pause during display, to realize getting ready one by one
Effect.
Wherein the data after keyframes dot are status data, including time parameter 25%, 50%, 75%
And the figure layer projective parameter box-shadow corresponding with time parameter, wherein " 25%{box-shadow:
none；" represent when animation is shown to 25% time point, figure layer projection number is 0, now 0 point of display.
" 50%{box-shadow:2px 0；" represent when animation is shown to 50% time point, on the right side of level 2
1 point of pixel projection, now one point of display." 75%{box-shadow:2px 0,6px 0；" represent
When being shown to 75% time point when animation, on the right side of level, 2 pixels and 6 pixels have respectively projected 1 point,
Now 2 points of display.So, when animation shows, the number of variations of point be 3 points, 0 point, 1
Point, 2 points, the most constantly circulate.
In one embodiment, as shown in Figure 7, it is provided that a kind of web animation effect display device, including:
Judge module 310, is used for judging whether to exist in html file self-defined animation style.
Acquisition module 320, if there is self-defined animation style in html file, then obtains and oneself
The CSS animation configuration data that definition animation style is corresponding.
Display module 330, for according to CSS animation configuration data display animation effect.
In one embodiment, it is judged that if module 310 is additionally operable in html file exist customized label,
Then it is judged as there is self-defined animation style, if or html file exists being applied by span label
Pattern, then be judged as there is self-defined animation style.
In one embodiment, as shown in Figure 8, display module 330 includes:
Original state display unit 331, is used for obtaining animation style data, shows dynamic according to animation style data
Draw main body original state.
Animation display unit 332, is used for obtaining animation basic attribute data and status data, according to base attribute
Data determine display cycle and the display mode of animation, show according to display cycle, display mode and status data
Show the animation main body state at different time.
In one embodiment, animation style data include character pitch control parameter, text projective parameter,
Hide character parameter, and text projective parameter includes self adaptation distance parameter, and original state display unit 331 is also
For controlling parameter determination kinds of characters display position according to character pitch, according to hiding character, parameter will be preset
Extraneous character hide, according to text projective parameter projection animation main body and according to self adaptation distance parameter from
Adapt to adjust the display position of animation main body.
Status data includes time parameter and the text projective parameter corresponding with time parameter, transparent control parameter,
Animation display unit 332 is additionally operable to according to time parameter and the text projective parameter corresponding with time parameter not
Project animation main body with the time, and judge whether transparent control parameter is transparent, if it is, make projection move
Draw main body and show transparent.
In one embodiment, animation style data include inset spacing parameter, frame parameter, context parameter and
Hide character parameter, and original state display unit 331 is additionally operable to according to hiding character parameter by outside preset range
Character hide, according to inset spacing parameter determination content area, according to frame parameter determination frame region and limit
Frame color, determine background area and background color according to context parameter, according to content area, frame region and
Border color, background area and background color display animation main body original state.
Status data includes time parameter and the border color parameter corresponding with time parameter and background color ginseng
Number, animation display unit 332 is additionally operable to according to time parameter and the border color parameter corresponding with time parameter
Border color and background color is changed at different time with background color parameter.
In one embodiment, animation style data include character pitch parameter, character indentation parameter, hide
Character properties and virtual animation body data, original state display unit 331 is additionally operable to join according to character pitch
Number, character indentation parameter and the parameter that hides character display animation main body, show according to virtual animation body data
Virtual animation main body.
Status data include time parameter and the transparency parameter corresponding with time parameter, character pitch parameter and
Character indentation parameter, animation display unit 332 is additionally operable to according to time parameter and corresponding with time parameter saturating
Lightness parameter controls animation main body and the virtual animation main body transparency at different time, according to time parameter and
Aobvious at different time of the character pitch parameter corresponding with time parameter, character indentation state modulator animation main body
Show.
In one embodiment, animation style data include figure layer projective parameter, and hide character parameter, initially
Status display unit 331 is additionally operable to be hidden by the character outside preset range, according to figure according to the parameter that hides character
Layer projective parameter projection animation main body.
Status data includes time parameter and the figure layer projective parameter corresponding with time parameter, animation display unit
332 are additionally operable to move in different time projection according to time parameter and the figure layer projective parameter corresponding with time parameter
Draw main body.
One of ordinary skill in the art will appreciate that all or part of flow process realizing in above-described embodiment method,
Can be by computer program and complete to instruct relevant hardware, described program can be stored in a computer
In read/write memory medium, in the embodiment of the present invention, this program can be stored in the storage of computer system and be situated between
In matter, and performed by least one processor in this computer system, to realize including such as above-mentioned each method
The flow process of embodiment.Wherein, described storage medium can be magnetic disc, CD, read-only store-memory body
(Read-Only Memory, ROM) or random store-memory body (Random Access Memory, RAM)
Deng.
Each technical characteristic of embodiment described above can combine arbitrarily, for making description succinct, the most right
The all possible combination of each technical characteristic in above-described embodiment is all described, but, if these skills
There is not contradiction in the combination of art feature, is all considered to be the scope that this specification is recorded.
Embodiment described above only have expressed the several embodiments of the present invention, and it describes more concrete and detailed,
But can not therefore be construed as limiting the scope of the patent.It should be pointed out that, for this area
For those of ordinary skill, without departing from the inventive concept of the premise, it is also possible to make some deformation and change
Entering, these broadly fall into protection scope of the present invention.Therefore, the protection domain of patent of the present invention should be with appended power
Profit requires to be as the criterion.
Claims (14)
1. a web animation effect display method, described method includes:
Judge whether html file exists self-defined animation style；
If html file exists self-defined animation style, then obtain and described self-defined animation style pair
The CSS animation configuration data answered；
According to described CSS animation configuration data display animation effect.
Method the most according to claim 1, it is characterised in that described whether judge in html file
The step that there is self-defined animation style is:
If described html file exists customized label, then it is judged as there is self-defined animation style；
Or if described html file existed the pattern applied by span label, then be judged as existing from
Definition animation style.
Method the most according to claim 1, it is characterised in that described according to the configuration of described CSS animation
The step of data display animation effect includes:
Obtain animation style data, show animation main body original state according to described animation style data；
Obtain animation basic attribute data and status data；
Display cycle and the display mode of animation is determined according to described basic attribute data；
The animation main body state at different time is shown according to described display cycle, display mode and status data.
Method the most according to claim 3, it is characterised in that described animation style data include character
Spacing controls parameter, text projective parameter, hide character parameter, and described text projective parameter includes self adaptation
Distance parameter, the described step according to described animation style data display animation main body original state includes: root
Parameter determination kinds of characters display position is controlled, according to the parameter that hides character by outside preset range according to character pitch
Character hide, according to text projective parameter projection animation main body and according to self adaptation distance parameter self adaptation adjust
The display position of whole animation main body；
Described status data includes time parameter and the text projective parameter corresponding with time parameter, transparent control
Parameter, described according to described display cycle, display mode and status data display animation main body at different time
The step of state include: according to described time parameter and the text projective parameter corresponding with time parameter not
Project animation main body with the time, and judge whether transparent control parameter is transparent, if it is, make described throwing
Shadow animation main body shows transparent.
Method the most according to claim 3, it is characterised in that described animation style data include inner edge
Away from parameter, frame parameter, context parameter and the parameter that hides character, described aobvious according to described animation style data
Show that the step of animation main body original state includes: the character outside preset range is hidden by parameter according to hiding character,
According to inset spacing parameter determination content area, according to frame parameter determination frame region and border color, basis
Context parameter determines background area and background color, according to described content area, frame region and border color,
Background area and background color display animation main body original state；
Described status data includes time parameter and the border color parameter corresponding with time parameter and background color
Parameter, described according to described display cycle, display mode and status data display animation main body at different time
The step of state include: according to described time parameter and the border color parameter corresponding with time parameter and the back of the body
Scape color parameter changes border color and background color at different time.
Method the most according to claim 3, it is characterised in that described animation style data include character
Spacing parameter, character indentation parameter, the parameter that hides character and virtual animation body data, described in described basis
The step of animation style data display animation main body original state includes: according to character pitch parameter, character contracting
Enter parameter and the parameter display animation main body that hides character, show virtual animation master according to virtual animation body data
Body；
Described status data includes time parameter and the transparency parameter corresponding with time parameter, character pitch ginseng
Number and character indentation parameter, described according to described display cycle, display mode and status data display animation master
Body includes in the step of the state of different time: according to described time parameter and corresponding with time parameter transparent
Spend animation main body described in state modulator and the virtual animation main body transparency at different time, according to the described time
Described in parameter and the character pitch parameter corresponding with time parameter, character indentation state modulator, animation main body is not
Display with the time.
Method the most according to claim 3, it is characterised in that described animation style data include figure layer
Projective parameter, hide character parameter, described according to described animation style data display animation main body original state
Step include: according to hiding character, the character outside preset range is hidden by parameter, according to figure layer projective parameter
Projection animation main body；
Described status data includes time parameter and the figure layer projective parameter corresponding with time parameter, described basis
Described display cycle, display mode and status data display animation main body are at the step bag of the state of different time
Include: project animation according to described time parameter and the figure layer projective parameter corresponding with time parameter at different time
Main body.
8. a web animation effect display device, it is characterised in that described device includes:
Judge module, is used for judging whether to exist in html file self-defined animation style；
Acquisition module, if there is self-defined animation style in the html file, then obtain with described from
The CSS animation configuration data that definition animation style is corresponding；
Display module, for according to described CSS animation configuration data display animation effect.
Device the most according to claim 8, it is characterised in that if described judge module is additionally operable to institute
State and html file exists customized label, be then judged as there is self-defined animation style, if or described
Html file is existed the pattern applied by span label, is then judged as there is self-defined animation style.
Device the most according to claim 8, it is characterised in that described display module includes:
Original state display unit, is used for obtaining animation style data, shows according to described animation style data
Animation main body original state；
Animation display unit, is used for obtaining animation basic attribute data and status data, according to described basic genus
Property data determine display cycle and the display mode of animation, according to described display cycle, display mode and state
Data display animation main body is in the state of different time.
11. devices according to claim 10, it is characterised in that described animation style data include word
Symbol spacing controls parameter, text projective parameter, hide character parameter, and described text projective parameter includes adaptive
Answer distance parameter, described original state display unit to be additionally operable to according to character pitch and control parameter determination difference word
Symbol display position, according to hiding character, the character outside preset range is hidden by parameter, according to text projective parameter
Projection animation main body the display position according to self adaptation distance parameter self-adaptative adjustment animation main body；
Described status data includes time parameter and the text projective parameter corresponding with time parameter, transparent control
Parameter, described animation display unit is additionally operable to throw according to described time parameter and the text corresponding with time parameter
Shadow parameter projects animation main body at different time, and judges whether transparent control parameter is transparent, if it is,
Described projection animation main body is then made to show transparent.
12. devices according to claim 10, it is characterised in that in described animation style data include
Back gauge parameter, frame parameter, context parameter and the parameter that hides character, described original state display unit is also used
In the character outside preset range being hidden according to the parameter that hides character, according to inset spacing parameter determination content area,
According to frame parameter determination frame region and border color, determine background area and background face according to context parameter
Color, shows animation according to described content area, frame region and border color, background area and background color
Main body original state；
Described status data includes time parameter and the border color parameter corresponding with time parameter and background color
Parameter, described animation display unit is additionally operable to according to described time parameter and the frame face corresponding with time parameter
Color parameter and background color parameter change border color and background color at different time.
13. devices according to claim 10, it is characterised in that described animation style data include word
Symbol spacing parameter, character indentation parameter, the parameter that hides character and virtual animation body data, described initial shape
State display unit is additionally operable to show animation according to character pitch parameter, character indentation parameter and the parameter that hides character
Main body, shows virtual animation main body according to virtual animation body data；
Described status data includes time parameter and the transparency parameter corresponding with time parameter, character pitch ginseng
Number and character indentation parameter, described animation display unit is additionally operable to according to described time parameter and and time parameter
Corresponding transparency parameter controls described animation main body and the virtual animation main body transparency at different time, root
According to dynamic described in described time parameter and the character pitch parameter corresponding with time parameter, character indentation state modulator
Draw the main body display at different time.
14. devices according to claim 10, it is characterised in that described animation style data include figure
Layer projective parameter, hide character parameter, and described original state display unit is additionally operable to according to hiding character parameter
Character outside preset range is hidden, projects animation main body according to figure layer projective parameter；
Described status data includes time parameter and the figure layer projective parameter corresponding with time parameter, described animation
Display unit is additionally operable to according to described time parameter and the figure layer projective parameter corresponding from time parameter when different
Between project animation main body.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510313513.2A CN106294501A (en) | 2015-06-09 | 2015-06-09 | web animation effect display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510313513.2A CN106294501A (en) | 2015-06-09 | 2015-06-09 | web animation effect display method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN106294501A true CN106294501A (en) | 2017-01-04 |
Family
ID=57658800
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510313513.2A Pending CN106294501A (en) | 2015-06-09 | 2015-06-09 | web animation effect display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106294501A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106780672A (en) * | 2017-01-16 | 2017-05-31 | 北京恒华伟业科技股份有限公司 | A kind of browser, animation editor Play System and method |
| CN108256062A (en) * | 2018-01-16 | 2018-07-06 | 携程旅游信息技术（上海）有限公司 | Web animation implementation method, device, electronic equipment, storage medium |
| CN108287888A (en) * | 2018-01-17 | 2018-07-17 | 北京网信云服信息科技有限公司 | A kind of carousel method and system of the page |
| CN109002282A (en) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | A kind of method and apparatus for realizing animation effect in web page exploitation |
| CN109117230A (en) * | 2018-08-14 | 2019-01-01 | 福建网龙计算机网络信息技术有限公司 | The 1 pixel frame display methods based on retina screen, storage medium |
| CN110060203A (en) * | 2019-04-22 | 2019-07-26 | 京东方科技集团股份有限公司 | Image display method, image display apparatus, electronic equipment and storage medium |
| CN110876067A (en) * | 2018-08-31 | 2020-03-10 | 广州虎牙信息科技有限公司 | Interface element display method, device, equipment and storage medium |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902545A (en) * | 2011-09-30 | 2013-01-30 | 微软公司 | Decomposing markup language elements for animation |
| US20140215312A1 (en) * | 2013-01-28 | 2014-07-31 | Red Hat, Inc. | Responsive Layout Based on Behavioral Intent in a Multi-Tenant Platform-as-a-Service (PaaS) System |
| CN104461486A (en) * | 2013-09-17 | 2015-03-25 | 腾讯科技（深圳）有限公司 | Method, device and system for achieving animation effects in webpages |
-
2015
- 2015-06-09 CN CN201510313513.2A patent/CN106294501A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102902545A (en) * | 2011-09-30 | 2013-01-30 | 微软公司 | Decomposing markup language elements for animation |
| US20140215312A1 (en) * | 2013-01-28 | 2014-07-31 | Red Hat, Inc. | Responsive Layout Based on Behavioral Intent in a Multi-Tenant Platform-as-a-Service (PaaS) System |
| CN104461486A (en) * | 2013-09-17 | 2015-03-25 | 腾讯科技（深圳）有限公司 | Method, device and system for achieving animation effects in webpages |
Non-Patent Citations (1)
| Title |
|---|
| 头头: "利用html5与css3实现跑动的爱心、动态水滴效果", 《HTTPS://WWW.CNBLOGS.COM/TOUTOU/P/4466214.HTML》 * |
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106780672A (en) * | 2017-01-16 | 2017-05-31 | 北京恒华伟业科技股份有限公司 | A kind of browser, animation editor Play System and method |
| CN108256062A (en) * | 2018-01-16 | 2018-07-06 | 携程旅游信息技术（上海）有限公司 | Web animation implementation method, device, electronic equipment, storage medium |
| CN108256062B (en) * | 2018-01-16 | 2020-11-24 | 携程旅游信息技术（上海）有限公司 | Webpage animation implementation method and device, electronic equipment and storage medium |
| CN108287888A (en) * | 2018-01-17 | 2018-07-17 | 北京网信云服信息科技有限公司 | A kind of carousel method and system of the page |
| CN109002282A (en) * | 2018-07-26 | 2018-12-14 | 北京京东金融科技控股有限公司 | A kind of method and apparatus for realizing animation effect in web page exploitation |
| CN109002282B (en) * | 2018-07-26 | 2020-11-03 | 京东数字科技控股有限公司 | Method and device for realizing animation effect in web page development |
| CN109117230A (en) * | 2018-08-14 | 2019-01-01 | 福建网龙计算机网络信息技术有限公司 | The 1 pixel frame display methods based on retina screen, storage medium |
| CN110876067A (en) * | 2018-08-31 | 2020-03-10 | 广州虎牙信息科技有限公司 | Interface element display method, device, equipment and storage medium |
| CN110060203A (en) * | 2019-04-22 | 2019-07-26 | 京东方科技集团股份有限公司 | Image display method, image display apparatus, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106294501A (en) | web animation effect display method and device | |
| EP2805258B1 (en) | Low resolution placeholder content for document navigation | |
| US10416874B2 (en) | Methods, apparatuses, and devices for processing interface displays | |
| CA2937702C (en) | Emphasizing a portion of the visible content elements of a markup language document | |
| KR20190136085A (en) | On-screen comment display method and electronic device | |
| CN104951364B (en) | A kind of language switching method and system based on Android platform | |
| US11455460B2 (en) | Method for displaying handwritten note in electronic book, electronic device and computer storage medium | |
| US10878175B2 (en) | Portlet display on portable computing devices | |
| CN106570098A (en) | Page refreshing method and device | |
| US20150012818A1 (en) | System and method for semantics-concise interactive visual website design | |
| CN110096277A (en) | A kind of dynamic page methods of exhibiting, device, electronic equipment and storage medium | |
| WO2018049869A1 (en) | Device and method for displaying extension point in page | |
| US20140075290A1 (en) | Window switching method and apparatus | |
| CN105279251B (en) | Virtual gift display method and device | |
| KR20120054750A (en) | Method and apparatus for selective display | |
| CN108256062B (en) | Webpage animation implementation method and device, electronic equipment and storage medium | |
| CN108156510B (en) | Page focus processing method and device and computer readable storage medium | |
| CN105528217A (en) | Partial refreshing method and device based on display list | |
| US20130232403A1 (en) | Method and system for the use of adjustment handles to facilitate dynamic layout editing | |
| CN111611037B (en) | View object processing method for electronic book, electronic device and storage medium | |
| US20150370439A1 (en) | Gpu-optimized scrolling systems and methods | |
| CN102411468A (en) | Method and device for exhibiting information by utilizing animation | |
| CN109582430B (en) | Method for displaying comment information in electronic book, computing device and storage medium | |
| US9886465B2 (en) | System and method for rendering of hierarchical data structures | |
| US20140245126A1 (en) | Method and apparatus for visualizing the underlying structure of a document using an interactive viewport overlay |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20170104 |