CN108256062B - Webpage animation implementation method and device, electronic equipment and storage medium - Google Patents
Webpage animation implementation method and device, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN108256062B CN108256062B CN201810039831.8A CN201810039831A CN108256062B CN 108256062 B CN108256062 B CN 108256062B CN 201810039831 A CN201810039831 A CN 201810039831A CN 108256062 B CN108256062 B CN 108256062B
- Authority
- CN
- China
- Prior art keywords
- animation
- webpage
- user interaction
- static image
- interaction behavior
- 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/957—Browsing optimisation, e.g. caching or content distillation
Abstract
The invention provides a method and a device for realizing webpage animation, electronic equipment and a storage medium, and the method for realizing the webpage animation comprises the following steps: acquiring a user interaction behavior on a webpage; judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file; if the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file, judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior; if a custom animation style corresponding to the preset user interaction behavior exists in the HTML file, CSS animation configuration data corresponding to the custom animation style is obtained; and displaying animation effects according to the CSS animation configuration data. The method and the device provided by the invention realize the webpage animation according to the user interaction behavior, and the webpage animation is small, exquisite and light, so that the webpage opening speed is high, the compatibility is strong, and the expansibility is wide.
Description
Technical Field
The invention relates to the technical field of computer application, in particular to a method and a device for realizing webpage animation, electronic equipment and a storage medium.
Background
With the development of computer and network technologies, obtaining information through web pages has become a part of people's lives. In the process of web browsing, animation effects are often included, for example, when data is requested through a server, a process of waiting for the data may be provided, and the waiting animation effects are presented to represent the waiting process.
The existing webpage animation effect display methods mainly comprise two methods: one is to display the dynamic pictures with the suffix name of Gif, and the other is to display the animation effect by dynamically modifying the character content by using a timer in JavaScript, but the 2 methods have disadvantages, the first method is that the Gif dynamic pictures occupy large space, consume large flow and have large performance loss, accelerate the electricity consumption of the mobile phone, and the display effect of the animation is not flexible, for example, the animation speed can not be controlled. The second method is difficult in technical implementation because the JavaScript belongs to a scripting language, and because the animation main body element is bound with the JavaScript operation, if the HTML code related to the animation is modified, an error may be caused to the JavaScript code.
In addition, a self-luminous display panel such as an OLED (Organic Light-Emitting display) display technology has advantages of self-luminescence, a wide viewing angle, almost infinite contrast, low power consumption, extremely high response speed, and the like, and thus the self-luminous display panel is widely used. However, the self-luminous display screen may also show slight visual changes during long-term use. Such as "image sticking" or "aging", in other words, as the use time increases, image sticking occurs to the self-luminous display screen, thereby affecting the display effect.
Disclosure of Invention
In order to overcome the defects in the prior art, the invention provides a method, a device, electronic equipment and a storage medium for realizing webpage animation according to user interaction behaviors, and the webpage animation is small, exquisite and light, so that the webpage opening speed is high, the compatibility is strong and the expansibility is wide.
According to one aspect of the invention, a method for implementing web animation is provided, which comprises the following steps: acquiring a user interaction behavior on a webpage; judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file; if the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file, judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior; if a custom animation style corresponding to the preset user interaction behavior exists in the HTML file, CSS animation configuration data corresponding to the custom animation style is obtained; and displaying animation effects according to the CSS animation configuration data.
Preferably, the step of acquiring the user interaction behavior on a webpage further comprises: acquiring an identifier of hardware equipment for displaying the webpage; identifying whether the display screen of the hardware equipment is a self-luminous display screen or not according to the identifier of the hardware equipment of the webpage; and if the display screen of the hardware equipment is a self-luminous display screen, acquiring a static image displayed on the webpage according to the HTML file, wherein the preset interaction behavior enables the holding time of the static image at the same position on the self-luminous display screen to exceed a first time threshold, and the animation main body of the self-defined animation style corresponding to the preset user interaction behavior is the static image.
Preferably, the method further comprises the following steps: acquiring a user interaction behavior of opening a target webpage on a current webpage; obtaining a static image displayed on the target webpage according to the HTML file; determining whether the static image displayed on the target webpage hits the static image displayed on the current webpage; if the static image displayed on the target webpage hits the static image displayed on the current webpage, acquiring the coordinate positions of the static image on the current webpage and the target webpage; if the coordinate positions of the static image on the current webpage and the target webpage are the same, the user interaction behavior of opening the target webpage on the current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
Preferably, the method further comprises the following steps: acquiring a user interaction behavior for updating a current webpage; acquiring a static image displayed on the updated current webpage according to the HTML file; determining whether the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating; if the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating, acquiring the coordinate positions of the static image on the current webpage after updating and the current webpage before updating; and if the coordinate positions of the static image on the updated current webpage and the updated current webpage are the same, the user interaction behavior of the updated current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
Preferably, the web page comprises any one or more of the following areas: a sub dynamic region that displays a static image switched between static display and dynamic display, the sub dynamic region having a first state and a second state, the static region being in the first state when the static image is statically displayed in the sub dynamic region, the sub dynamic region being in the second state when the static image is dynamically displayed in the sub dynamic region as the animation body, the sub dynamic region moving with movement of the animation body when in the second state; a dynamic region displaying non-static web content.
Preferably, the step of displaying animation effects according to the CSS animation configuration data further comprises, before the step of: when the webpage is updated, only the secondary dynamic area and the dynamic area in the second state are rendered.
Preferably, the custom dynamic style comprises one or more of the following forms: gradually increasing the transparency of the static image; rotating the static image; enlarging/reducing the still image; the still image is dithered.
Preferably, when the pixels, which are far away from the boundary of the static picture by the preset number, in the webpage are all black, the static picture is triggered to change from the transparency of 100% to the transparency of 0%; and when a plurality of pixels which are not black and are a predetermined number of pixels away from the boundary of the static picture in the webpage are identified, triggering the static picture to change from the transparency of 0% to the transparency of 100%.
Preferably, the change time of the static picture from the transparency of 100% to the transparency of 0% is the playing time of 1 frame; the change time of the static picture from 0% transparency to 100% transparency is longer than the play time of the 1 frame.
Preferably, each time the transparency of the still picture is changed from 100% to 0%, the still picture is moved by the positions of a plurality of pixel points along a direction.
According to another aspect of the present invention, there is also provided a web animation implementation apparatus, including: the acquisition module is used for acquiring user interaction behaviors on a webpage; the first judgment module is used for judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript in an HTML file; the second judgment module is used for judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior if the user interaction behavior hits the preset user interaction behavior written by the JavaScript in the HTML file; the animation style acquisition module is used for acquiring CSS animation configuration data corresponding to the custom animation style if the custom animation style corresponding to the preset user interaction behavior exists in the HTML file; and the display module is used for displaying animation effects according to the CSS animation configuration data.
According to still another aspect of the present invention, there is also provided an electronic apparatus, including: a processor; a storage medium having stored thereon a computer program which, when executed by the processor, performs the steps as described above.
According to yet another aspect of the present invention, there is also provided a storage medium having stored thereon a computer program which, when executed by a processor, performs the steps as described above.
Compared with the prior art, the method and the device have the advantages that the webpage animation according to the user interaction behavior is realized, and the webpage animation is small, exquisite and light, so that the webpage opening speed is high, the compatibility is strong, and the expansibility is wide. In addition, the invention also identifies the hardware display screen, when the hardware of the self-luminous display screen displays the webpage, if the static picture is kept at the same position for too long time, the static picture is taken as the animation main body to carry out animation display, thereby solving the problem that the self-luminous display screen has image residue to further influence the display effect.
Drawings
The above and other features and advantages of the present invention will become more apparent by describing in detail exemplary embodiments thereof with reference to the attached drawings.
FIG. 1 shows a flowchart of a page animation implementation method according to an embodiment of the invention.
Fig. 2-4 show flowcharts of various embodiments of a page animation implementation method according to embodiments of the invention.
Fig. 5 to 11 are diagrams illustrating still images in a web page according to an embodiment of the present invention.
FIG. 12 is a diagram illustrating a page animation implementation apparatus according to an embodiment of the invention.
Fig. 13 schematically illustrates a computer-readable storage medium in an exemplary embodiment of the disclosure.
Fig. 14 schematically illustrates an electronic device in an exemplary embodiment of the disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments.
Furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus their repetitive description will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.
In order to overcome the defects of the prior art, the webpage animation according to the user interaction behavior is realized, and the webpage animation is small, exquisite and light, so that the webpage is high in opening speed, high in compatibility and wide in expansibility.
FIG. 1 shows a flowchart of a page animation implementation method according to an embodiment of the invention. Fig. 1 shows 5 steps:
step S110: user interaction behavior on a web page is obtained.
Step S120: and judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in the HTML file.
If it is determined in step S120 that the user interaction behavior hits a predetermined user interaction behavior written by a JavaScript script in an HTML file, step S130 is executed: and judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior.
If it is determined in step S130 that the HTML file has the custom animation style corresponding to the predetermined user interaction behavior, step S140 is executed to obtain CSS animation configuration data corresponding to the custom animation style.
Step S150: and displaying animation effects according to the CSS animation configuration data.
In particular, HTML is a Hypertext Markup Language, i.e., HTML (Hypertext Markup Language), which is a Markup Language for describing web documents. An HTML file is descriptive text consisting of HTML commands by which characters, graphics, animation, sound, tables, links, etc. are displayed. When a webpage needs to be browsed, a terminal sends a webpage request, acquires an HTML file corresponding to the webpage, displays the webpage by analyzing the HTML file, and judges whether a custom animation style exists in the HTML file in the analyzing process, wherein the custom animation style refers to the expression form of animation designed according to needs and comprises the display duration and the display mode of the animation, the shape of an animation main body, the position of the animation main body, the number of the animation main body, the states of the animation main body at different times and the like, the animation main body refers to each part of animation components, such as dynamic '…', appearing one by one, and one of the parts can be called an animation main body. And searching whether a custom tag or a preset character string form or a tag which can realize a custom animation style and is carried by the HTML file exists in the HTML file, if so, judging that the custom animation style exists in the HTML file, otherwise, judging that the custom animation style does not exist in the HTML file.
Specifically, CSS (cascading style sheets) is a computer language for representing HTML file styles, and CSS animation configuration data refers to data for controlling animation effects, such as parameters for controlling display duration and display mode of an animation, parameters for controlling shape of an animation body, parameters for controlling position of an animation body, parameters for controlling number of animation bodies, and parameters for controlling states of the animation bodies at different times, which are implemented through CSS. The same animation effect can be realized by different CSS animation configuration data (namely animation attributes), for example, parameters for controlling the shape of an animation main body can be composed of text projection parameters or inner edge distance parameters, frame parameters, background parameters, layer projection parameters and the like, the animation main body is generated by matching various parameters, parameters for controlling the position of the animation main body can be composed of character distance control parameters or character retraction parameters, the parameters for controlling the number of the animation main body can be composed of hidden character parameters to hide characters so as to change the number of the animation main body, or the parameters for controlling the number of the animation main body can be composed of transparency parameters to make the animation main body transparent so as to change the number of the animation main body. Due to the flexibility of the CSS, animation effects can be conveniently and flexibly controlled through CSS animation configuration data.
Specifically, JavaScript, an transliterated scripting language, is a dynamic-type, weak-type, prototype-based language with built-in support types. Its interpreter, called JavaScript engine, is a part of the browser, a scripting language widely used on clients, and was originally used on HTML (an application under the standard universal markup language) web pages to add dynamic functionality to the HTML web pages. jQuery may be employed in JavaScript scripting. jQuery is a fast, compact JavaScript frame, which is another excellent JavaScript code base (or JavaScript frame) after Prototype. The aim of jQuery design is "write Less, Do More", i.e. advocate writing Less code and doing More. The method encapsulates functional codes commonly used by JavaScript, provides a simple JavaScript design mode, And optimizes HTML document operation, event processing, animation design And Ajax (Asynchronous Javascript And XML) interaction.
Several embodiments of the present invention are described below with reference to fig. 2-4, respectively. Referring to fig. 2, fig. 2 shows 3 steps, and the 3 steps shown in fig. 2 are performed before step S110 in fig. 1:
step S210: and acquiring the identifier of the hardware equipment for displaying the webpage.
Step S220: and identifying whether the display screen of the hardware equipment is a self-luminous display screen or not according to the identifier of the hardware equipment of the webpage.
Specifically, in step S220, the model of the hardware device may be identified according to the identifier of the hardware device, and the type of the display screen of the hardware device is determined according to a mapping table between the model of the hardware device and the type of the display screen of the hardware device. Alternatively, only the model of the hardware device having the self-luminous display screen is stored, reducing the storage load.
Step S230: and if the display screen of the hardware equipment is a self-luminous display screen, acquiring a static image displayed on the webpage according to the HTML file, wherein the preset interaction behavior enables the holding time of the static image at the same position on the self-luminous display screen to exceed a first time threshold, and the animation main body of the self-defined animation style corresponding to the preset user interaction behavior is the static image. The first time threshold may be, for example, 30 minutes, 1 hour, 2 hours, etc.
Since the self-luminous display screen is used for a long time, especially when the same static image is displayed for a long time, image sticking may occur, thereby affecting the display effect. Therefore, the display screen type of the hardware equipment can be identified through the steps, and when the hardware equipment is provided with the self-luminous display screen, the static image displayed at the same position of the display screen for a long time is subjected to animation display. The custom animation style for each still image has the same CSS animation configuration data. The CSS animation configuration data is preset and can be directly called, and the storage load is reduced. In some variations, different CSS animation configurations may be implemented depending on the position of each static image (e.g., avoiding web page main content while moving), increasing the display effect.
On the basis of the embodiment of fig. 2, fig. 3 and 4 show two different embodiments.
Referring first to fig. 3, fig. 3 shows 6 steps:
step S310: and acquiring the user interaction behavior of opening the target webpage on the current webpage.
Step S320: and acquiring the static image displayed on the target webpage according to the HTML file.
Step S330: and determining whether the static image displayed on the target webpage hits the static image displayed on the current webpage.
Step S340: and if the static image displayed on the target webpage hits the static image displayed on the current webpage, acquiring the coordinate positions of the static image on the current webpage and the target webpage.
Step S350: and judging whether the coordinate positions of the static image on the current webpage and the target webpage are the same or not.
Step S360: if the coordinate positions of the static image on the current webpage and the target webpage are the same, the user interaction behavior of opening the target webpage on the current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
In the embodiment shown in fig. 3, it can be understood that, for example, the same position of the multiple webpages of the same website has the identification picture of the website, and the identification picture may not move along with the user interaction, so that when the user browses the multiple webpages of the website, the identification picture will be displayed in the same position of the display screen for a long time, and through the above steps, the identification picture is animated to avoid image residue on the self-luminous display screen, thereby affecting the display effect. In addition, in some other embodiments, for example, the same position of multiple web pages of the same website has an identification picture of the website, the identification picture may move along with the user interaction, and when the user interaction causes the identification picture to be displayed at the same position of the display screen for a longer time, through the above steps, the identification picture is animated, so as to avoid that image residue occurs on the self-luminous display screen, thereby affecting the display effect.
Referring now to fig. 4, fig. 4 shows 6 steps:
step S301: and acquiring the user interaction behavior for updating the current webpage.
Step S302: and acquiring the static image displayed on the updated current webpage according to the HTML file.
Step S303: and determining whether the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating.
Step S304: and if the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating, acquiring the coordinate positions of the static image on the current webpage after updating and the current webpage before updating.
Step S305: and determining whether the coordinate positions of the static image on the current webpage after updating and the current webpage before updating are the same.
Step S306: and if the coordinate positions of the static image on the updated current webpage and the updated current webpage are the same, the user interaction behavior of the updated current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
In the embodiment shown in fig. 4, it can be understood that when a user browses the same web page, the web page may be refreshed at a certain period, and each time the web page is refreshed, it is determined whether the web page has the same static image before and after being updated, and whether the position of the static image is at the same position in the display screen, so that the static image is animated to avoid image residue on the self-luminous display screen, thereby affecting the display effect.
Fig. 5 to 11 are diagrams illustrating still images in a web page according to an embodiment of the present invention. Fig. 5 to 11 are merely schematic illustrations, and the present invention is not limited thereto.
Referring first to fig. 5-8, web page 500 includes secondary dynamic region 510 and/or dynamic region 520. The secondary dynamic region 510 displays a static image that is switched between a static display and a dynamic display. The secondary dynamic region 510 has a first state and a second state, the secondary dynamic region 510 being in the first state when the static image is statically displayed in the secondary dynamic region 510. When the static image is dynamically displayed as the animation body in the secondary dynamic region 510, the secondary dynamic region 510 is in a second state. The secondary dynamic region 510 moves with the movement of the animation body when in the second state. When the secondary dynamic region 510 is in the second state, the custom dynamic style of the static image may gradually increase the transparency of the static image (see fig. 5 and 6); rotating the still image (as in fig. 5 and 7); zooming in/out the static image (zooming in/out does not affect other web page content and does not affect the display of the static image); the still image is dithered (as in fig. 5 and 8). The dynamic region 520 displays non-static web page content. Non-static web content refers to web content (including images, text) that remains in place at most within a first time threshold. It will be appreciated that there may also be static areas in the web page, which may be areas where no content is displayed.
Further, before step S150 in fig. 1, the method further includes: when the webpage is updated, only the secondary dynamic area and the dynamic area in the second state are rendered. In other words, when the webpage is updated, the secondary dynamic area in the first state is not rendered, so that the webpage refreshing speed is increased.
With continued reference to fig. 9-11, in the embodiment of fig. 9-11, the user views the video in the player region 530 of the web page, and the static image may be, for example, a watermark in the video. When a black switching frame appears in the video in the player during the switching process (i.e. when it is recognized that a predetermined number of pixel points away from the still picture boundary in the web page are all black), the still picture is triggered to change from transparency 100% to transparency 0% (see fig. 10 and 11). When the switching frame is identified to be played normally after the switching frame is finished (that is, a plurality of pixels which are not black and are a predetermined number of pixels away from the boundary of the static picture in the webpage), the static picture is triggered to change from the transparency 0% to the transparency 100% (as shown in fig. 11 and 9). It can be understood that, in order to alleviate the influence of the hidden time in watermarking on video viewing, the change time when the still picture changes from transparency 100% to transparency 0% is the playback time of 1 frame (i.e., the playback time of the switching frame). The change time of the static picture from 0% transparency to 100% transparency is longer than the play time of the 1 frame. For example, the still picture gradually changes from transparency 0% to transparency 100%, which may last for 10 seconds, 20 seconds, or longer. Further, when a plurality of switching frames appear in the video, each time the transparency of the static image is changed from 100% to 0%, the static image is moved by the positions of a plurality of pixel points along a direction, so that the pixels with the same pixel value are prevented from being displayed at the same position all the time.
FIG. 12 is a diagram illustrating a page animation implementation apparatus according to an embodiment of the invention.
The web animation realization apparatus 400 includes an obtaining module 410, a first determining module 420, a second determining module 430, an animation style obtaining module 440, and a display module 450.
The obtaining module 410 is used for obtaining the user interaction behavior on a webpage. The first determining module 420 is configured to determine whether the user interaction behavior hits a predetermined user interaction behavior written by a JavaScript script in an HTML file. If the user interaction behavior hits a predetermined user interaction behavior written by a JavaScript script in an HTML file, the second determining module 430 is configured to determine whether a custom animation style corresponding to the predetermined user interaction behavior exists in the HTML file according to the predetermined user interaction behavior. If a custom animation style corresponding to the predetermined user interaction behavior exists in the HTML file, the animation style acquisition module 440 is configured to acquire CSS animation configuration data corresponding to the custom animation style. The display module 450 is configured to display an animation effect according to the CSS animation configuration data.
Fig. 12 is a schematic diagram showing the modules, and it is understood that the modules may be virtual software modules or actual hardware modules, and the combination, the division and the addition of the rest of the modules are within the protection scope of the present invention.
In an exemplary embodiment of the present disclosure, there is also provided a computer-readable storage medium having stored thereon a computer program which, when executed by, for example, a processor, can implement the steps of the electronic prescription flow processing method described in any one of the above embodiments. In some possible embodiments, aspects of the present invention may also be implemented in the form of a program product comprising program code for causing a terminal device to perform the steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of this specification, when the program product is run on the terminal device.
Referring to fig. 13, a program product 800 for implementing the above method according to an embodiment of the present invention is described, which may employ a portable compact disc read only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a personal computer. However, the program product of the present invention is not limited in this regard and, in the present document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
The program product may employ any combination of one or more readable media. The readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the readable storage medium include: an electrical connection having one or more wires, a portable disk, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The computer readable storage medium may include a propagated data signal with readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A readable storage medium may also be any readable medium that is not a readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a readable storage medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the tenant computing device, partly on the tenant device, as a stand-alone software package, partly on the tenant computing device and partly on a remote computing device, or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing devices may be connected to the tenant computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., through the internet using an internet service provider).
In an exemplary embodiment of the present disclosure, there is also provided an electronic device, which may include a processor, and a memory for storing executable instructions of the processor. Wherein the processor is configured to execute the steps of the electronic prescription flow processing method in any one of the above embodiments via execution of the executable instructions.
As will be appreciated by one skilled in the art, aspects of the present invention may be embodied as a system, method or program product. Thus, various aspects of the invention may be embodied in the form of: an entirely hardware embodiment, an entirely software embodiment (including firmware, microcode, etc.) or an embodiment combining hardware and software aspects that may all generally be referred to herein as a "circuit," module "or" system.
An electronic device 600 according to this embodiment of the invention is described below with reference to fig. 14. The electronic device 600 shown in fig. 14 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present invention.
As shown in fig. 14, the electronic device 600 is embodied in the form of a general purpose computing device. The components of the electronic device 600 may include, but are not limited to: at least one processing unit 610, at least one storage unit 620, a bus 630 that connects the various system components (including the storage unit 620 and the processing unit 610), a display unit 640, and the like.
Wherein the storage unit stores program code executable by the processing unit 610 to cause the processing unit 610 to perform steps according to various exemplary embodiments of the present invention described in the above-mentioned electronic prescription flow processing method section of the present specification. For example, the processing unit 610 may perform the steps as shown in fig. 1.
The storage unit 620 may include readable media in the form of volatile memory units, such as a random access memory unit (RAM)6201 and/or a cache memory unit 6202, and may further include a read-only memory unit (ROM) 6203.
The memory unit 620 may also include a program/utility 6204 having a set (at least one) of program modules 6205, such program modules 6205 including, but not limited to: an operating system, one or more application programs, other program modules, and program data, each of which, or some combination thereof, may comprise an implementation of a network environment.
The electronic device 600 may also communicate with one or more external devices 700 (e.g., keyboard, pointing device, bluetooth device, etc.), with one or more devices that enable a tenant to interact with the electronic device 600, and/or with any devices (e.g., router, modem, etc.) that enable the electronic device 600 to communicate with one or more other computing devices. Such communication may occur via an input/output (I/O) interface 650. Also, the electronic device 600 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN), and/or a public network such as the Internet) via the network adapter 660. The network adapter 660 may communicate with other modules of the electronic device 600 via the bus 630. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the electronic device 600, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.
Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein may be implemented by software, or by software in combination with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (which may be a CD-ROM, a usb disk, a removable hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which may be a personal computer, a server, or a network device, etc.) to execute the above-mentioned electronic prescription flow processing method according to the embodiments of the present disclosure.
Compared with the prior art, the method and the device have the advantages that the webpage animation according to the user interaction behavior is realized, and the webpage animation is small, exquisite and light, so that the webpage opening speed is high, the compatibility is strong, and the expansibility is wide. In addition, the invention also identifies the hardware display screen, when the hardware of the self-luminous display screen displays the webpage, if the static picture is kept at the same position for too long time, the static picture is taken as the animation main body to carry out animation display, thereby solving the problem that the self-luminous display screen has image residue to further influence the display effect.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
Claims (11)
1. A webpage animation implementation method is characterized by comprising the following steps:
acquiring a user interaction behavior on a webpage;
judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file;
if the user interaction behavior hits a preset user interaction behavior written by a JavaScript script in an HTML file, judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior;
if a custom animation style corresponding to the preset user interaction behavior exists in the HTML file, CSS animation configuration data corresponding to the custom animation style is obtained;
displaying an animation effect according to the CSS animation configuration data,
wherein, the step of obtaining the user interaction behavior on a webpage further comprises:
acquiring an identifier of hardware equipment for displaying the webpage;
identifying whether the display screen of the hardware equipment is a self-luminous display screen or not according to the identifier of the hardware equipment of the webpage;
if the display screen of the hardware equipment is a self-luminous display screen, acquiring a static image displayed on the webpage according to the HTML file, wherein the preset user interaction behavior enables the same position of the static image on the self-luminous display screen to be kept for more than a first time threshold, and the animation main body of the self-defined animation style corresponding to the preset user interaction behavior is the static image,
the webpage comprises any one or more of the following areas:
a sub dynamic region that displays a static image switched between static display and dynamic display, the sub dynamic region having a first state and a second state, the sub dynamic region being in the first state when the static image is statically displayed in the sub dynamic region, the sub dynamic region being in the second state when the static image is dynamically displayed in the sub dynamic region as the animation body, the sub dynamic region moving with movement of the animation body when in the second state;
a dynamic region displaying non-static web content.
2. The web page animation implementation method of claim 1, further comprising:
acquiring a user interaction behavior of opening a target webpage on a current webpage;
obtaining a static image displayed on the target webpage according to the HTML file;
determining whether the static image displayed on the target webpage hits the static image displayed on the current webpage;
if the static image displayed on the target webpage hits the static image displayed on the current webpage, acquiring the coordinate positions of the static image on the current webpage and the target webpage;
if the coordinate positions of the static image on the current webpage and the target webpage are the same, the user interaction behavior of opening the target webpage on the current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
3. The web page animation implementation method of claim 1, further comprising:
acquiring a user interaction behavior for updating a current webpage;
acquiring a static image displayed on the updated current webpage according to the HTML file;
determining whether the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating;
if the static image displayed on the current webpage after updating hits the static image displayed on the current webpage before updating, acquiring the coordinate positions of the static image on the current webpage after updating and the current webpage before updating;
and if the coordinate positions of the static image on the updated current webpage and the updated current webpage are the same, the user interaction behavior of the updated current webpage hits the preset user interaction behavior, and the animation main body of the custom animation style corresponding to the preset user interaction behavior is the static image.
4. The method for web animation according to claim 1, wherein the step of displaying animation effects according to the CSS animation configuration data is preceded by the steps of:
when the webpage is updated, only the secondary dynamic area and the dynamic area in the second state are rendered.
5. The web page animation implementation method according to any one of claims 1 to 4, wherein the custom dynamic style comprises one or more of the following forms:
gradually increasing the transparency of the static image;
rotating the static image;
enlarging/reducing the still image;
the still image is dithered.
6. The web page animation implementation method of any one of claims 1 to 4,
when the pixels, which are far away from the boundary of the static image by the preset number, in the webpage are identified to be black, triggering the static image to change from the transparency of 100% to the transparency of 0%;
and when a plurality of pixels which are not black and are a predetermined number of pixels away from the boundary of the static image in the webpage are identified, triggering the static image to change from the transparency 0% to the transparency 100%.
7. The web animation implementation method of claim 6, wherein the change time of the static image from 100% transparency to 0% transparency is a play time of 1 frame;
the change time of the static image from 0% transparency to 100% transparency is longer than the play time of the 1 frame.
8. The method of claim 6, wherein the still image is moved in a direction by a number of pixel points each time the still image changes from 100% transparency to 0% transparency.
9. A web animation realization apparatus, comprising:
the acquisition module is used for acquiring user interaction behaviors on a webpage;
the first judgment module is used for judging whether the user interaction behavior hits a preset user interaction behavior written by a JavaScript in an HTML file;
the second judgment module is used for judging whether a custom animation style corresponding to the preset user interaction behavior exists in the HTML file or not according to the preset user interaction behavior if the user interaction behavior hits the preset user interaction behavior written by the JavaScript in the HTML file;
the animation style acquisition module is used for acquiring CSS animation configuration data corresponding to the custom animation style if the custom animation style corresponding to the preset user interaction behavior exists in the HTML file;
a display module for displaying animation effect according to the CSS animation configuration data,
wherein the web animation implementation apparatus is further configured to:
acquiring an identifier of hardware equipment for displaying the webpage;
identifying whether the display screen of the hardware equipment is a self-luminous display screen or not according to the identifier of the hardware equipment of the webpage;
if the display screen of the hardware equipment is a self-luminous display screen, acquiring a static image displayed on the webpage according to the HTML file, wherein the preset user interaction behavior enables the same position of the static image on the self-luminous display screen to be kept for more than a first time threshold, and the animation main body of the self-defined animation style corresponding to the preset user interaction behavior is the static image,
the webpage comprises any one or more of the following areas:
a sub dynamic region that displays a static image switched between static display and dynamic display, the sub dynamic region having a first state and a second state, the sub dynamic region being in the first state when the static image is statically displayed in the sub dynamic region, the sub dynamic region being in the second state when the static image is dynamically displayed in the sub dynamic region as the animation body, the sub dynamic region moving with movement of the animation body when in the second state;
a dynamic region displaying non-static web content.
10. An electronic device, characterized in that the electronic device comprises:
a processor;
storage medium having stored thereon a computer program which, when executed by the processor, performs the method of any of claims 1 to 8.
11. A storage medium, characterized in that the storage medium has stored thereon a computer program which, when being executed by a processor, performs the method according to any one of claims 1 to 8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810039831.8A CN108256062B (en) | 2018-01-16 | 2018-01-16 | Webpage animation implementation method and device, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810039831.8A CN108256062B (en) | 2018-01-16 | 2018-01-16 | Webpage animation implementation method and device, electronic equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN108256062A CN108256062A (en) | 2018-07-06 |
| CN108256062B true CN108256062B (en) | 2020-11-24 |
Family
ID=62741551
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810039831.8A Active CN108256062B (en) | 2018-01-16 | 2018-01-16 | Webpage animation implementation method and device, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108256062B (en) |
Families Citing this family (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109064527B (en) * | 2018-07-02 | 2023-10-31 | 武汉斗鱼网络科技有限公司 | Method and device for realizing dynamic configuration animation, storage medium and android terminal |
| CN110968378A (en) * | 2018-09-29 | 2020-04-07 | 北京字节跳动网络技术有限公司 | GIF animation operation method, device, electronic equipment and storage medium |
| CN111064986B (en) * | 2018-10-17 | 2021-10-26 | 腾讯科技（深圳）有限公司 | Animation data sending method with transparency, animation data playing method and computer equipment |
| CN110166842B (en) | 2018-11-19 | 2020-10-16 | 深圳市腾讯信息技术有限公司 | Video file operation method and device and storage medium |
| CN112418902A (en) * | 2020-06-16 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Multimedia synthesis method and system based on webpage |
| CN114139083B (en) * | 2022-01-06 | 2023-03-14 | 北京百度网讯科技有限公司 | Webpage rendering method and device and electronic equipment |
| CN115035218B (en) * | 2022-08-11 | 2022-11-01 | 湖南湘生网络信息有限公司 | Interactive animation production method and device, computer equipment and storage medium |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130086463A1 (en) * | 2011-09-30 | 2013-04-04 | Microsoft Corporation | Decomposing markup language elements for animation |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| CN106294501A (en) * | 2015-06-09 | 2017-01-04 | 腾讯科技（深圳）有限公司 | web animation effect display method and device |
| CN107451163A (en) * | 2016-06-01 | 2017-12-08 | 北京京东尚科信息技术有限公司 | A kind of cartoon display method and device |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777315A (en) * | 2009-01-13 | 2010-07-14 | 深圳Tcl新技术有限公司 | Method for avoiding image retention of liquid crystal display |
| CN105786417B (en) * | 2014-12-19 | 2019-01-25 | 阿里巴巴集团控股有限公司 | A kind of dynamic display method of static images, device and equipment |
-
2018
- 2018-01-16 CN CN201810039831.8A patent/CN108256062B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20130086463A1 (en) * | 2011-09-30 | 2013-04-04 | Microsoft Corporation | Decomposing markup language elements for animation |
| CN106294501A (en) * | 2015-06-09 | 2017-01-04 | 腾讯科技（深圳）有限公司 | web animation effect display method and device |
| CN104933142A (en) * | 2015-06-18 | 2015-09-23 | 北京奇虎科技有限公司 | Animation display method and device |
| CN107451163A (en) * | 2016-06-01 | 2017-12-08 | 北京京东尚科信息技术有限公司 | A kind of cartoon display method and device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN108256062A (en) | 2018-07-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108256062B (en) | Webpage animation implementation method and device, electronic equipment and storage medium | |
| US10055507B2 (en) | Infinite scrolling | |
| US8448074B2 (en) | Method and apparatus for providing portioned web pages in a graphical user interface | |
| US8266522B2 (en) | Method and device for temporally displaying advertising content on a webpage | |
| US8453051B1 (en) | Dynamic display dependent markup language interface | |
| US9448977B2 (en) | Website blueprint generation and display algorithms to reduce perceived web-page loading time | |
| CN108255923B (en) | Image display method and device and electronic device | |
| WO2018126899A1 (en) | Method and device for displaying video interface | |
| US10319112B2 (en) | Extracting color schemes of pages written in a markup language | |
| US9886465B2 (en) | System and method for rendering of hierarchical data structures | |
| US9430808B2 (en) | Synchronization points for state information | |
| EP3008697B1 (en) | Coalescing graphics operations | |
| CN110909274A (en) | Page browsing method and device and electronic equipment | |
| AU2016205616A1 (en) | Method of displaying content and electronic device implementing same | |
| CN108021366B (en) | Interface animation realization method and device, electronic equipment and storage medium | |
| US9100697B1 (en) | Intelligent full window web browser transparency | |
| CN112367295B (en) | Plug-in display method and device, storage medium and electronic equipment | |
| CN110971955A (en) | Page processing method and device, electronic equipment and storage medium | |
| US11120099B2 (en) | Rendering a web element in a web page | |
| CN110929186B (en) | Client, information display method, electronic device and medium | |
| JP6699730B2 (en) | Drawing data generation program, drawing data generation device, and drawing data generation method | |
| US20160147741A1 (en) | Techniques for providing a user interface incorporating sign language | |
| KR20090128733A (en) | Method and system for providing webpage data | |
| CN114327167A (en) | Resource object display method and device, electronic equipment and storage medium | |
| CN110662118A (en) | Bullet screen loading method and system, electronic equipment and medium |
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 |