CN106548504A - Web animation generation method and device - Google Patents
Web animation generation method and device Download PDFInfo
- Publication number
- CN106548504A CN106548504A CN201510613099.7A CN201510613099A CN106548504A CN 106548504 A CN106548504 A CN 106548504A CN 201510613099 A CN201510613099 A CN 201510613099A CN 106548504 A CN106548504 A CN 106548504A
- Authority
- CN
- China
- Prior art keywords
- information
- described image
- animation
- display
- image
- 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.)
- Granted
Links
Landscapes
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a kind of web animation generation method and device.Wherein, the method includes：Image motion information is obtained, wherein, image motion information is used for display effect of the phenogram picture in display interface；The operational order of outside input is received, wherein, operational order is shown in the form of animation for starting image；Response operational order, control image are shown in display interface in the form of animation according to image motion information.The present invention solves the technical problem of the incompatible and caused poor user experience of animation display effect due to browser Yu pre-production.
Description
Technical field
The present invention relates to internet arena, in particular to a kind of web animation generation method and dress
Put.
Background technology
Nowadays, with the fast development of Internet technology, smart machine becomes more popular.People
Smart machine at one's side, quick and easy access the Internet can be utilized, and using intelligent terminal is
Browser in system browses all kinds of webpages.
Website is in order to lift viewing experience of the user when webpage is browsed, it will usually be Webpage in advance
Specific animation is set, and visual feedback is carried out come the operation to user.For example, pass through in user
When clickthrough is redirected to the page, by the animation display effect of being fade-in fade-out that pre-sets to page
Face switches over process and is shown；When user is switched over to the image in webpage by sliding,
Process is switched over to image by the rolling animation display effect for pre-setting to show.
However, current intelligent terminal's species is very more, and the browser that used of user also it is each not
It is identical.Therefore, using the animation display effect of pre-production, can suffer from the drawback that：
1st, the animation display effect of pre-production, manufacturing process are extremely complex, increased development cost；
2nd, the animation display effect of pre-production, because the problem of the compatibility of partial view device causes nothing
Method shows, affects Consumer's Experience.
For above-mentioned due to the incompatible and caused use of animation display effect of browser and pre-production
The problem of family experience difference, not yet proposes effective solution at present.
The content of the invention
Embodiments provide a kind of web animation generation method and device, with least solve due to
The technology of browser and the incompatible and caused poor user experience of animation display effect of pre-production is asked
Topic.
A kind of one side according to embodiments of the present invention, there is provided web animation generation method, including：
Image motion information is obtained, wherein, it is aobvious in display interface that image motion information is used for phenogram picture
Show effect；The operational order of outside input is received, wherein, operational order is used to start image with animation
Form shown；Response operational order, control image is according to image motion information in display interface
In shown in the form of animation.
Another aspect according to embodiments of the present invention, additionally provides a kind of web animation generating means, bag
Include：Acquisition module, for obtaining image motion information, wherein, image motion information is used for phenogram
As the display effect in display interface；Receiver module, for receiving the operational order of outside input,
Wherein, operational order is shown in the form of animation for starting image；Animation, for ringing
Operational order, control image is answered to carry out in the form of animation in display interface according to image motion information
Show.
In embodiments of the present invention, using acquisition image motion information, wherein, image motion information is used
In display effect of the phenogram picture in display interface；The operational order of outside input is received, wherein,
Operational order is shown in the form of animation for starting image；Response operational order, controls image
According to image motion information in display interface in the way of being shown in the form of animation, by obtain
Module, for obtaining image motion information, wherein, image motion information is used for phenogram picture and is showing
Display effect in interface；Receiver module, for receiving the operational order of outside input, wherein, behaviour
Make instruction to be shown in the form of animation for starting image；Animation, refers to for responding operation
Order, control image are shown in the form of animation in display interface according to image motion information, are reached
The purpose that animation is interacted is carried out with the operation of user in webpage by way of with generation in real time,
It is achieved thereby that the skill of the animation display effect generated in webpage in real time according to the trigger of user
Art effect, and then solve as browser is incompatible with the animation display effect of pre-production and cause
Poor user experience technical problem.
Description of the drawings
Accompanying drawing described herein is used for providing a further understanding of the present invention, constitutes the one of the application
Part, the schematic description and description of the present invention are used to explain the present invention, do not constitute to this
Bright improper restriction.In the accompanying drawings：
Fig. 1 is a kind of the hard of terminal for realizing web animation generation method of the embodiment of the present invention
Part structured flowchart；
Fig. 2 is a kind of schematic flow sheet of web animation generation method according to embodiments of the present invention；
Fig. 3 is a kind of specific embodiment of web animation generation method according to embodiments of the present invention
Detail flowchart；
Fig. 4 is that the page of a kind of optional web animation generation method according to embodiments of the present invention is illustrated
Figure；
Fig. 5 is that the page of a kind of optional web animation generation method according to embodiments of the present invention is illustrated
Figure；
Fig. 6 is that the page of a kind of optional web animation generation method according to embodiments of the present invention is illustrated
Figure；
Fig. 7 is that the page of a kind of optional web animation generation method according to embodiments of the present invention is illustrated
Figure；
Fig. 8 is a kind of structural representation of web animation generating means according to embodiments of the present invention；
Fig. 9 is the structural representation of a kind of optional web animation generating means according to embodiments of the present invention
Figure；
Figure 10 is the animation mould of a kind of optional web animation generating means according to embodiments of the present invention
The structural representation of block；
Figure 11 is the animation mould of a kind of optional web animation generating means according to embodiments of the present invention
The structural representation of block；
Figure 12 is the animation mould of a kind of optional web animation generating means according to embodiments of the present invention
The structural representation of block；And
Figure 13 is the animation mould of a kind of optional web animation generating means according to embodiments of the present invention
The structural representation of block.
Specific embodiment
In order that those skilled in the art more fully understand the present invention program, below in conjunction with the present invention
Accompanying drawing in embodiment, is clearly and completely described to the technical scheme in the embodiment of the present invention,
Obviously, described embodiment is only the embodiment of a present invention part, rather than the enforcement of whole
Example.Based on the embodiment in the present invention, those of ordinary skill in the art are not making creative work
Under the premise of the every other embodiment that obtained, should all belong to the scope of protection of the invention.
It should be noted that description and claims of this specification and the term in above-mentioned accompanying drawing
" first ", " second " etc. be for distinguishing similar object, without for describe specific order or
Precedence.It should be appreciated that the data for so using can be exchanged in the appropriate case, to retouch here
The embodiments of the invention stated can be with the order reality in addition to those for illustrating here or describing
Apply.Additionally, term " comprising " and " having " and their any deformation, it is intended that covering is not arranged
His includes, for example, contain the process of series of steps or unit, method, system, product or
Equipment is not necessarily limited to those steps clearly listed or unit, but may include clearly not list
Or other intrinsic for these processes, method, product or equipment step or unit.
Embodiment 1
According to embodiments of the present invention, there is provided a kind of embodiment of the method for web animation generation method, need
It is noted that can be in the executable finger of such as one group computer the step of the flow process of accompanying drawing is illustrated
Perform in the computer system of order, and, although show logical order in flow charts, but
In some cases, can be with the step shown or described by performing different from order herein.
The embodiment of the method provided by the embodiment of the present application one can mobile terminal, terminal or
Perform in the arithmetic unit that person is similar to.As a example by running on computer terminals, Fig. 1 is of the invention real
Apply a kind of hardware block diagram of terminal for realizing web animation generation method of example.Such as Fig. 1
Shown, terminal 10 can include one or more (one is only illustrated in figure) processors 102
(processor 102 can include but is not limited to Micro-processor MCV or PLD FPGA
Deng processing meanss), the memorizer 104 for data storage, and for the transmission mould of communication function
Block 106.It will appreciated by the skilled person that the structure shown in Fig. 1 is only illustrated, which is simultaneously
The structure of above-mentioned electronic installation is not caused to limit.For example, terminal 10 may also include and compare Fig. 1
Shown in more or less component, or with the configuration different from shown in Fig. 1.
Memorizer 104 can be used for the software program and module for storing application software, such as present invention enforcement
Corresponding programmed instruction/the module of web animation generation method in example, processor 102 is by running storage
Software program and module in the memorizer 104, so as to perform at various function application and data
Reason, that is, realize above-mentioned web animation generation method.Memorizer 104 may include high speed random access memory,
May also include nonvolatile memory, such as one or more magnetic storage device, flash memory or its
His non-volatile solid state memory.In some instances, memorizer 104 can further include relative to
The remotely located memorizer of processor 102, these remote memories can be by network connections to calculating
Machine terminal 10.The example of above-mentioned network include but is not limited to the Internet, intranet, LAN,
Mobile radio communication and combinations thereof.
Transmitting device 106 is for via a network reception or transmission data.Above-mentioned network is concrete
Example may include the wireless network that the communication providerses of terminal 10 are provided.In an example,
Transmitting device 106 includes a network adapter (Network Interface Controller, NIC),
Which can be connected with other network equipments so as to be communicated with the Internet by base station.In an example
In, transmitting device 106 can be radio frequency (Radio Frequency, RF) module, and which is used to pass through
Wireless mode is communicated with the Internet.
Under above-mentioned running environment, this application provides web animation generation method as shown in Figure 2.
Fig. 2 is the flow chart of according to embodiments of the present invention one web animation generation method.
As shown in Fig. 2 the one kind for the web animation generation method being applied in Reverse Proxy can
The scheme of choosing includes step is implemented as follows：
Step S102, obtains image motion information, wherein, image motion information is used for phenogram picture
Display effect in display interface.
Specifically, in display interface, several pictorial elements can be included, in order that these are static
Pictorial element has dynamic display effect, can be respectively each pictorial element in advance and arrange image fortune
Dynamic information.By image motion information, the dynamic effect of pictorial element is set.Wherein, scheme
As movable information can be according to prespecified storage format, with forms such as tables of data, XML, texts
Stored, the form of concrete storage is not limited, and is not repeated herein.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.CSS is CSS (Cascading StyleSheet), is that one kind is adopted in webpage making
CSS technology.By CSS can effectively to the page layout, font, color,
Background and other effects are realized more being accurately controlled.And CSS3 is the 3rd version of CSS technologies.
In CSS3, a set of keyframes is contained regular.Can be using keyframes in static state
Webpage in making of cartoon display effect.It is to be used for using the principle of keyframes making of cartoon
A set of CSS style sheet of description Webpage gradually switches to another set of CSS style sheet, by changing
The property parameters such as described page layout, font, color, background in two sets of CSS style sheets of change,
The content in Webpage is made to produce dynamic effect.The mistake of animation display effect is produced by said method
Cheng Zhong, additionally it is possible to by repeatedly switching CSS style sheet, to CSS style sheet in the form of percentage ratio
The time for switching over is defined.Wherein, 0% is used to represent that what is switched between CSS style sheet opens
Time beginning, 100% is used to represent the end time switched between CSS style sheet.Can certainly lead to
Cross from and to the two key words to be defined the time that CSS style sheet is switched over, herein
Do not repeat.
In CSS3, also include Animation attributes, when Web- Designing, can be with profit
Animation attributes are used, animation display effect is arranged to each element in webpage.Wherein, pass through
Animation attributes can be to the animation persistent period of each element in webpage, animation number of repetition etc.
Content is set.
In CSS3, also include Transform attributes, when Web- Designing, can be with profit
Make the element in webpage by modes such as rotation, scaling or inclinations with Transform attributes, realize
2D animations display effect or 3D animation display effects.
During realization, it is possible to use keyframes rule in CSS style sheet with change
The corresponding property parameters of each pictorial element be configured.To change in each CSS style sheet
Pictorial element corresponding title is set, for example can for float1, float2, float3, float4,
float5.When being arranged on 100%, complete by keyframes in CSS style sheet with image
The switching of the corresponding property parameters of element.Wherein, it is regular using keyframes, can be with corresponding CSS
The property parameters such as page layout, font, color, background in CSS are changed, so as to realize
The animation display effects such as the rotation of pictorial element, transverse axis displacement, longitudinal axis displacement.Further, pass through
When switching of the Animation attributes to property parameters corresponding with pictorial element in CSS style sheet continues
Between, the content such as switching times is defined.
Step S104, receives the operational order of outside input, wherein, operational order is used to start figure
As being shown in the form of animation.
Specifically, the operational order of outside input is received by step S104, so as to basis is received
Operational order triggering animation display effect.Wherein, operational order can be in click display interface
The triggering command that generates of ad-hoc location, or the content in display interface when switching over
The switching command of generation.In addition to this it is possible to be provided for starting image with dynamic by other instructions
The operational order shown by the form of picture, is not repeated herein.
Step S106, responds operational order, and control image is according to image motion information in display interface
In shown in the form of animation.
Specifically, in step s 106, after operational order is received, by calling image motion
Property parameters in information, and shown according to each property value control pictorial element in property parameters
Display effect in interface, so as to realize being shown in the form of animation.
In the middle of practical application, also had by taking the animation of the Webpage realized by CSS3 as an example
Body explanation.After operational order is received, by calling the CSS using keyframes rule settings
The property parameters for changing corresponding with pictorial element recorded in CSS, and Animation category
Property in record switching time, the parameter such as switching times, control pictorial element carried out in display interface
Show, so as to produce animation display effect.
By above-mentioned steps S102 to step S106, by obtaining the image motion information for pre-setting,
After the operational order for receiving outside input, the motion mode according to described in image motion information,
Control image is shown in display interface in the form of animation.Reach in webpage by with reality
The mode of Shi Shengcheng carries out the purpose that animation is interacted with the operation of user, it is achieved thereby that according to user's
The technique effect of the animation display effect that trigger is generated in webpage in real time, solves prior art
In due to the incompatible and caused Consumer's Experience of animation display effect of partial view device and pre-production
Poor problem.
As a kind of optional embodiment, step S106 response operational order, control image according to
Image motion information is shown in the form of animation in display interface, can be included：
Step S1061, according to the operational order of outside input, calls for generating the dynamic of web animation
Draw class；
Step S1063, reads image motion information by animated type, and controls image in display interface
In shown in the form of animation.
Specifically, by step S1061 to step S1063, after trigger is received, it is used for
The animated type of animation display effect, the image to recite animation movement properties are generated in display interface
Movable information is read out, so as to, in display interface, generate according to the movable information for reading corresponding
Animation display effect.
Used as a kind of optional embodiment, image motion information at least includes：Initial position message,
Target position information and move time information, wherein, initial position message is used to record image aobvious
Show the first display location in interface, target position information is used to recording image in display interface the
Two display locations, move time information are moved to second display by the first display location for recording image
Time span required for position.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.In CSS, in keyframes to webpage in initial position message corresponding with each object
Recorded with target position information, in Animation attributes to webpage in it is corresponding with each object
The animation persistent period is recorded.
As a kind of optional embodiment, include initial position message, target in image motion information
When positional information and move time information, step S106 controls image according to image motion information aobvious
Shown in the form of animation in showing interface, including：
Step S61, reads image motion information corresponding with image.
Step S63, control image are shown by first in the time span that move time information is recorded
Position is moved to the second display location.
Specifically, by step S61 to step S63, read the initial position in image motion information
Information, target position information and move time information, are believed by initial position message and target location
Breath determines first display location and second display location of the image in display interface, and by motion
Temporal information determines the time span that image is moved in display interface.By control image in motion
It is interior that second display location is moved to by the first display location, so as to realize that animation is generated in webpage to be shown
Show effect.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.In CSS, translateX variables and translateY variables can be passed through to image aobvious
Show that the displacement in interface is controlled.
As a kind of optional embodiment, image motion corresponding with image is being read in step S61
After information, step S106 can also include：
Step S621, obtains the true resolution of display interface.
Step S623, according to true resolution and image motion information, is calculated image and is showing
The first display location and the second display location in interface.
Specifically, as the resolution of display interface is different, therefore, it can in image motion information
Initial position message, target position information recorded in the form of relative display position.For example,
Initial position message and target position information in the form of percentage ratio to image in display interface is entered
Row record.By step S621 to step S623, according to the actual resolution of the display interface for getting
Rate, initial position message and target position information, it is actual in display interface by being calculated image
The first display location and the second display location.Control according to the first display location and the second display location
Image is shown in the form of animation that in display interface generation is matched with current display interface
Animation display effect.By said method, animation display effect can be made to be applied to any resolution
In the middle of display interface, so as to improve adaptability.
Used as a kind of optional embodiment, image motion information also includes：Rotation angle information, rotation
Gyration information is rotated with the central point of image as axle center in display interface for recording image
Angle, wherein, control the time span that records in move time information of image in execution step S63
It is interior, while being moved to the second display location by the first display location, can be with control figure picture according to rotation
The angle of gyration information record is rotated.
Specifically, outside except, making image produce the animation display effect of displacement in display interface,
Can also be set by the anglec of rotation to image, make the image in display interface produce rotation
Animation display effect.
Image is controlled in the time span that move time information is recorded in execution step S63, image exists
While the second display location is moved to by the first display location in display interface, can be with according to image
Rotation angle information in movable information, is rotated image in time span, so as to produce rotation
The animation display effect for turning.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.Wherein it is possible to the angle for passing through rotation of the rotate variables to image in display interface is carried out
Control.
Used as a kind of optional embodiment, image motion information also includes：Original zoom information, mesh
Mark scalability information, original zoom information are used to record first scaling of the image in display interface,
Target scale information is used to record second scaling of the image in display interface, wherein, performing
Step S63 controls image in the time span that move time information is recorded, and is moved by the first display location
While moving to the second display location, control image zooms to the second scaling by the first scaling.
Specifically, except, making image produce the animation display effect of displacement and rotation in display interface
Outside, can also be set by the scalability information to image, make the image generation in display interface
Change from small to big or animation display effect from large to small.
Image is controlled in the time span that move time information is recorded in execution step S63, image exists
While the second display location is moved to by the first display location in display interface, can be with according to image
Original zoom information, target scale information in movable information, makes the size of image in time span
Change, so as to produce descending or ascending animation display effect.
As a kind of optional embodiment, original zoom information and target of the image in display interface
Scalability information, it is also possible to which the form that the ratio of display interface is accounted for by image is recorded.Will be above-mentioned first
Beginning scalability information and target scale information are calculated with the true resolution of display interface respectively, it is determined that
First scaling and second scaling of the initial pictures in display interface.By said method,
The animation display effect generated on Webpage can be allow to adapt to the display of any resolution
Interface.
Used as a kind of optional embodiment, image motion information also includes：Initial transparent degree information and
Target clear degree information, initial transparent degree information are transparent for recording image in display interface first
Degree, target clear degree information are used to record second transparency of the image in display interface, wherein,
Control image is moved to second by the first display location in the time span that move time information is recorded
While display location, control image is faded to the second transparency by the first transparency.
Specifically, except, making image produce displacement, rotation and the animation for scaling in display interface
Outside display effect, can also be set by the transparence information to image, in making display interface
Image produce by the animation display effect faded in or fade out.
Image is controlled in the time span that move time information is recorded in execution step S63, image exists
While the second display location is moved to by the first display location in display interface, can be with according to image
Initial transparent degree information and target clear degree information in movable information, makes image in time span
Transparency changes, so as to produce the animation display effect faded in or fade out.
As a kind of optional embodiment, illustrate by taking Xing Ying alliances website homepage as an example, such as scheme
Shown in 3, comprise the following steps that：
Step S1, can be provided with five pictorial element li in html corresponding with Webpage,
A labels are respectively provided with each pictorial element, five circles in this five pictorial elements and Fig. 5
Shape region corresponds.
Step S2, arranges class corresponding with circular image element in the Keyframes in CSS,
For example：Float1, in float1, can be by translateX and translateY to pictorial element
Displacement set, the anglec of rotation is set by rotate.Show generation animation is needed
During effect, by calling this float1 class, such as：
Wherein, arrange transform attributes when be respectively provided with the anglec of rotation, lateral displacement,
Length travel these three attributes, wherein, the anglec of rotation is rotate (- 12deg), i.e. rotate counterclockwise 12
Degree；Lateral displacement is translateX (- 125px), i.e., move right 5 pixels in X-direction；Longitudinal direction
Displacement is translateY (35px), i.e., move down 35 pixels in Y direction.In addition, also
It is controlled using the variable condition of percentage ratio pair attribute corresponding with pictorial element.When 0% it is
Original state, does not make any statement here, when 100%, represents at the end of animation display effect, figure
Pixel element is moved to the position of above-mentioned setting.
The animation attributes of Keyframe are set by step S3 using Animation, wherein,
Animation attributes include：Animation performs the time, and animation performs number of times etc..For example：li：Nth-child (1),
Wherein, when animation is performed, by li：Nth-child (1) calls the parameter in float1, to
Corresponding pictorial element li be controlled, generate subscribe animation display effect, such as：
Whether step S4, judge user by the specific region at click display interface center.
Step S5, as shown in figure 4, when user clicks on the specific region at display interface center, i.e.,
When judging that user triggers click event, animation display effect is generated using the parameter of above-mentioned setting.
As shown in figure 4, in the initial page, an only middle circular image in display interface.
After user clicks on middle circular image regions, triggering generates animation display effect.When triggering animation shows
After showing effect, user need not be clicked on again.Pass through such as Fig. 5, Fig. 6 through display interface
Process, final display interface are as shown in Figure 7.
In the above-mentioned methods by by translateX, translateY, rotate of Transform attributes
Value is combined, and calls animation to realize annular animation.
It should be noted that for aforesaid each method embodiment, in order to be briefly described, therefore by which all
A series of combination of actions is expressed as, but those skilled in the art should know, the present invention is not received
The restriction of described sequence of movement, because according to the present invention, some steps can be using other orders
Or while carry out.Secondly, those skilled in the art should also know, reality described in this description
Apply example and belong to preferred embodiment, involved action and the module not necessarily present invention are necessary.
Through the above description of the embodiments, those skilled in the art can be understood that root
The mode of required general hardware platform can be added to realize by software according to the method for above-described embodiment, when
So can also be by hardware, but the former is more preferably embodiment in many cases.Based on such reason
Solution, the part that technical scheme is substantially contributed to prior art in other words can be with soft
The form of part product is embodied, and the computer software product is stored in a storage medium (such as
ROM/RAM, magnetic disc, CD) in, use so that a station terminal equipment (can including some instructions
Being mobile phone, computer, server, or network equipment etc.) perform each embodiment institute of the invention
The method stated.
Embodiment 2
According to embodiments of the present invention, additionally provide a kind of for implementing above-mentioned web animation generation method
Web animation generating means, as shown in figure 8, the device includes：Acquisition module 22, receiver module
24 and animation 26.
Wherein, acquisition module 22, for obtaining image motion information, wherein, image motion information is used
In display effect of the phenogram picture in display interface；Receiver module 24, for receiving outside input
Operational order, wherein, operational order is shown in the form of animation for starting image；Animation mould
Block 26, for responding operational order, control image is according to image motion information with dynamic in display interface
The form of picture is shown.
By above-mentioned acquisition module 22, receiver module 24 and animation 26, set by obtaining in advance
The image motion information put, after the operational order for receiving outside input, according to image motion information
Described in motion mode, control image shown in the form of animation in display interface.Reach
To carry out the purpose that animation is interacted with the operation of user by way of generating in real time in webpage, from
And realize the technology of the animation display effect generated in webpage in real time according to the trigger of user
Effect, solve in prior art due to partial view device and pre-production animation display effect not and
Hold and the problem of caused poor user experience.
As a kind of optional embodiment, as shown in figure 9, image motion information at least includes：Just
Beginning positional information, target position information and move time information, wherein, animation 26 includes：
Sub- read module 261 and the first sub- control module 264.
Wherein, sub- read module 261, for reading image motion information corresponding with image, wherein,
Initial position message is used to record first display location of the image in display interface, target position information
For recording second display location of the image in display interface, move time information is used to record image
Time span by required for the first display location is moved to the second display location；First sub- control module
264, for controlling image in the time span that move time information is recorded, by the first display location
It is moved to the second display location.
Specifically, by above-mentioned sub- read module 261 and the first sub- control module 264, read image
Initial position message, target position information and move time information in movable information, by initial
Positional information and target position information determine first display location and second of the image in display interface
Display location, and the time span that image is moved in display interface is determined by move time information.
The second display location is moved to by the first display location in movement time by controlling image, so as to reality
Animation display effect is generated in webpage now.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.In CSS, translateX variables and translateY variables can be passed through to image aobvious
Show that the displacement in interface is controlled.
Used as a kind of optional embodiment, as shown in Figure 10, animation 26 also includes：Son is obtained
Delivery block 262 and sub- computing module 263.
Wherein, sub-acquisition module 262, for obtaining the true resolution of display interface；Son calculates mould
Block 263, for according to true resolution and image motion information, being calculated image in display interface
In the first display location and the second display location.
Specifically, as the resolution of display interface is different, therefore, it can in image motion information
Initial position message, target position information recorded in the form of relative display position.For example,
Initial position message and target position information in the form of percentage ratio to image in display interface is entered
Row record.By above-mentioned sub-acquisition module 262 and sub- computing module 263, according to the display for getting
The true resolution at interface, initial position message and target position information, are existed by being calculated image
The first actual display location and the second display location in display interface.According to the first display location and
Two display locations control image is shown in the form of animation in display interface, is generated aobvious with current
Show the animation display effect that interface matches.By said method, it is suitable for can animation display effect
In the middle of the display interface of any resolution, so as to improve adaptability.
As a kind of optional embodiment, as shown in figure 11, can be with image motion information
Including：Rotation angle information, rotation angle information are used to record image in display interface with image
The angle rotated for axle center by central point, wherein, animation 26 also includes：Second son control
Module 265.Wherein, the second sub- control module 265, for controlling image according to rotation angle information
The angle of record is rotated.
Specifically, outside except, making image produce the animation display effect of displacement in display interface,
Can also be set by the anglec of rotation to image, make the image in display interface produce rotation
Animation display effect.
The time that control image is recorded in move time information is performed in the above-mentioned first sub- control module 264
In length, while image is moved to the second display location by the first display location in display interface,
Can also by the above-mentioned second sub- control module 265 according to the rotation angle information in image motion information,
In time span rotated image, so as to produce the animation display effect of rotation.
In the middle of practical application, carry out by taking the animation of the Webpage realized by CSS3 as an example concrete
Explanation.Wherein it is possible to the angle for passing through rotation of the rotate variables to image in display interface is carried out
Control.
As a kind of optional embodiment, as shown in figure 12, can be with image motion information
Including：Original zoom information, target scale information, original zoom information are used to record image in display
The first scaling in interface, target scale information are used to record image in display interface second
Scaling, wherein, animation 26 also includes：3rd sub- control module 266.Wherein the 3rd is sub
Control module 266, zooms to second scaling by the first scaling for controlling image.
Specifically, except, making image produce the animation display effect of displacement and rotation in display interface
Outside, can also be set by the scalability information to image, make the image generation in display interface
Change from small to big or animation display effect from large to small.
The time span that image is recorded in move time information is controlled in the above-mentioned first sub- control module 264
It is interior, while image is moved to the second display location by the first display location in display interface, may be used also
With by above-mentioned 3rd sub- control module 266 according to the original zoom information in image motion information, mesh
Mark scalability information, in time span, make the size of image change, so as to produce it is descending or
The ascending animation display effect of person.
As a kind of optional embodiment, as shown in figure 13, can be with image motion information
Including：Initial transparent degree information and target clear degree information, initial transparent degree information are used to record image
The first transparency in display interface, target clear degree information are used to record image in display interface
The second transparency, wherein, animation 26 also includes：4th sub- control module 267.Wherein,
4th sub- control module 267, is faded to the second transparency by the first transparency for controlling image.
Specifically, except, making image produce displacement, rotation and the animation for scaling in display interface
Outside display effect, can also be set by the transparence information to image, in making display interface
Image produce by the animation display effect faded in or fade out.
The time span that image is recorded in move time information is controlled in the above-mentioned first sub- control module 264
It is interior, while image is moved to the second display location by the first display location in display interface, may be used also
With by above-mentioned 4th sub- control module 267 according to the initial transparent degree information in image motion information and
Target clear degree information, in time span, makes the transparency of image change, fades in so as to produce
Or the animation display effect faded out.
Embodiment 3
Embodiments of the invention additionally provide a kind of storage medium.Alternatively, in the present embodiment, on
State storage medium and can be used for preserving the web animation generation method that provided of above-described embodiment one and held
Capable program code.
Alternatively, in the present embodiment, during above-mentioned storage medium may be located at computer network, movement is whole
At least one of the multiple network equipments in network in the group of the end network equipment.
Alternatively, in the present embodiment, storage medium is arranged to storage for performing following steps
Program code：
S1, obtains image motion information, wherein, image motion information is used for phenogram picture and is showing boundary
Display effect in face；
S2, receives the operational order of outside input, wherein, operational order is used to start image with animation
Form shown；
S3, respond operational order, control image according to image motion information in display interface with animation
Form shown.
Alternatively, storage medium is also configured to store the program code for being used to performing following steps：
S1, reads image motion information corresponding with image；
S2, control image are moved by the first display location in the time span that move time information is recorded
Move to the second display location.
Alternatively, storage medium is also configured to store the program code for being used to performing following steps：Obtain
Take the true resolution of display interface；According to true resolution and image motion information, figure is calculated
As the first display location and the second display location in display interface.
Alternatively, storage medium is also configured to store the program code for being used to performing following steps：
Control image is moved to second by the first display location in the time span that move time information is recorded
While display location, control image is rotated according to the angle that rotation angle information is recorded.
Alternatively, storage medium is also configured to store the program code for being used to performing following steps：
Control image is moved to second by the first display location in the time span that move time information is recorded
While display location, control image zooms to the second scaling by the first scaling.
Alternatively, storage medium is also configured to store the program code for being used to performing following steps：
Control image is moved to second by the first display location in the time span that move time information is recorded
While display location, control image is faded to the second transparency by the first transparency.
Alternatively, in the present embodiment, above-mentioned storage medium can be including but not limited to：USB flash disk, only
Read memorizer (ROM, Read-Only Memory), random access memory (RAM, Random
Access Memory), portable hard drive, magnetic disc or CD etc. are various can be with Jie of store program codes
Matter.
The embodiments of the present invention are for illustration only, do not represent the quality of embodiment.
If the integrated unit in above-described embodiment realized using in the form of SFU software functional unit and as
When independent production marketing or use, can be stored in the storage medium that above computer can read.
Based on such understanding, what technical scheme was substantially contributed to prior art in other words
The all or part of part or the technical scheme can be embodied in the form of software product, the meter
Calculation machine software product is stored in storage medium, is used including some instructions so that one or more calculating
Machine equipment (can be personal computer, server or network equipment etc.) performs each enforcement of the present invention
The all or part of step of example methods described.
In the above embodiment of the present invention, the description to each embodiment all emphasizes particularly on different fields, certain reality
There is no the part described in detail in applying example, may refer to the associated description of other embodiment.
In several embodiments provided herein, it should be understood that disclosed client, can
Realize by another way.Wherein, device embodiment described above is only schematic,
The division of such as described unit, only a kind of division of logic function, can have in addition when actually realizing
Dividing mode, such as multiple units or component can with reference to or be desirably integrated into another system,
Or some features can be ignored, or do not perform.Another, shown or discussed coupling each other
Close or direct-coupling or communication connection can be INDIRECT COUPLING by some interfaces, unit or module or
Communication connection, can be electrical or other forms.
It is described as separating component explanation unit can be or may not be it is physically separate,
As the part that unit shows can be or may not be physical location, you can with positioned at a ground
Side, or can also be distributed on multiple NEs.Can select therein according to the actual needs
Some or all of unit is realizing the purpose of this embodiment scheme.
In addition, each functional unit in each embodiment of the invention can be integrated in a processing unit
In, or unit be individually physically present, it is also possible to two or more units are integrated in
In one unit.Above-mentioned integrated unit both can be realized in the form of hardware, it would however also be possible to employ soft
The form of part functional unit is realized.
The above is only the preferred embodiment of the present invention, it is noted that for the art
For those of ordinary skill, under the premise without departing from the principles of the invention, some improvement can also be made
And retouching, these improvements and modifications also should be regarded as protection scope of the present invention.
Claims (14)
1. a kind of web animation generation method, it is characterised in that include：
Image motion information is obtained, wherein, described image movable information is used for phenogram picture aobvious
Show the display effect in interface；
The operational order of outside input is received, wherein, the operational order is used to start the figure
As being shown in the form of animation；
The operational order is responded, control described image is according to described image movable information described
Shown in the form of the animation in display interface.
2. method according to claim 1, it is characterised in that the response operational order, control
Described image according to described image movable information in the display interface with the shape of the animation
Formula shown, including：
According to the operational order of the outside input, call for generating the animated type of web animation；
Described image movable information is read by the animated type, and described image is controlled described
Shown in the form of the animation in display interface.
3. method according to claim 2, it is characterised in that described image movable information is at least wrapped
Include：Initial position message, target position information and move time information, wherein, it is described first
Beginning positional information is used to record first display location of the described image in the display interface, institute
Target position information is stated for recording second display position of the described image in the display interface
Put, the move time information is moved to by first display location for recording described image
Time span required for second display location.
4. method according to claim 3, it is characterised in that include in described image movable information
When the initial position message, the target position information and the move time information, control
Described image according to described image movable information in the display interface with the shape of the animation
Formula shown, including：
Read described image movable information corresponding with described image；
Control described image in the time span that the move time information is recorded, by described the
One display location is moved to second display location.
5. method according to claim 4, it is characterised in that corresponding with described image reading
After described image movable information, also include：
Obtain the true resolution of the display interface；
According to the true resolution and described image movable information, it is calculated described image and exists
First display location and second display location in the display interface.
6. method according to claim 5, it is characterised in that described image movable information also includes：
Rotation angle information, the rotation angle information are used to record described image in the display interface
In the angle that rotated as axle center with the central point of described image, wherein, controlling the figure
As, in the time span of move time information record, being moved by first display location
While to second display location, control described image is remembered according to the rotation angle information
The angle of record is rotated.
7. method according to claim 6, it is characterised in that described image movable information also includes：
Original zoom information, target scale information, the original zoom information are used to record described image
The first scaling in the display interface, the target scale information are used to record described
Second scaling of the image in the display interface, wherein, in control described image in institute
State in the time span of move time information record, be moved to by first display location
While second display location, control described image is zoomed to by first scaling
Second scaling.
8. method according to claim 7, it is characterised in that described image movable information also includes：
Initial transparent degree information and target clear degree information, the initial transparent degree information are used to record institute
First transparency of the image in the display interface is stated, the target clear degree information is used to remember
Record second transparency of the described image in the display interface, wherein, in control described image
In the time span of move time information record, moved by first display location
While moving to second display location, control described image is by the first transparency gradual change
It is to second transparency.
9. a kind of web animation generating means, it is characterised in that include：
Acquisition module, for obtaining image motion information, wherein, described image movable information is used
In display effect of the phenogram picture in display interface；
Receiver module, for receiving the operational order of outside input, wherein, the operational order
Shown in the form of animation for starting described image；
Animation, for responding the operational order, control described image is according to described image
Movable information is shown in the display interface in the form of the animation.
10. device according to claim 9, it is characterised in that described image movable information is at least wrapped
Include：Initial position message, target position information and move time information, wherein, it is described dynamic
Drawing module includes：
Sub- read module, for reading described image movable information corresponding with described image, its
In, the initial position message shows for recording described image in the display interface first
Show position, the target position information is used to recording described image in the display interface the
Two display locations, the move time information are used to record described image by the described first display position
Put the time span being moved to required for second display location；
First sub- control module, for controlling what described image was recorded in the move time information
In time span, second display location is moved to by first display location.
11. devices according to claim 10, it is characterised in that the animation also includes：
Sub-acquisition module, for obtaining the true resolution of the display interface；
Sub- computing module, for according to the true resolution and described image movable information, meter
Calculation obtains first display location and described second of the described image in the display interface
Display location.
12. devices according to claim 11, it is characterised in that described image movable information is also wrapped
Include：Rotation angle information, the rotation angle information are used to record described image in the display
The angle rotated with the central point of described image as axle center in interface, wherein, the animation
Module also includes：
Second sub- control module, records according to the rotation angle information for controlling described image
The angle rotated.
13. devices according to claim 12, it is characterised in that described image movable information is also wrapped
Include：Original zoom information, target scale information, the original zoom information are used to record described
First scaling of the image in the display interface, the target scale information are used to record
Second scaling of the described image in the display interface, wherein, the animation is also
Including：
3rd sub- control module, is zoomed to by first scaling for controlling described image
Second scaling.
14. devices according to claim 13, it is characterised in that described image movable information is also wrapped
Include：Initial transparent degree information and target clear degree information, the initial transparent degree information are used to remember
Record first transparency of the described image in the display interface, the target clear degree information are used
In record second transparency of the described image in the display interface, wherein, the animation mould
Block also includes：
4th sub- control module, for control described image by first transparency fade to
Second transparency.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510613099.7A CN106548504B (en) | 2015-09-23 | 2015-09-23 | Webpage animation generation method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510613099.7A CN106548504B (en) | 2015-09-23 | 2015-09-23 | Webpage animation generation method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106548504A true CN106548504A (en) | 2017-03-29 |
| CN106548504B CN106548504B (en) | 2020-09-11 |
Family
ID=58365162
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510613099.7A Active CN106548504B (en) | 2015-09-23 | 2015-09-23 | Webpage animation generation method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106548504B (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107423366A (en) * | 2017-06-28 | 2017-12-01 | 武汉斗鱼网络科技有限公司 | A kind of carousel figure switching method and device |
| CN108090176A (en) * | 2017-12-15 | 2018-05-29 | 上海器魂智能科技有限公司 | Web-based cartoon display method, device, equipment and storage medium |
| CN108459856A (en) * | 2018-02-28 | 2018-08-28 | 平安普惠企业管理有限公司 | Interface icon configuration method, device, computer equipment and storage medium |
| CN110769129A (en) * | 2019-10-14 | 2020-02-07 | 北京字节跳动网络技术有限公司 | Image processing method, image processing device, electronic equipment and computer readable storage medium |
| CN111813969A (en) * | 2019-11-08 | 2020-10-23 | 厦门雅基软件有限公司 | Multimedia data processing method and device, electronic equipment and computer storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101901274A (en) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | Method and device for achieving special effects of webpage |
| CN102662664A (en) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | Interface animation realization method and system |
| CN104123742A (en) * | 2014-07-21 | 2014-10-29 | 徐才 | Method and player for translating static cartoon picture into two dimensional animation |
| US20140359430A1 (en) * | 2013-06-03 | 2014-12-04 | Microsoft Corporation | Animation editing |
-
2015
- 2015-09-23 CN CN201510613099.7A patent/CN106548504B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101901274A (en) * | 2010-08-11 | 2010-12-01 | 深圳市茁壮网络股份有限公司 | Method and device for achieving special effects of webpage |
| CN102662664A (en) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | Interface animation realization method and system |
| US20140359430A1 (en) * | 2013-06-03 | 2014-12-04 | Microsoft Corporation | Animation editing |
| CN104123742A (en) * | 2014-07-21 | 2014-10-29 | 徐才 | Method and player for translating static cartoon picture into two dimensional animation |
Non-Patent Citations (1)
| Title |
|---|
| 李恒武主编: "《Web程序设计》", 31 January 2014, 吉林大学出版社 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107423366A (en) * | 2017-06-28 | 2017-12-01 | 武汉斗鱼网络科技有限公司 | A kind of carousel figure switching method and device |
| CN107423366B (en) * | 2017-06-28 | 2020-04-10 | 武汉斗鱼网络科技有限公司 | Carousel graph switching method and device |
| CN108090176A (en) * | 2017-12-15 | 2018-05-29 | 上海器魂智能科技有限公司 | Web-based cartoon display method, device, equipment and storage medium |
| CN108459856A (en) * | 2018-02-28 | 2018-08-28 | 平安普惠企业管理有限公司 | Interface icon configuration method, device, computer equipment and storage medium |
| CN110769129A (en) * | 2019-10-14 | 2020-02-07 | 北京字节跳动网络技术有限公司 | Image processing method, image processing device, electronic equipment and computer readable storage medium |
| CN110769129B (en) * | 2019-10-14 | 2022-04-05 | 北京字节跳动网络技术有限公司 | Image processing method, image processing device, electronic equipment and computer readable storage medium |
| CN111813969A (en) * | 2019-11-08 | 2020-10-23 | 厦门雅基软件有限公司 | Multimedia data processing method and device, electronic equipment and computer storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106548504B (en) | 2020-09-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106548504A (en) | Web animation generation method and device | |
| JP5897715B2 (en) | Processing method by computer | |
| DE202011109296U1 (en) | Device for providing a visual transition between screens | |
| CN106658139B (en) | Focus control method and device | |
| CN106331345A (en) | Interactive message display method, device and system | |
| CN105637464A (en) | Scroll end effects for websites and content | |
| CN106951083A (en) | VR methods of exhibiting and system based on BIM | |
| CN109634603A (en) | A kind of H5 page animation method and apparatus based on Canvas painting canvas | |
| EP4242839A1 (en) | Page switching display method and apparatus, storage medium, and electronic device | |
| CN103605461A (en) | Method and terminal for displaying application interfaces | |
| CN104536649A (en) | Page display method and device | |
| CN106528695A (en) | Method for showing video thumbnail through mouse dragging | |
| CN108491140B (en) | Interactive content display method and device | |
| CN101976195B (en) | Method and device for setting user interface | |
| CN109544665A (en) | Generation method, device and the storage medium of animation poster | |
| CN107861711B (en) | Page adaptation method and device | |
| CN106909263A (en) | The interactive display method and system of 3-D view | |
| CN106649725A (en) | Page switching method and device | |
| CN104915102B (en) | The exchange method and device of graphical interfaces | |
| CN111866403B (en) | Video graphic content processing method, device, equipment and medium | |
| CN106874387A (en) | A kind of adaptive H TML roll screens show the method for real time information | |
| CN106326299A (en) | Special effect display method and system of intelligent terminal | |
| CN107945243A (en) | image moving method and device | |
| CN111782309B (en) | Method and device for displaying information and computer readable storage medium | |
| KR101528426B1 (en) | Method and apparatus for creating image displaying status of on-line contents |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |