CN108090176A - Web-based cartoon display method, device, equipment and storage medium - Google Patents
Web-based cartoon display method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN108090176A CN108090176A CN201711346199.3A CN201711346199A CN108090176A CN 108090176 A CN108090176 A CN 108090176A CN 201711346199 A CN201711346199 A CN 201711346199A CN 108090176 A CN108090176 A CN 108090176A
- Authority
- CN
- China
- Prior art keywords
- animation
- display
- target
- encapsulation
- display parameters
- 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
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
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/017—Gesture based interaction, e.g. based on a set of recognized hand gestures
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The embodiment of the invention discloses a kind of web-based cartoon display method, device, equipment and storage mediums.The described method includes：According to the animation operation information for the target object in target webpage detected, the animation display parameters with the animation operation information matches are obtained；According to the matched at least one encapsulation animation of the animation display parameters, generate target animation Show Styles, the target webpage is matched with default encapsulation animation collection, and the different encapsulation animations that the encapsulation animation is concentrated correspond to the different display mode of the target object；Animation is carried out according to the target animation Show Styles to the target object on the target webpage to show.By technical scheme, the interaction between user and web interface can be realized, improve user experience, and reduce exploitation code amount.
Description
Technical field
The present invention relates to human-computer interaction technology more particularly to a kind of web-based cartoon display method, device, equipment and
Storage medium.
Background technology
With the continuous development of human-computer interaction technology, requirement of the people to web interface is higher and higher, is not intended merely to page energy
It enough moves up, and can even be carried out with people interactive.
At present, mainly used using fixed animation Show Styles in webpage, and at different interfaces very in traditional technology
On to same interface, some common animation effects can be reused, such as becomes larger, reduce, occur, disappear, move to left, move to right
Deng.Therefore, the prior art does not simply fail to realize that user carries out interaction with web interface, and poor user experience also results in developer and exists
Size of code increases when doing web interface exploitation.
The content of the invention
The embodiment of the present invention provides a kind of web-based cartoon display method, device, equipment and storage medium, to realize
Interaction between user and web interface improves user experience, and reduces exploitation code amount.
In a first aspect, an embodiment of the present invention provides a kind of web-based cartoon display method, including：
According to the animation operation information for the target object in target webpage detected, obtain and the animation operation
The animation display parameters of information matches；
According to the matched at least one encapsulation animation of the animation display parameters, generate target animation Show Styles, institute
It states target webpage and is matched with default encapsulation animation collection, the different encapsulation animations that the encapsulation animation is concentrated correspond to the target pair
As different display modes；
Animation is carried out according to the target animation Show Styles to the target object on the target webpage to show.
Further, the basis and the matched at least one encapsulation animation of the animation display parameters, generation target are moved
Show Styles is drawn, including：
According to matched with the animation display parameters at least two encapsulation animations and with the animation display parameters
The encapsulation animations mode matched somebody with somebody generates target animation Show Styles.
Further, the animation operation information includes text entry information；
Correspondingly, the acquisition and the animation display parameters of the animation operation information matches, including：
According to the text entry information inputted for target object detected in target webpage, generation text control is aobvious
Show parameter instruction；
Receive the animation display parameters that the text control display parameters instructions match obtains.
Further, the animation display parameters include display time, display action and display interval；
Correspondingly, the basis it is matched with the animation display parameters at least two encapsulation animation and with the animation
The matched encapsulation animations mode of display parameters, generates target animation Show Styles, including：
In the display time range, it is spaced, calls and the display action matched at least two according to the display
A encapsulation animation generates target animation Show Styles.
Further, the animation operation information includes mobile gesture information；
Correspondingly, the animation operation information for the target object in target webpage that the basis detects, obtain with
The animation display parameters of the animation operation information matches, including：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, adopt
Collect the corresponding mobile gesture information of the operating gesture；
According to the mobile gesture information generation gesture control display parameters instruction；
Receive the animation display parameters that the gesture control display parameters instructions match obtains.
Further, the animation display parameters include display action；
Correspondingly, the basis it is matched with the animation display parameters at least two encapsulation animation and with the animation
The matched encapsulation animations mode of display parameters, generates target animation Show Styles, including：
In default display time range, it is spaced, calls and the display action matched at least two according to default display
A encapsulation animation generates target animation Show Styles.
Further, the animation operation information includes screen sliding track information；The animation display parameters include screen sliding rail
Mark coordinate；
Correspondingly, the basis and the matched at least one encapsulation animation of the animation display parameters generate target animation
Show Styles, including：
It is moved towards according to the position of the screen sliding track coordinate, calls move towards corresponding at least one envelope with the position successively
Animation is filled, generates target animation Show Styles.
Further, the method for calling of the encapsulation animation includes：In CSS files associated with the target webpage or JS
The corresponding title of the encapsulation animation is quoted in file；
Wherein, in the associated React item files of the target webpage, it is previously-introduced it is described encapsulation animation collection.
Further, the corresponding display mode of the encapsulation animation includes：The display mode of color, the display side of scaling
Formula, the display mode of displacement, the display mode of rotation, the display mode occurred, the display mode to disappear and the display of flicker
At least one of mode.
Second aspect, the embodiment of the present invention additionally provide a kind of web-based animation display device, which includes：
Parameter acquisition module, for according to the animation operation letter in the target object being directed in target webpage detected
Breath obtains the animation display parameters with the animation operation information matches；
Pattern generation module for basis and the matched at least one encapsulation animation of the animation display parameters, generates mesh
Animation Show Styles is marked, the target webpage is matched with default encapsulation animation collection, the different encapsulation that the encapsulation animation is concentrated
Animation corresponds to the different display mode of the target object；
Animation display module, for according to the target animation Show Styles on the target webpage to the target pair
It is shown as carrying out animation.
Further, the pattern generation module includes：
Generate submodule, for according to matched with the animation display parameters at least two encapsulate animations and with it is described
The matched encapsulation animations mode of animation display parameters, generates target animation Show Styles.
Further, the animation operation information includes text entry information；
Correspondingly, the parameter acquisition module is specifically used for：
According to the text entry information inputted for target object detected in target webpage, generation text control is aobvious
Show parameter instruction；
Receive the animation display parameters that the text control display parameters instructions match obtains.
Further, the animation display parameters include display time, display action and display interval；
Correspondingly, the generation submodule is specifically used for：
In the display time range, it is spaced, calls and the display action matched at least two according to the display
A encapsulation animation generates target animation Show Styles.
Further, the animation operation information includes mobile gesture information；
Correspondingly, the parameter acquisition module is specifically used for：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, adopt
Collect the corresponding mobile gesture information of the operating gesture；
According to the mobile gesture information generation gesture control display parameters instruction；
Receive the animation display parameters that the gesture control display parameters instructions match obtains.
Further, the animation display parameters include display action；
Correspondingly, the generation submodule is specifically used for：
In default display time range, it is spaced, calls and the display action matched at least two according to default display
A encapsulation animation generates target animation Show Styles.
Further, the animation operation information includes screen sliding track information；The animation display parameters include screen sliding rail
Mark coordinate；
Correspondingly, the pattern generation module is specifically used for：
It is moved towards according to the position of the screen sliding track coordinate, calls move towards corresponding at least one envelope with the position successively
Animation is filled, generates target animation Show Styles.
Further, the method for calling of the encapsulation animation includes：In CSS files associated with the target webpage or JS
The corresponding title of the encapsulation animation is quoted in file；
Wherein, in the associated React item files of the target webpage, it is previously-introduced it is described encapsulation animation collection.
The third aspect, the embodiment of the present invention additionally provide a kind of computer equipment, which includes：
One or more processors；
Memory, for storing one or more programs；
When one or more of programs are performed by one or more of processors so that one or more of processing
Device realizes the web-based cartoon display method as described in any in the embodiment of the present invention.
Fourth aspect, the embodiment of the present invention additionally provide a kind of computer readable storage medium, are stored thereon with computer
Program realizes the web-based animation display side as described in any in the embodiment of the present invention when program is executed by processor
Method.
The embodiment of the present invention is by obtaining the animation operation information for the target object in target webpage with detecting
The animation display parameters to match, and show sample according to the matched at least one encapsulation animation producing target animation of the parameter
Formula, and then animation is carried out to the target object on target webpage according to the target animation Show Styles and is shown, it make use of encapsulation dynamic
The advantages of picture is easy to build, call and reconfigure is solved and is shown and caused using fixed web animation in the prior art
Poor user experience, and the problem of increase exploitation code amount caused by the animation effect repeated, realize user and web interface it
Between interaction, improve user experience, and reduce the effect of exploitation code amount.
Description of the drawings
Fig. 1 is a kind of flow diagram for web-based cartoon display method that the embodiment of the present invention one provides；
Fig. 2 is a kind of flow diagram of web-based cartoon display method provided by Embodiment 2 of the present invention；
Fig. 3 is a kind of structure diagram for web-based animation display device that the embodiment of the present invention three provides；
Fig. 4 is a kind of structure diagram for computer equipment that the embodiment of the present invention four provides.
Specific embodiment
The present invention is described in further detail with reference to the accompanying drawings and examples.It is understood that this place is retouched
The specific embodiment stated is used only for explaining the present invention rather than limitation of the invention.It also should be noted that in order to just
Part related to the present invention rather than entire infrastructure are illustrated only in description, attached drawing.
Embodiment one
Fig. 1 is a kind of flow diagram for web-based cartoon display method that the embodiment of the present invention one provides.The party
Method is applicable to make and shows the situation of web animation, and this method can be performed by web-based animation display device,
The device can be made of hardware and/or software, and can generally be integrated in computer and all comprising web animation display function
Terminal in.It specifically includes as follows：
S110, grasped according to the animation operation information for the target object in target webpage detected, acquisition and animation
Make the animation display parameters of information matches.
Optionally, target object can need to carry out the display main body that shows of animation in target webpage, in target webpage
Target object can be default setting or be set in real time according to the selection of user, be not limited thereto.Animation
Operation information can be the information that the cartoon display operations carried out for the target object in target webpage are generated, wherein, it should
Cartoon display operations include but not limited to screen sliding operation, text entry operation, gesture moving operation etc..
Illustratively, can pre-set a matched data table on server or terminal, record animation operation information with
Matching relationship between animation display parameters when needing to obtain animation display parameters, can be obtained by inquiring about the matched data table
Take the animation display parameters with the animation operation information match.Optionally, between animation operation information and animation display parameters
Can be one-to-one relation or one-to-many relation.The purpose for obtaining animation display parameters is, animation is grasped
The control parameter shown to animation is converted to as information, is shown with carrying out corresponding animation according to the animation display parameters.
S120, basis and the matched at least one encapsulation animation of animation display parameters, generate target animation Show Styles, mesh
Mark webpage is matched with default encapsulation animation collection, and the different encapsulation animations that encapsulation animation is concentrated correspond to the different display of target object
Mode.
Wherein, the information at least one encapsulation animation of the match parameters can be included in animation display parameters, it is optional
, target animation Show Styles can be combined by least one encapsulation animation according to particular order, specifically, generation is different dynamic
Drawing encapsulation animation used in Show Styles can differ, and each encapsulation animation may correspond to the different display side of target object
Formula, thus, the display mode of different animation Show Styles can differ, and the mode of being particularly shown can be true according to the encapsulation animation of composition
It is fixed.
Optionally, target webpage is matched with default encapsulation animation collection in advance, which can be pre-configured in far
It holds on server, can also be pre-configured on the local computer, be not limited thereto.Encapsulation animation concentration can include multiple correspondences
In the different encapsulation animations of different display modes, wherein, it can be mutual indepedent between encapsulation animation, it mutually nested can also call,
If encapsulation animation collection shows that demand is had any different with actual animation, the encapsulation animation that encapsulation animation is concentrated can also directly be carried out
Modification concentrates newly-built encapsulation animation in encapsulation animation, to be directly called when needed.Illustratively, seal
Dress animation can be established by animation.css files and is encapsulated in an animation collection, and developer only needs to change the encapsulation
The code in encapsulation animation in animation collection, you can it completes to be modified the animation display mode for using the encapsulation animation, and
Without showing that code is modified respectively to the animation in each webpage, so as to reduce animation exploitation code amount.
At least one encapsulation animation producing target animation Show Styles matched by the animation display parameters of acquisition
It is advantageous in that, as long as extracting corresponding animation display parameters from the animation operation that user carries out, you can automatically generate corresponding
Target animation Show Styles, it is achieved thereby that the interaction between user and web interface, improves user experience.
Preferably, animation operation information includes screen sliding track information；Animation display parameters include screen sliding track coordinate；
Correspondingly, according to the matched at least one encapsulation animation of animation display parameters, generate target animation Show Styles,
Including：
It is moved towards according to the position of screen sliding track coordinate, calls move towards corresponding at least one encapsulation animation with position successively,
Generate target animation Show Styles.Wherein, screen sliding track can be touch trajectory or mouse pair of the finger for touch screen
In the click track of screen.
Illustratively, for the terminal with touch-screen, user is directed to the animation of the target object progress in target webpage
Operation can be screen sliding operation.Screen sliding track information is included according to the animation operation information that screen sliding operation generates, from what is detected
The animation display parameters obtained in screen sliding track information include each sampled point in corresponding screen sliding track coordinate namely screen sliding path
Corresponding position coordinates.
After a series of screen sliding track coordinates are got, it can be moved towards according to a series of position of this screen sliding track coordinate, according to
Secondary calling with the position moves towards corresponding at least one encapsulation animation, for example, when next coordinate in trajectory coordinates is compared with ought
It is to left movement for preceding coordinate, then calls displacement wrapper, control targe object is moved to the left in target webpage；Work as rail
Next coordinate in mark coordinate is upper direction to the right for changing coordinates, then calls displacement wrapper, controls mesh
Mark object moves right and up in target webpage, and so on.
Preferably, encapsulating the corresponding display mode of animation includes：The display mode of color, the display mode of scaling, displacement
Display mode, rotation display mode, occur display mode, disappear display mode and flicker display mode in
It is at least one.
Optionally, different display modes can by the way that different encapsulation animations is called to show, illustratively, color
Display mode may include thin out, intensification, change color etc.；The display mode of scaling may include to reduce, amplify and (amplify and may include
Broadening, elongation, whole amplification etc.) etc.；The display mode of displacement may include upward, downward, to the left, to the right etc.；The display of rotation
Mode may include rotation 45 °, 90 °, 180 °, rotate clockwise, counterclockwise rotation etc.；The display mode of appearance may include band scaling
Appearance, with rotation appearance, the appearance with displacement, it is colored occur etc.；The display mode of disappearance may include with scaling
Disappearance, the disappearance with rotation, the disappearance with displacement, colored disappearance etc.；The display mode of flicker may include seven color colors
Variation flicker, not much, if any variation flicker etc..The above simply citing rather than restriction to various display modes, certainly, often
Kind display mode may also include other display effects, can also delete some effects therein, details are not described herein.Specifically,
It can be by the display effect of calling parameter different in animation package to show different.
S130, target object progress animation is shown on target webpage according to target animation Show Styles.
Optionally, after target animation Show Styles generates, corresponding animation code can be being automatically generated from the background, it is exemplary
, web interface is developed using React, when target animation Show Styles generates namely when web page code changes,
React will update the data the part that changes in management of user's interface interface automatically, and be shown accordingly, therefore, when dynamic
When drawing when Show Styles changes or adding target animation Show Styles, phase can be carried out to target object on target webpage
The animation answered is shown.
The technical solution of the present embodiment is grasped by obtaining with the animation for the target object in target webpage detected
Make the animation display parameters of information match, and shown according to the matched at least one encapsulation animation producing target animation of the parameter
Sample formula, and then animation is carried out to the target object on target webpage according to the target animation Show Styles and is shown, it make use of envelope
Dress animation the advantages of being easy to build, call and reconfigure, solve shown in the prior art using fixed web animation and
Caused poor user experience, and caused by the animation effect repeated user and web circle are realized the problem of increase exploitation code amount
Interaction between face improves user experience, and reduces the effect of exploitation code amount.
Embodiment two
Fig. 2 is a kind of flow diagram of web-based cartoon display method provided by Embodiment 2 of the present invention.This reality
It applies example to optimize based on above-described embodiment, provides the cartoon display method for being preferably based on webpage, be specifically, by root
According to the matched at least one encapsulation animation of animation display parameters, generation target animation Show Styles be further optimized for, including：
According to matched with animation display parameters at least two encapsulation animations and with the matched encapsulation animations of animation display parameters
Mode generates target animation Show Styles.It specifically includes as follows：
S210, grasped according to the animation operation information for the target object in target webpage detected, acquisition and animation
Make the animation display parameters of information matches.
S220, animations and matched with animation display parameters are encapsulated according to matched with animation display parameters at least two
Animations mode is encapsulated, generates target animation Show Styles, target webpage is matched with default encapsulation animation collection, encapsulates animation
The different encapsulation animations of concentration correspond to the different display mode of target object.
Optionally, the combined information between the matched encapsulation animation of the parameter can be also included in animation display parameters, it should
The corresponding encapsulation animations mode of combined information can characterize the display relation between multiple encapsulation animations, such as two encapsulation are moved
Sequencing, display interval between picture etc..Illustratively, if the animation display parameters obtained are matched with corresponding encapsulation animation
Combination then can encapsulate animation and the encapsulation animations mode according to the animation display parameters matched at least two,
Target animation Show Styles is generated, specifically, can be by matched at least two encapsulation animations according to the encapsulation animations mode
It is combined, to generate corresponding target animation Show Styles.
According to the combination side between the matched at least two encapsulation animation of the animation display parameters of acquisition and encapsulation animation
Formula, generation target animation Show Styles is advantageous in that, the animation effect in webpage can be appointed according to the selection of user
Meaning collocation, has been better achieved the interaction between user and web interface, has improved user experience.
In a concrete instance, it is preferred that animation operation information includes text entry information；
Correspondingly, according to the animation operation information for the target object in target webpage detected, acquisition and animation
The matched animation display parameters of operation information, including：
According to the text entry information inputted for target object detected in target webpage, generation text control is aobvious
Show parameter instruction；
Receive the animation display parameters that text control display parameters instructions match obtains.
Illustratively, when user is text entry operation for the animation operation of the target object in target webpage, then
It can detect the text entry information for inputting operation according to the text and generating.Corresponding text can be generated by inputting information according to the text
This control display parameters instruct, for example, the text message of input is " rotated out of in 2s now, be spaced 1s, reduced and disappear ", then it can root
The text information content and class of operation (i.e. text class) text control display ginseng are carried according to text input information generation
Number instruction.Optionally, if being performed to the identification process of content of text in far-end server, the text is controlled and is shown
Parameter instruction is sent to far-end server and carries out text identification, and matches corresponding animation display parameters according to recognition result, into
And it is sent to the display terminal where target webpage.
Preferably, animation display parameters include display time, display action and display interval；
Correspondingly, matched according to matched with animation display parameters at least two encapsulation animations and with animation display parameters
Encapsulation animations mode, generate target animation Show Styles, including：
It in display time range, is spaced according to display, calls at least two encapsulation animation matched with display action, it is raw
Into target animation Show Styles.
Illustratively, when animation operation information is text entry information, the corresponding animation display parameters obtained may include
Show time, display action and display interval, as above " rotated out of in 2s now, be spaced 1s, reduced and disappear " described in example is corresponding
The obtained animation display parameters of text control display parameters instructions match, can be the display time be 2s, display action is first
Rotation occurs reducing disappearance again, shows at intervals of 1s.Optionally, if not including any of which parameter in text identification result,
It can be replaced with the parameter of acquiescence.For example, the target object in target webpage is scenery picture, if the animation received is shown
The time is shown in parameter as 3s, display action is the appearance that band rotates and the disappearance with scaling, is shown at intervals of 1s, then target network
Page where terminal can by the scenery picture in 3s, first call with band rotation appearance display effect " appearance move
Draw wrapper ", after being spaced 1s, recall " the animation package bag of disappearance " with the display effect with the disappearance reduced, and
Backstage generates corresponding animation and shows code, forms target animation Show Styles.
In another concrete instance, it is preferred that animation operation information includes mobile gesture information；
Correspondingly, according to the animation operation information for the target object in target webpage detected, acquisition and animation
The matched animation display parameters of operation information, including：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, adopt
Collect the corresponding mobile gesture information of operating gesture；
The instruction of gesture control display parameters is generated according to mobile gesture information；
Receive the animation display parameters that gesture control display parameters instructions match obtains.
Illustratively, when user is gesture moving operation for the animation operation of the target object in target webpage, then
It can detect the mobile gesture information generated according to the gesture moving operation.Optionally, can be gathered by the camera in terminal
The video pictures or continuous shooting image of user's hand position obtain the mobile gesture information of user.Specifically, according to the movement hand
Gesture information can generate corresponding gesture control display parameters instruction, for example, what the gesture operation of user was gathered again for the five fingers opening
Operation, the mobile gesture information detected can correspond to the picture frame group that the five fingers opening gathers process again, then can be according to the image
The generation of frame group carries the gesture control display parameters instruction of the picture frame group and class of operation (i.e. gesture class).Optionally,
If being performed to the identification process of picture frame group content in far-end server, which is instructed and is sent out
It send to far-end server and carries out image identification, and corresponding animation display parameters are matched according to recognition result, and then be sent to mesh
The display terminal where webpage is marked, as above the five fingers opening described in example gathers the corresponding gesture control display parameters instruction of process again
Obtained animation display parameters are matched, can be that amplification occurs and reduce to disappear.
Preferably, animation display parameters include display action；
Correspondingly, matched according to matched with animation display parameters at least two encapsulation animations and with animation display parameters
Encapsulation animations mode, generate target animation Show Styles, including：
In default display time range, it is spaced, calls and matched at least two envelope of display action according to default display
Animation is filled, generates target animation Show Styles.
Illustratively, when animation operation information is mobile gesture information, the corresponding animation display parameters obtained may include
Display action.For example, the target object in target webpage is personage's picture, if display action in the animation display parameters received
Occur and reduce to disappear for amplification, then the terminal where target webpage, which can first call personage's picture, has what is with amplification occurred
" the animation package bag of appearance " of display effect after being spaced default time (presetting display interval), is recalled with diminution
" the animation package bag of disappearance " of the display effect of disappearance, and show code generating corresponding animation from the background, it forms target and moves
Draw Show Styles.
S230, target object progress animation is shown on target webpage according to target animation Show Styles.
The technical solution of the present embodiment, by according to the animation operation for the target object in target webpage detected
Information, obtain with the animation display parameters of animation operation information matches, and according to the animation display parameters matched at least two
A encapsulation animation and the matched encapsulation animations mode of animation display parameters, generate target animation Show Styles, according to this
Pattern carries out animation to target object on target webpage and shows.By the selection according to user to arbitrary between encapsulation animation
Collocation, the variation and personalized animation for highlighting web interface are shown, have been better achieved mutual between user and web interface
It is dynamic, user experience is improved, meanwhile, encapsulate using so that when replacing animation display for animation, it is only necessary to which user makes other operations
, code is rewritten without developer, so as to decrease exploitation code amount.
On the basis of various embodiments above, it is preferred that encapsulating the method for calling of animation includes：It is associated with target webpage
CSS files or JS files in quote the corresponding title of encapsulation animation；
Wherein, in the associated React item files of target webpage, it is previously-introduced encapsulation animation collection.
Optionally, React exploitation web interfaces can be used, specifically, web page code can be programmed in CSS files or JS texts
It is corresponding in part, it can be dynamic by quoting encapsulation in the CSS files of existing (or newly-built) associated with target webpage or JS files
Corresponding title is drawn to call corresponding encapsulation animation.Illustratively, it is necessary to will entirely encapsulate before each encapsulation animation is called
Animation collection it is previously-introduced to in the associated React item files of target webpage, specific way of reference for example can be new
In the React files built, animation.css files are introduced using import ' ./animation ', wherein, encapsulation animation can
It is established and is encapsulated in an animation collection by animation.css files.
Embodiment three
Fig. 3 is a kind of structure diagram for web-based animation display device that the embodiment of the present invention three provides.With reference to
Fig. 3, web-based animation display device include：Parameter acquisition module 310, pattern generation module 320 and animation show mould
Block 330 is below specifically described each module.
Parameter acquisition module 310, for according to the animation operation in the target object being directed in target webpage detected
Information obtains the animation display parameters with animation operation information matches；
Pattern generation module 320 for basis and the matched at least one encapsulation animation of animation display parameters, generates target
Animation Show Styles, target webpage are matched with default encapsulation animation collection, and the different encapsulation animations that encapsulation animation is concentrated correspond to mesh
Mark the different display mode of object；
Animation display module 330, for according to target animation Show Styles on target webpage to target object into action
Draw display.
Web-based animation display device provided in this embodiment, by obtaining with detecting in target webpage
Target object animation operation information match animation display parameters, and according to the matched at least one encapsulation of the parameter
Animation producing target animation Show Styles, and then the target object on target webpage is carried out according to the target animation Show Styles
The advantages of animation shows, encapsulation animation make use of to be easy to build, call and reconfigure is solved in the prior art using fixation
Web animation show caused by poor user experience, and repeat animation effect caused by increase exploitation code amount the problem of,
The interaction between user and web interface is realized, user experience is improved, and reduces the effect of exploitation code amount.
Optionally, pattern generation module 320 includes：
Submodule is generated, for encapsulating animation according to matched with animation display parameters at least two and being shown with animation
The matched encapsulation animations mode of parameter, generates target animation Show Styles.
Optionally, animation operation information includes text entry information；
Correspondingly, parameter acquisition module 310 is specifically used for：
According to the text entry information inputted for target object detected in target webpage, generation text control is aobvious
Show parameter instruction；
Receive the animation display parameters that text control display parameters instructions match obtains.
Optionally, animation display parameters include display time, display action and display interval；
Correspondingly, generation submodule is specifically used for：
It in display time range, is spaced according to display, calls at least two encapsulation animation matched with display action, it is raw
Into target animation Show Styles.
Optionally, animation operation information includes mobile gesture information；
Correspondingly, parameter acquisition module 310 is specifically used for：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, adopt
Collect the corresponding mobile gesture information of operating gesture；
The instruction of gesture control display parameters is generated according to mobile gesture information；
Receive the animation display parameters that gesture control display parameters instructions match obtains.
Optionally, animation display parameters include display action；
Correspondingly, generation submodule is specifically used for：
In default display time range, it is spaced, calls and matched at least two envelope of display action according to default display
Animation is filled, generates target animation Show Styles.
Optionally, animation operation information includes screen sliding track information；Animation display parameters include screen sliding track coordinate；
Correspondingly, pattern generation module 320 is specifically used for：
It is moved towards according to the position of screen sliding track coordinate, calls move towards corresponding at least one encapsulation animation with position successively,
Generate target animation Show Styles.
Optionally, encapsulating the method for calling of animation includes：It is quoted in CSS files associated with target webpage or JS files
Encapsulate the corresponding title of animation；
Wherein, in the associated React item files of target webpage, it is previously-introduced encapsulation animation collection.
Optionally, encapsulating the corresponding display mode of animation includes：The display mode of color, the display mode of scaling, displacement
Display mode, rotation display mode, occur display mode, disappear display mode and flicker display mode in
It is at least one.
The said goods can perform the method that any embodiment of the present invention is provided, and possess the corresponding function module of execution method
And advantageous effect.
Example IV
Fig. 4 is a kind of structure diagram for computer equipment that the embodiment of the present invention four provides, as shown in figure 4, this implementation
A kind of computer equipment that example provides, including：Processor 41 and memory 42.Processor in the computer equipment can be one
A or multiple, in Fig. 4 by taking a processor 41 as an example, processor 41 and memory 42 in the computer equipment can pass through
Bus or other modes connect, in Fig. 4 exemplified by being connected by bus.
The web-based animation of above-described embodiment offer is provided in the processor 41 of the present embodiment Computer equipment
Display device.In addition, the memory 42 in the computer equipment is used as a kind of computer readable storage medium, available for storage one
A or multiple programs, described program can be software program, computer executable program and module, in the embodiment of the present invention
Corresponding program instruction/the module of web-based cartoon display method is (for example, attached web-based animation shown in Fig. 3 is shown
Module in device, including：Parameter acquisition module 310, pattern generation module 320 and animation display module 330).Processor
41 are stored in software program, instruction and module in memory 42 by operation, so as to perform the various function application of equipment
And data processing, that is, realize web-based cartoon display method in above method embodiment.
Memory 42 may include storing program area and storage data field, wherein, storing program area can storage program area, extremely
Application program needed for a few function；Storage data field can be stored uses created data etc. according to equipment.In addition, it deposits
Reservoir 42 can include high-speed random access memory, can also include nonvolatile memory, and a for example, at least disk is deposited
Memory device, flush memory device or other non-volatile solid state memory parts.In some instances, memory 42 can further comprise
Compared with the remotely located memory of processor 41, these remote memories can pass through network connection to equipment.Above-mentioned network
Example include but not limited to internet, intranet, LAN, mobile radio communication and combinations thereof.
Also, when one or more program included by above computer equipment is by one or more of processors 41
During execution, program proceeds as follows：
According to the animation operation information for the target object in target webpage detected, obtain and animation operation information
Matched animation display parameters；According to the matched at least one encapsulation animation of animation display parameters, generation target animation show
Pattern, target webpage are matched with default encapsulation animation collection, and the different encapsulation animations that encapsulation animation is concentrated correspond to target object not
Same display mode；Animation is carried out according to target animation Show Styles to target object on target webpage to show.
Embodiment five
The embodiment of the present invention five additionally provides a kind of computer readable storage medium, is stored thereon with computer program, should
Realize that the web-based animation provided such as the embodiment of the present invention one is shown when program is performed by web-based animation display device
Show method, this method includes：According to the animation operation information for the target object in target webpage detected, obtain and dynamic
Draw the matched animation display parameters of operation information；According to the matched at least one encapsulation animation of animation display parameters, generate mesh
Animation Show Styles is marked, target webpage is matched with default encapsulation animation collection, and the different encapsulation animations that encapsulation animation is concentrated correspond to
The different display mode of target object；Animation is carried out according to target animation Show Styles to target object on target webpage to show
Show.
Certainly, a kind of computer readable storage medium that the embodiment of the present invention is provided, the computer program stored thereon
Be performed and be not limited to realize method operation as described above, can also realize that any embodiment of the present invention provided based on net
Relevant operation in the cartoon display method of page.
By the description above with respect to embodiment, it is apparent to those skilled in the art that, the present invention
It can be realized by software and required common hardware, naturally it is also possible to which by hardware realization, but the former is more in many cases
Good embodiment.Based on such understanding, what technical scheme substantially in other words contributed to the prior art
Part can be embodied in the form of software product, which can be stored in computer readable storage medium
In, floppy disk, read-only memory (Read-Only Memory, ROM), random access memory (Random such as computer
Access Memory, RAM), flash memory (FLASH), hard disk or CD etc., including some instructions with so that a computer is set
Standby (can be personal computer, server or the network equipment etc.) performs the method described in each embodiment of the present invention.
It is worth noting that, in the embodiment of above-mentioned web-based animation display device, included unit and
Module is simply divided according to function logic, but is not limited to above-mentioned division, as long as corresponding function can be realized
；In addition, the specific name of each functional unit is also only to facilitate mutually distinguish, the protection being not intended to limit the invention
Scope.
Note that it above are only presently preferred embodiments of the present invention and institute's application technology principle.It will be appreciated by those skilled in the art that
The invention is not restricted to specific embodiment described here, can carry out for a person skilled in the art various apparent variations,
It readjusts and substitutes without departing from protection scope of the present invention.Therefore, although being carried out by above example to the present invention
It is described in further detail, but the present invention is not limited only to above example, without departing from the inventive concept, also
It can include other more equivalent embodiments, and the scope of the present invention is determined by scope of the appended claims.
Claims (19)
1. a kind of web-based cartoon display method, which is characterized in that including：
According to the animation operation information for the target object in target webpage detected, obtain and the animation operation information
Matched animation display parameters；
According to the matched at least one encapsulation animation of the animation display parameters, generate target animation Show Styles, the mesh
Mark webpage is matched with default encapsulation animation collection, and the different encapsulation animations that the encapsulation animation is concentrated correspond to the target object not
Same display mode；
Animation is carried out according to the target animation Show Styles to the target object on the target webpage to show.
2. according to the method described in claim 1, it is characterized in that, the basis and the animation display parameters are matched at least
One encapsulation animation, generates target animation Show Styles, including：
According to matched with the animation display parameters at least two encapsulation animations and matched with the animation display parameters
Animations mode is encapsulated, generates target animation Show Styles.
3. according to the method described in claim 2, it is characterized in that, the animation operation information includes text entry information；
Correspondingly, the animation operation information for the target object in target webpage that the basis detects, obtain with it is described
The animation display parameters of animation operation information matches, including：
According to the text entry information inputted for target object detected in target webpage, generation text control display ginseng
Number instruction；
Receive the animation display parameters that the text control display parameters instructions match obtains.
4. according to the method described in claim 3, it is characterized in that, the animation display parameters include the display time, display is moved
Make and display is spaced；
Correspondingly, the basis matched with the animation display parameters at least two encapsulates animation and is shown with the animation
The matched encapsulation animations mode of parameter, generates target animation Show Styles, including：
In the display time range, it is spaced, calls and matched at least two envelope of the display action according to the display
Animation is filled, generates target animation Show Styles.
5. according to the method described in claim 2, it is characterized in that, the animation operation information includes mobile gesture information；
Correspondingly, the animation operation information for the target object in target webpage that the basis detects, obtain with it is described
The animation display parameters of animation operation information matches, including：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, institute is gathered
State the corresponding mobile gesture information of operating gesture；
According to the mobile gesture information generation gesture control display parameters instruction；
Receive the animation display parameters that the gesture control display parameters instructions match obtains.
6. according to the method described in claim 5, it is characterized in that, the animation display parameters include display action；
Correspondingly, the basis matched with the animation display parameters at least two encapsulates animation and is shown with the animation
The matched encapsulation animations mode of parameter, generates target animation Show Styles, including：
In default display time range, it is spaced, calls and matched at least two envelope of the display action according to default display
Animation is filled, generates target animation Show Styles.
7. according to the method described in claim 1, it is characterized in that, the animation operation information includes screen sliding track information；Institute
Stating animation display parameters includes screen sliding track coordinate；
Correspondingly, the basis and the matched at least one encapsulation animation of the animation display parameters, generation target animation are shown
Pattern, including：
According to the position of the screen sliding track coordinate move towards, successively call with the position move towards it is corresponding it is at least one encapsulation move
It draws, generates target animation Show Styles.
8. according to the method described in claim 4,6 or 7, which is characterized in that the method for calling of the encapsulation animation includes：With
The corresponding title of the encapsulation animation is quoted in the associated CSS files of the target webpage or JS files；
Wherein, in the associated React item files of the target webpage, it is previously-introduced it is described encapsulation animation collection.
9. according to the described method of any one of claim 1-7, which is characterized in that described to encapsulate the corresponding display mode of animation
Including：The display mode of color, the display mode of scaling, the display mode of displacement, the display mode of rotation, the display side occurred
At least one of display mode of formula, the display mode to disappear and flicker.
10. a kind of web-based animation display device, which is characterized in that including：
Parameter acquisition module, for according to the animation operation information in the target object being directed in target webpage detected, obtaining
Take the animation display parameters with the animation operation information matches；
Pattern generation module, for basis and the matched at least one encapsulation animation of the animation display parameters, generation target is moved
Show Styles is drawn, the target webpage is matched with default encapsulation animation collection, the different encapsulation animations that the encapsulation animation is concentrated
The different display mode of the corresponding target object；
Animation display module, for according to the target animation Show Styles on the target webpage to the target object into
Action picture is shown.
11. device according to claim 10, which is characterized in that the pattern generation module includes：
Generate submodule, for according to matched with the animation display parameters at least two encapsulate animations and with the animation
The matched encapsulation animations mode of display parameters, generates target animation Show Styles.
12. according to the devices described in claim 11, which is characterized in that the animation operation information includes text entry information；
Correspondingly, the parameter acquisition module is specifically used for：
According to the text entry information inputted for target object detected in target webpage, generation text control display ginseng
Number instruction；
Receive the animation display parameters that the text control display parameters instructions match obtains.
13. device according to claim 12, which is characterized in that the animation display parameters include display time, display
Action and display interval；
Correspondingly, the generation submodule is specifically used for：
In the display time range, it is spaced, calls and matched at least two envelope of the display action according to the display
Animation is filled, generates target animation Show Styles.
14. according to the devices described in claim 11, which is characterized in that the animation operation information includes mobile gesture information；
Correspondingly, the parameter acquisition module is specifically used for：
If detecting the operating gesture for the target object in the target webpage chosen by video capture device, institute is gathered
State the corresponding mobile gesture information of operating gesture；
According to the mobile gesture information generation gesture control display parameters instruction；
Receive the animation display parameters that the gesture control display parameters instructions match obtains.
15. device according to claim 14, which is characterized in that the animation display parameters include display action；
Correspondingly, the generation submodule is specifically used for：
In default display time range, it is spaced, calls and matched at least two envelope of the display action according to default display
Animation is filled, generates target animation Show Styles.
16. device according to claim 10, which is characterized in that the animation operation information includes screen sliding track information；
The animation display parameters include screen sliding track coordinate；
Correspondingly, the pattern generation module is specifically used for：
According to the position of the screen sliding track coordinate move towards, successively call with the position move towards it is corresponding it is at least one encapsulation move
It draws, generates target animation Show Styles.
17. according to the method described in claim 13,15 or 16, which is characterized in that the method for calling of the encapsulation animation includes：
The corresponding title of the encapsulation animation is quoted in CSS files associated with the target webpage or JS files；
Wherein, in the associated React item files of the target webpage, it is previously-introduced it is described encapsulation animation collection.
18. a kind of computer equipment, which is characterized in that the equipment includes：
One or more processors；
Memory, for storing one or more programs；
When one or more of programs are performed by one or more of processors so that one or more of processors are real
The now web-based cartoon display method as described in any in claim 1-9.
19. a kind of computer readable storage medium, is stored thereon with computer program, which is characterized in that the program is by processor
The web-based cartoon display method as described in any in claim 1-9 is realized during execution.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711346199.3A CN108090176A (en) | 2017-12-15 | 2017-12-15 | Web-based cartoon display method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201711346199.3A CN108090176A (en) | 2017-12-15 | 2017-12-15 | Web-based cartoon display method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108090176A true CN108090176A (en) | 2018-05-29 |
Family
ID=62176356
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201711346199.3A Pending CN108090176A (en) | 2017-12-15 | 2017-12-15 | Web-based cartoon display method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108090176A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109669751A (en) * | 2018-12-14 | 2019-04-23 | Oppo广东移动通信有限公司 | A kind of method for drafting of input frame, device, terminal and computer storage medium |
| CN109741427A (en) * | 2018-12-14 | 2019-05-10 | 新华三大数据技术有限公司 | Animation data processing method, device, electronic equipment and storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1567383A (en) * | 2003-06-18 | 2005-01-19 | 财团法人工业技术研究院 | Method for three-dimensional animation production using literal script |
| CN101079153A (en) * | 2006-09-20 | 2007-11-28 | 腾讯科技（深圳）有限公司 | Method and system for quickly creating an animation |
| CN102662664A (en) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | Interface animation realization method and system |
| CN103092339A (en) * | 2012-12-13 | 2013-05-08 | 鸿富锦精密工业（深圳）有限公司 | Electronic device and page demonstration method |
| CN104992461A (en) * | 2015-06-29 | 2015-10-21 | 北京奇虎科技有限公司 | Fast animation scene construction method and device |
| CN106484384A (en) * | 2015-09-01 | 2017-03-08 | 天脉聚源（北京）科技有限公司 | A kind of page animation methods of exhibiting and system |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
-
2017
- 2017-12-15 CN CN201711346199.3A patent/CN108090176A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1567383A (en) * | 2003-06-18 | 2005-01-19 | 财团法人工业技术研究院 | Method for three-dimensional animation production using literal script |
| CN101079153A (en) * | 2006-09-20 | 2007-11-28 | 腾讯科技（深圳）有限公司 | Method and system for quickly creating an animation |
| CN102662664A (en) * | 2012-03-28 | 2012-09-12 | 奇智软件（北京）有限公司 | Interface animation realization method and system |
| CN103092339A (en) * | 2012-12-13 | 2013-05-08 | 鸿富锦精密工业（深圳）有限公司 | Electronic device and page demonstration method |
| CN104992461A (en) * | 2015-06-29 | 2015-10-21 | 北京奇虎科技有限公司 | Fast animation scene construction method and device |
| CN106484384A (en) * | 2015-09-01 | 2017-03-08 | 天脉聚源（北京）科技有限公司 | A kind of page animation methods of exhibiting and system |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109669751A (en) * | 2018-12-14 | 2019-04-23 | Oppo广东移动通信有限公司 | A kind of method for drafting of input frame, device, terminal and computer storage medium |
| CN109741427A (en) * | 2018-12-14 | 2019-05-10 | 新华三大数据技术有限公司 | Animation data processing method, device, electronic equipment and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US12094047B2 (en) | Animated emoticon generation method, computer-readable storage medium, and computer device | |
| US11301200B2 (en) | Method of providing annotation track on the content displayed on an interactive whiteboard, computing device and non-transitory readable storage medium | |
| US11741644B2 (en) | Vector graphics based live sketching metods and systems | |
| CN108924622B (en) | Video processing method and device, storage medium and electronic device | |
| CN102662664B (en) | Interface animation realization method and system | |
| CN107870716A (en) | The method and apparatus for calling background application | |
| CN103576848A (en) | Gesture operation method and gesture operation device | |
| CN102566983B (en) | Object based on Windows system pulls implementation method and system thereof | |
| CN111666007A (en) | Method and device for realizing mouse following special effect, computer equipment and storage medium | |
| CN111724407A (en) | Image processing method and related product | |
| CN108090176A (en) | Web-based cartoon display method, device, equipment and storage medium | |
| CN106354378B (en) | A kind of method and apparatus for quickly choosing multiple targets | |
| CN106155542A (en) | Image processing method and device | |
| CN104407865A (en) | Method and device for displaying window | |
| CN104932774B (en) | A kind of information processing method and electronic equipment | |
| CN109189301A (en) | Screen capture method and device | |
| CN115599363A (en) | Configuration method, device and system of visual component | |
| CN105791927A (en) | Smart television gesture control method and system | |
| CN109343770B (en) | Interactive feedback method, apparatus and recording medium | |
| CN110007838A (en) | Processing method, device and equipment for erasing control | |
| CN109521914A (en) | Restore the methods, devices and systems of data in file | |
| CN109743635B (en) | Comment reply method, device, equipment and storage medium | |
| CN115794089A (en) | Icon generation method and device, storage medium and electronic device | |
| CN104714720B (en) | To realize the method and client of itself scanning | |
| CN104516860A (en) | Methods and systems for selecting text within a displayed document |
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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180529 |