CN107451163B - Animation display method and device - Google Patents
Animation display method and device Download PDFInfo
- Publication number
- CN107451163B CN107451163B CN201610384292.2A CN201610384292A CN107451163B CN 107451163 B CN107451163 B CN 107451163B CN 201610384292 A CN201610384292 A CN 201610384292A CN 107451163 B CN107451163 B CN 107451163B
- Authority
- CN
- China
- Prior art keywords
- animation
- codes
- target browser
- supported
- style
- 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.)
- Active
Links
Images
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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/22—Procedural
Abstract
The application discloses an animation display method and device. One embodiment of the method comprises: receiving an animation display request sent by a target browser; analyzing the animation display request, and determining an original animation script file specified by the animation display request; judging whether the target browser supports cascading style sheet version 3CSS 3; responding to the CSS3 supported by the target browser, determining a CSS3 code description mode supported by the target browser, analyzing the original animation script, and generating a new animation script; and sending the new animation script to the target browser so that the target browser can display animation according to the new animation script. The embodiment solves the problem that different browsers can not compatibly display the animation according to one animation script file.
Description
Technical Field
The application relates to the technical field of computers, in particular to the technical field of internet, and particularly relates to an animation display method and device.
Background
With the development of internet technology, many web page developers display animation in web pages in order to make web pages more vivid and rich in content. When the webpage is manufactured, a CSS (Cascading Style Sheets) technology is adopted, so that the Style and the layout of the webpage can be effectively controlled. CSS3 (cascading style sheet version 3) is the most recent CSS standard today, and with CSS3, animation script files can be created.
At present, in an animation script file, when defining an animation, an attribute, a cycle duration and a start time percentage of an animation style need to be set. When a programmer adds or deletes a plurality of animation patterns, the programmer needs to calculate and change the starting time percentage and the cycle duration of other animation patterns; when the programmer changes the start time or the end time of a certain animation style, the programmer also needs to recalculate and change the start time percentage and the cycle duration of all animation styles after the animation style; different browsers support different description modes of CSS3 attributes, different animation script files need to be written for different browsers to enable animations to be displayed in different browsers, and different browsers cannot compatibly display animations according to the same animation script file.
Disclosure of Invention
The present application is directed to an animation display method and apparatus to solve the technical problems mentioned in the background above.
In a first aspect, the present application provides an animation display method, including: receiving an animation display request sent by a target browser; analyzing the animation display request, and determining an original animation script file specified by the animation display request; judging whether the target browser supports cascading style sheet version 3CSS 3; in response to the target browser supporting CSS3, determining CSS3 code description modes supported by the target browser, and performing the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script; and sending the new animation script to the target browser so that the target browser can display animation according to the new animation script.
In some embodiments, the identified code comprises: attribute codes, preset period duration and transition duration of animation styles, wherein the attribute codes, the preset period duration and the transition duration are not supported by the target browser, the period duration is equal to the time required by the animation to complete one period, and the transition duration of the animation styles is equal to the time required by the previous animation styles to transition to the current animation styles.
In some embodiments, the identifying the extracted codes and converting the identified codes into codes supported by the target browser according to the CSS3 code description supported by the target browser includes: identifying the extracted codes, and converting the identified attribute codes which are not supported by the target browser into the attribute codes which are supported by the target browser according to the CSS3 code description mode which is supported by the target browser; identifying the extracted codes, and converting the identified preset period duration into an actual period duration according to a CSS3 code description mode supported by the target browser; and identifying the extracted codes, and converting the identified animation style transition duration into the starting time percentage of the style according to the CSS3 code description mode supported by the target browser.
In some embodiments, an actual cycle duration is calculated, wherein the actual cycle duration is a sum of transition durations of the animation style.
In some embodiments, the animation display method further comprises: and dividing the start time of the animation style by the actual period time length multiplied by 100% to obtain the start time percentage of the animation style, wherein the start time of the animation style is equal to the sum of the transition time length of the animation style and the transition time length of the animation style before the animation style.
In a second aspect, the present application provides an animation display device, the device comprising: the receiving unit is used for receiving an animation display request sent by a target browser; the request analysis unit is used for analyzing the animation display request and determining an original animation script file specified by the animation display request; a judging unit, configured to judge whether the target browser supports CSS 3; a script parsing unit, responsive to the target browser supporting CSS3, configured to determine a CSS3 code description supported by the target browser, and perform the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script; and the sending unit is used for sending the new animation script to the target browser so that the target browser can display the animation according to the new animation script.
In some embodiments, the script parsing unit is configured to: and identifying attribute codes, preset period duration and transition duration of the animation style, wherein the attribute codes, the preset period duration and the transition duration of the animation style are not supported by the target browser, the period duration is equal to the time required by the animation to complete one period, and the transition duration of the animation style is equal to the time required by the previous animation style to transition to the current animation style.
In some embodiments, the script parsing unit is further configured to: identifying the extracted codes, and converting the identified attribute codes which are not supported by the target browser into the attribute codes which are supported by the target browser according to the CSS3 code description mode which is supported by the target browser; identifying the extracted codes, and converting the identified preset period duration into an actual period duration according to a CSS3 code description mode supported by the target browser; and identifying the extracted codes, and converting the identified animation style transition duration into the starting time percentage of the style according to the CSS3 code description mode supported by the target browser.
In some embodiments, the script parsing unit is further configured to: and calculating the actual period time length, wherein the actual period time length is the sum of the transition time lengths of the animation styles.
In some embodiments, the script parsing unit is further configured to: and dividing the start time of the animation style by the actual period time length multiplied by 100% to obtain the start time percentage of the animation style, wherein the start time of the animation style is equal to the sum of the transition time length of the animation style and the transition time length of the animation style before the animation style.
The animation display method and the device provided by the application can be used for receiving the animation display request sent by the user browser, then analyzing the animation display request, determining the original animation script file designated by the animation display request, judging whether the user browser supports the CSS3, if the user browser supports the CSS3, determining the CSS3 code description mode supported by the user browser, analyzing the codes in the original animation script file line by line, generating a new animation script supported by the user browser, and finally sending the new animation script to the user browser, wherein the user browser receives the new animation script and displays the animation according to the new animation script, so that the problem that different browsers can not compatibly display the animation according to one animation script is solved.
Drawings
Other features, objects and advantages of the present application will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings in which:
FIG. 1 is an exemplary system architecture diagram in which the present application may be applied;
FIG. 2 is a flow diagram of one embodiment of an animation display method according to the present application;
FIG. 3 is an exploded flow diagram of the parsing step in the flow diagram of FIG. 2;
FIG. 4 is a schematic diagram of an application scenario of an animation display method according to the application;
FIG. 5 is a schematic diagram of a structure of one embodiment of an animation display device according to the present application;
fig. 6 is a schematic structural diagram of a computer system suitable for implementing the terminal device or the server according to the embodiment of the present application.
Detailed Description
The present application will be described in further detail with reference to the following drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the relevant invention and not restrictive of the invention. It should be noted that, for convenience of description, only the portions related to the related invention are shown in the drawings.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
FIG. 1 illustrates an exemplary system architecture 100 to which embodiments of the animation display method or animation display apparatus of the present application may be applied.
As shown in fig. 1, the system architecture 100 may include terminal devices 101, 102, 103, a network 104, and a web server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few.
The user may use the terminal devices 101, 102, 103 to interact with the web server 105 through the network 104 to receive a web page or the like from the web server 105, wherein the web page includes, but is not limited to, animation information. For this purpose, the terminal devices 101, 102, 103 may be installed with various browsers, such as an IE browser ((Internet Explorer), a firefox browser, a google browser, etc.
The terminal devices 101, 102, 103 may be various electronic devices having a display screen and supporting installation of a browser, including but not limited to smart phones, tablet computers, laptop portable computers, desktop computers, and the like.
It should be noted that the animation display method provided in the embodiment of the present application is generally executed by the server 105, and accordingly, the animation display apparatus is generally disposed in the server 105.
It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.
With continued reference to FIG. 2, a flow 200 of one embodiment of an animation display method according to the present application is shown. The animation display method comprises the following steps:
In this embodiment, an electronic device (e.g., a server shown in fig. 1) on which the animation display method operates may receive the animation display request from the target browser through a wired connection or a wireless connection. As an example, the target browser may include different types of browsers, e.g., an IE browser, a fire fox browser, a google browser.
Typically, the target browser sends a web page display request, and the content in the web page includes, but is not limited to, CSS3 animation. Unlike an animation film played frame by frame, the CSS3 animation is an animation in which a style created by the CSS3 gradually changes, wherein the style may be a red background, a yellow background, or the like.
In this embodiment, the animation display request is based on the animation display request received in step 201, where the animation display request may be a web address, i.e. a web address, input in the browser by the user. In practice, the web address is generally represented by a Uniform Resource Locator (URL). The website has the location of the animation script file of the animation to be displayed, and the electronic device (e.g., the server shown in fig. 1) finds the original animation script file specified by the request according to the location of the animation script file.
In this embodiment, based on the received animation display request sent by the target browser in step 201, the electronic device analyzes the information of the target browser in the request, and determines whether the target browser supports CSS 3. If the target browser is an IE6 browser and the browser is judged not to support the CSS3, the electronic equipment can send prompt information which can not display animation to the IE6 of the target browser; if the target browser is the IE10 browser, the electronic device continues to step 204 after determining that the browser supports CSS 3.
In this embodiment, with further reference to fig. 3, fig. 3 is an exploded flowchart of the above step 204. In fig. 3, step 204 is specifically broken down into 4 sub-steps, namely: step 2041, step 2042, step 2043, and step 2044. Step 2041, in response to that the target browser supports CSS3, determining a CSS3 code description mode supported by the target browser; step 2042, extracting codes from the original animation script file line by line; step 2043, identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to the CSS3 code description mode supported by the target browser; step 2044, replace the corresponding code in the original animation script file with the converted code, generate a new animation script.
In the present embodiment, there are multiple CSS3 attributes in the original animation script, such as animation (animation) attributes and keyframe (keyframes) attributes. Different browsers support different description modes of the same attribute. For example, for the "animation" attribute, the writing style of the above attribute supported by the Firefox browser is "-moz-animation"; the writing style of the above attribute supported by google browser is "-webkit-animation". For example, for the "keyframes" attribute, the writing style of the above-mentioned attribute supported by the firefox browser is "-moz-keyframes", and the writing style of the above-mentioned attribute supported by the google browser is "-webkit-keyframes".
In this embodiment, a plurality of sets are preset, each set containing at least one description mode of the property supported by the browser in the original animation script. For example, set 1 may include, but is not limited to, "-moz-animation", "-webkit-animation", "-o-animation". Set 2 may include, but is not limited to "-moz-keyframes", "-webkit-keyframes", "-o-keyframes". And taking out the attributes of different description modes one by one from the set, judging whether the attributes are the description modes supported by the target browser, if so, recording the description modes of the attributes supported by the target browser, and if not, continuously taking out the next attribute description mode in the set and continuously judging. And if the elements in the set are traversed and the description mode of the attribute supported by the target browser is not found, sending prompt information to the target browser.
In this embodiment, the electronic device may extract codes line by line from an original animation script file.
And 2043, identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to the CSS3 code description mode supported by the target browser.
In this embodiment, the electronic device identifies the extracted code, and determines whether the code is a code defining a "keyframes" attribute; if yes, converting the description mode of the attribute into the description mode supported by the target browser recorded in step 2041, and recording the code line position of the code; if not, judging whether the code is a code for defining an animation style or not, if so, extracting the transition duration of the animation style, recording the animation name of the animation to which the animation style belongs, and simultaneously recording the position of a code line of the code, namely the position of the code line of the code for defining the animation style; if not, judging whether the code is a code defining an animation attribute; if yes, converting the description mode of the attribute into the description mode supported by the target browser recorded in step 2041, extracting an animation name, and recording the code line position of the code, namely the code line position of the code defining the "animation" attribute, and the code line position of the code defining the period duration; if not, the codes are saved, next line codes are extracted, the same judgment is carried out on the next line codes for 3 times until the last line codes in the original animation script are extracted and judged. A regular expression algorithm may be adopted in the judgment, but is not limited to the above algorithm.
The preset period duration in the original animation script is equal to 0. Presetting the transition duration of the animation style, wherein the transition duration of the first animation style is preset to be equal to 0. The transition duration of an animation style is equal to how long the last animation style has transitioned to this style.
And adding and summing the transition time lengths of the animation styles with the same animation names to obtain the actual cycle time length of the animation named as the animation name.
And calculating the percentage of the starting time of the animation style according to the transition time length and the actual period time length of the animation style with the same animation name.
In the present embodiment, based on the "animation" and "keyframes" attributes that have been identified in step 2043, and converted into the description supported by the target browser. And finding and replacing the corresponding attribute codes in the original animation script file according to the positions of the code lines recorded in the step 2043.
And finding the preset cycle duration of the animation and the transition duration of the animation style for replacement based on the animation name and the code line position recorded in the step 2043 by using the actual cycle duration and the start time percentage of the animation style calculated in the step 2043, and generating a new animation script.
And step 205, sending a new animation script to the target browser for the target browser to perform animation display according to the new animation script.
In this embodiment, the electronic device sends a new animation script to the target browser, the target browser receives the new animation script, and the target browser displays an animation after analyzing the animation script.
With continued reference to fig. 4, fig. 4 is a diagram of one example of an application scenario of the animation display method according to the present embodiment. In the application scenario of fig. 4, the user first initiates a browsing request of a knowledge-based web page through the browser, where the web page contains CSS3 animation, and the CSS3 animation specifically describes a driving car 401; then the page server receives the request, analyzes the request and determines an original animation script file specified by the browsing request of the knowledge web page; judging whether the browser supports CSS 3; if the browser supports the CSS3, determining the CSS3 code description mode supported by the browser; extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the browser according to the CSS3 code description mode supported by the browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script; and sending the new animation script to the browser, receiving the new animation script by the browser, displaying the animation, and allowing the user to see that the car 401 on the webpage slowly runs from the position A to the position B and finally stops at the position B.
In the embodiment of the application, the animation effect of the driving time length and the driving track of the car is displayed, and the animation can be displayed in different browser pages.
With further reference to fig. 5, as an implementation of the method described in the above figures, the present application provides an embodiment of an animation display device, which corresponds to the method shown in fig. 2, and which is particularly applicable in various electronic settings.
As shown in fig. 5, the animation display device 500 according to the present embodiment includes: receiving section 501, request analyzing section 502, determining section 503, scenario analyzing section 504, and transmitting section 505. The receiving unit 501 is configured to receive an animation display request sent by a target browser; a request parsing unit 502, configured to parse the animation display request, and determine an original animation script file specified by the animation display request; a judging unit 503, configured to judge whether the target browser supports CSS 3; a script parsing unit 504, responsive to the target browser supporting CSS3, configured to determine a CSS3 code description supported by the target browser, and perform the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script; a sending unit 505, configured to send the new animation script to the target browser, so that the target browser performs animation display according to the new animation script.
In this embodiment, the receiving unit 501 of the animation display device 500 may receive the animation display request from a target browser through a wired connection or a wireless connection, where the target browser includes different types of browsers including, but not limited to, an IE browser, a firefox browser, and a google browser.
Typically, the target browser sends a web page display request, and the content in the web page includes, but is not limited to, CSS3 animation. Unlike an animation film played frame by frame, the CSS3 animation is an animation in which a style created by the CSS3 gradually changes, wherein the style may be a red background, a yellow background, or the like.
In the present embodiment, the request parsing unit 502 of the animation display device 500 analyzes the animation display request received by the receiving unit 501, and the animation display request may be a web address, i.e., a web address, input by the user in the browser. In practice, the web address is generally represented by a Uniform Resource Locator (URL). The website has the position of the animation script file of the animation to be displayed, and the parsing unit 502 finds the original animation script file specified by the request according to the position of the animation script file.
In the present embodiment, the determination unit 503 of the animation display apparatus 500 analyzes the information of the target browser in the animation display request received by the reception unit 501, and determines whether the target browser supports the CSS 3. If the target browser is an IE6 browser and the browser is judged not to support the CSS3, sending prompt information that animation cannot be displayed to the IE6 of the target browser; and if the target browser is the IE10 browser, it is judged that the browser supports CSS 3.
In the present embodiment, based on the CSS3 supported by the target browser obtained by the determination unit 503, the script parsing unit 504 performs the following 4-step parsing step.
Step one, determining CSS3 code description modes supported by the target browser.
In the present embodiment, there are multiple CSS3 attributes in the original animation script, such as animation (animation) attributes and keyframe (keyframes) attributes. Different browsers support different description modes of the same attribute. For example, for the "animation" attribute, the writing style of the above attribute supported by the Firefox browser is "-moz-animation"; the writing style of the above attribute supported by google browser is "-webkit-animation". For example, for the "keyframes" attribute, the writing style of the above-mentioned attribute supported by the firefox browser is "-moz-keyframes", and the writing style of the above-mentioned attribute supported by the google browser is "-webkit-keyframes". A plurality of sets are preset, and each set comprises at least one description mode of the attributes supported by the browser in the original animation script. For example, set 1 may include, but is not limited to, "-moz-animation", "-webkit-animation", "-o-animation". Set 2 may include, but is not limited to "-moz-keyframes", "-webkit-keyframes", "-o-keyframes". And taking out the attributes of different description modes one by one from the set, judging whether the attributes are the description modes supported by the target browser, if so, recording the description modes of the attributes supported by the target browser, and if not, continuously taking out the next attribute description mode in the set and continuously judging. And if the elements in the set are traversed and the description mode of the attribute supported by the target browser is not found, sending prompt information to the target browser.
And step two, extracting codes from the original animation script file line by line.
In the present embodiment, the script parsing unit 504 may extract codes line by line from the original animation script file.
And step three, identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to the CSS3 code description mode supported by the target browser.
In this embodiment, the script parsing unit 504 identifies the extracted code, and determines whether the code is a code defining a "keyframes" attribute; if yes, converting the description mode of the attribute into the description mode supported by the target browser recorded in the step one, and simultaneously recording the code line position of the code; if not, judging whether the code is a code for defining an animation style or not, if so, extracting the transition duration of the animation style, recording the animation name of the animation to which the animation style belongs, and simultaneously recording the position of a code line of the code, namely the position of the code line of the code for defining the animation style; if not, judging whether the code is a code defining an animation attribute; if yes, converting the description mode of the attribute into the description mode supported by the target browser recorded in the first step, extracting an animation name, and simultaneously recording the code line position of the code, namely the code line position of the code defining the animation attribute, and simultaneously the code line position of the code defining the cycle duration; if not, the codes are saved, next line codes are extracted, the same judgment is carried out on the next line codes for 3 times until the last line codes in the original animation script are extracted and judged. A regular expression algorithm may be adopted in the judgment, but is not limited to the above algorithm.
The preset period duration in the original animation script is equal to 0. Presetting the transition duration of the animation style, wherein the transition duration of the first animation style is preset to be equal to 0. The transition duration of an animation style is equal to how long the last animation style has transitioned to this style.
And adding and summing the transition time lengths of the animation styles with the same animation names to obtain the actual cycle time length of the animation named as the animation name.
And calculating the percentage of the starting time of the animation style according to the transition time length and the actual period time length of the animation style with the same animation name.
And step four, replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script.
In the present embodiment, based on the fact that the "animation" and "keyframes" attributes have been identified in step three, and converted into the description mode supported by the target browser. And finding and replacing the corresponding attribute codes in the original animation script file according to the positions of the code lines recorded in the step three.
And (4) finding the preset cycle duration of the animation and the transition duration of the animation pattern for replacement by using the actual cycle duration and the start time percentage of the animation pattern calculated in the third step and based on the animation name and the code line position recorded in the third step, and generating a new animation script.
In this embodiment, the transmitting unit 505 of the animation display apparatus 500 transmits a new animation script to the target browser, and the target browser receives the new animation script, and displays an animation after the target browser analyzes the animation script.
Referring now to FIG. 6, shown is a block diagram of a computer system 600 suitable for use in implementing a server according to embodiments of the present application.
As shown in fig. 6, the computer system 600 includes a Central Processing Unit (CPU)601 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage section 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the system 600 are also stored. The CPU 601, ROM 602, and RAM 603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.
The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted in the storage section 608 as necessary.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program tangibly embodied on a machine-readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611. The computer program performs the above-described functions defined in the method of the present application when executed by a Central Processing Unit (CPU) 601.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present application may be implemented by software or hardware. The described units may also be provided in a processor, and may be described as: a processor comprises a receiving unit, a request analysis unit, a judgment unit, a script analysis unit and a sending unit. The names of these units do not in some cases constitute a limitation on the unit itself, for example, a receiving unit may be described as "receiving an animation display request sent by a target browser".
As another aspect, the present application also provides a non-volatile computer storage medium, which may be the non-volatile computer storage medium included in the apparatus in the above-described embodiments; or it may be a non-volatile computer storage medium that exists separately and is not incorporated into the terminal. The non-transitory computer storage medium stores one or more programs that, when executed by a device, cause the device to: receiving an animation display request sent by a target browser; analyzing the animation display request, and determining an original animation script file specified by the animation display request; judging whether the target browser supports cascading style sheet version 3CSS 3; in response to the target browser supporting CSS3, determining CSS3 code description modes supported by the target browser, and performing the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script; and sending the new animation script to the target browser so that the target browser can display animation according to the new animation script.
The above description is only a preferred embodiment of the application and is illustrative of the principles of the technology employed. It will be appreciated by a person skilled in the art that the scope of the invention as referred to in the present application is not limited to the embodiments with a specific combination of the above-mentioned features, but also covers other embodiments with any combination of the above-mentioned features or their equivalents without departing from the inventive concept. For example, the above features may be replaced with (but not limited to) features having similar functions disclosed in the present application.
Claims (8)
1. An animation display method, characterized in that the method comprises:
receiving an animation display request sent by a target browser;
analyzing the animation display request, and determining an original animation script file specified by the animation display request;
judging whether the target browser supports cascading style sheet version CSS 3;
in response to the target browser supporting CSS3, determining CSS3 code description modes supported by the target browser, and performing the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser, wherein the identified codes comprise: presetting cycle time and transition time of the animation style, wherein the preset cycle time is equal to the time required by the animation to finish one cycle, and the transition time of the animation style is equal to the time required by the transition from the previous animation style to the current animation style; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script;
sending the new animation script to the target browser so that the target browser can display animation according to the new animation script;
the identifying the extracted codes and converting the identified codes into the codes supported by the target browser according to the CSS3 code description mode supported by the target browser includes:
identifying the extracted codes, and converting the identified preset cycle duration into an actual cycle duration according to a CSS3 code description mode supported by the target browser, wherein the actual cycle duration is the sum of transition durations of the animation styles;
identifying the extracted codes, and converting the identified animation style transition duration into the start time percentage of the animation style according to the CSS3 code description mode supported by the target browser;
converting the identified animation style transition duration into the percentage of the starting time of the animation style comprises the following steps:
and dividing the start time of the animation style by the actual period time length multiplied by 100% to obtain the start time percentage of the animation style, wherein the start time of the animation style is equal to the sum of the transition time length of the animation style and the transition time length of the animation style before the animation style.
2. The animation display method of claim 1, wherein the identified code comprises:
property codes not supported by the target browser.
3. The animation display method as claimed in claim 2, wherein the recognizing the extracted codes and converting the recognized codes into codes supported by the target browser according to the CSS3 code description supported by the target browser comprises:
and identifying the extracted codes, and converting the identified attribute codes which are not supported by the target browser into the attribute codes which are supported by the target browser according to the CSS3 code description mode which is supported by the target browser.
4. An animation display device, characterized in that the device comprises:
the receiving unit is used for receiving an animation display request sent by a target browser;
the request analysis unit is used for analyzing the animation display request and determining an original animation script file specified by the animation display request;
a judging unit, configured to judge whether the target browser supports CSS 3;
a script parsing unit, responsive to the target browser supporting CSS3, configured to determine a CSS3 code description supported by the target browser, and perform the following parsing steps: extracting codes from the original animation script file line by line; identifying the extracted codes, and converting the identified codes into codes supported by the target browser according to a CSS3 code description mode supported by the target browser; replacing the corresponding codes in the original animation script file with the converted codes to generate a new animation script;
the sending unit is used for sending the new animation script to the target browser so that the target browser can display animation according to the new animation script;
wherein the script parsing unit is configured to: identifying a preset period time length and a transition time length of an animation pattern, wherein the preset period time length is equal to the time required by the animation to complete one period, and the transition time length of the animation pattern is equal to the time required by the previous animation pattern to transition to the current animation pattern;
the script parsing unit is further configured to:
identifying the extracted codes, and converting the identified preset period duration into an actual period duration according to a CSS3 code description mode supported by the target browser;
identifying the extracted codes, and converting the identified animation style transition duration into the start time percentage of the animation style according to the CSS3 code description mode supported by the target browser;
the script parsing unit is further configured to:
calculating the actual period duration, wherein the actual period duration is the sum of the transition durations of the animation styles;
wherein the script parsing unit is further configured to:
and dividing the start time of the animation style by the actual period time length multiplied by 100% to obtain the start time percentage of the animation style, wherein the start time of the animation style is equal to the sum of the transition time length of the animation style and the transition time length of the animation style before the animation style.
5. The animation display device according to claim 4, wherein the script parsing unit is configured to:
identifying property codes that are not supported by the target browser.
6. The animation display device as claimed in claim 5, wherein the script parsing unit is further configured to:
and identifying the extracted codes, and converting the identified attribute codes which are not supported by the target browser into the attribute codes which are supported by the target browser according to the CSS3 code description mode which is supported by the target browser.
7. A server, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-3.
8. A computer-readable storage medium, on which a computer program is stored, wherein the program, when executed by a processor, implements the method of any one of claims 1-3.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610384292.2A CN107451163B (en) | 2016-06-01 | 2016-06-01 | Animation display method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610384292.2A CN107451163B (en) | 2016-06-01 | 2016-06-01 | Animation display method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107451163A CN107451163A (en) | 2017-12-08 |
| CN107451163B true CN107451163B (en) | 2021-02-26 |
Family
ID=60485303
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610384292.2A Active CN107451163B (en) | 2016-06-01 | 2016-06-01 | Animation display method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107451163B (en) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN108256062B (en) * | 2018-01-16 | 2020-11-24 | 携程旅游信息技术（上海）有限公司 | Webpage animation implementation method and device, electronic equipment and storage medium |
| CN108762741B (en) * | 2018-05-18 | 2023-03-14 | 北京车和家信息技术有限公司 | Animation code generation method and system |
| CN111199001A (en) * | 2019-12-03 | 2020-05-26 | 云深互联(北京)科技有限公司 | Resource overloading compatibility processing method and system for browser |
| CN114998485B (en) * | 2022-08-02 | 2022-12-27 | 广州市千钧网络科技有限公司 | Method and device for generating graphic combined animation, electronic equipment and storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102186114A (en) * | 2011-05-10 | 2011-09-14 | 中山大学 | ETL (Extraction Transformation and Loading) based digital television interactive application middleware |
| US8164596B1 (en) * | 2011-10-06 | 2012-04-24 | Sencha, Inc. | Style sheet animation creation tool with timeline interface |
| CN103365640A (en) * | 2012-03-30 | 2013-10-23 | 中兴通讯股份有限公司 | Cascading style sheet style transformation method and device |
| AU2013206116B2 (en) * | 2012-04-12 | 2015-07-16 | Google Llc | Changing animation displayed to user |
| CN104899038A (en) * | 2015-06-12 | 2015-09-09 | 北京金山安全软件有限公司 | Interface style transformation method and device |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| CN105069349A (en) * | 2015-07-24 | 2015-11-18 | 北京元心科技有限公司 | Method for generating password input interface in mobile terminal and mobile terminal |
| CN105094804A (en) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | Method and apparatus for adding animation to page |
-
2016
- 2016-06-01 CN CN201610384292.2A patent/CN107451163B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102186114A (en) * | 2011-05-10 | 2011-09-14 | 中山大学 | ETL (Extraction Transformation and Loading) based digital television interactive application middleware |
| US8164596B1 (en) * | 2011-10-06 | 2012-04-24 | Sencha, Inc. | Style sheet animation creation tool with timeline interface |
| CN103365640A (en) * | 2012-03-30 | 2013-10-23 | 中兴通讯股份有限公司 | Cascading style sheet style transformation method and device |
| AU2013206116B2 (en) * | 2012-04-12 | 2015-07-16 | Google Llc | Changing animation displayed to user |
| CN104899038A (en) * | 2015-06-12 | 2015-09-09 | 北京金山安全软件有限公司 | Interface style transformation method and device |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| CN105094804A (en) * | 2015-06-18 | 2015-11-25 | 北京奇虎科技有限公司 | Method and apparatus for adding animation to page |
| CN105069349A (en) * | 2015-07-24 | 2015-11-18 | 北京元心科技有限公司 | Method for generating password input interface in mobile terminal and mobile terminal |
Non-Patent Citations (1)
| Title |
|---|
| Controlling Animation Timing;Davidronnqvist;《http://ronnqvi.st/controlling-animation-timing》;20131031;1-15 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107451163A (en) | 2017-12-08 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20190251143A1 (en) | Web page rendering method and related device | |
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| US9600400B1 (en) | Performance testing of web application components using image differentiation | |
| WO2018223717A1 (en) | Webpage front-end testing method, device, system, apparatus and readable storage medium | |
| US10565293B2 (en) | Synchronizing DOM element references | |
| US10839041B2 (en) | Systems, method, and non-transitory computer-readable storage media for a partial-render operation generating code for displaying a webpage | |
| CN102693280B (en) | Webpage browsing method, WebApp framework, method and device for executing JavaScript, and mobile terminal | |
| US20180210715A1 (en) | Systems, method, and non-transitory computer-readable storage media for generating code for displaying a webpage | |
| CN107451163B (en) | Animation display method and device | |
| CN110020329B (en) | Method, device and system for generating webpage | |
| US20170192941A1 (en) | Computer-Automated Generation of Application Deep Links | |
| US20150227276A1 (en) | Method and system for providing an interactive user guide on a webpage | |
| RU2595524C2 (en) | Device and method for processing content of web resource in browser | |
| KR102087807B1 (en) | Character inputting method and apparatus | |
| CN106951270B (en) | Code processing method, system and server | |
| US20160359989A1 (en) | Recording And Triggering Web And Native Mobile Application Events With Mapped Data Fields | |
| CN112685671A (en) | Page display method, device, equipment and storage medium | |
| US8700992B1 (en) | Method for determining position and dimensions of webpage elements by wireframe injection | |
| TWI427490B (en) | Methods and systems for viewing web pages, and computer program products thereof | |
| CN113688341B (en) | Dynamic picture decomposition method and device, electronic equipment and readable storage medium | |
| CN111400581B (en) | System, method and apparatus for labeling samples | |
| US11126410B2 (en) | Method and apparatus for building pages, apparatus and non-volatile computer storage medium | |
| US20140331117A1 (en) | Application-based dependency graph | |
| CN110088750B (en) | Method and system for providing context function in static webpage | |
| RU2634221C2 (en) | Method and device for drawing presentation of electronic document on screen |
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 |