A page-based visual effect creation method, system, device and medium

Abstract

The application provides a page-based visual effect creation method, system, device and medium, and belongs to the technical field of Internet. The method comprises the following steps: obtaining a special effect attribute value of a visual effect to be created configured by a user; obtaining a running environment of a web page corresponding to the visual effect to be created; determining a target image recognition interface according to the running environment; analyzing the special effect attribute value of the visual effect to be created according to the target image recognition interface, and generating a rendering instruction; and calling the target image recognition interface to process the rendering instruction, so as to render and draw the visual effect to be created on the web page. The application solves the problems of complex process of creating a visual effect, large file size occupied by the visual effect and high development cost.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of Internet, and particularly relates to a page-based visual effect creation method, system, device and medium. BACKGROUND

[0002] A common H5 (HTML5) page marketing activity visual effect creation scheme can adopt a Graphics Interchange Format (GIF) based implementation scheme, which relies on a UI (interface) designer to design visual effects frame by frame. If the process of the visual effect is relatively complex, the final GIF dynamic picture file size will be large, which is not conducive to downloading and displaying on a mobile phone.

[0003] A CSS (Cascading Style Sheet) animation and JavaScript DOM animation based implementation scheme can also be adopted, but only relatively simple and single visual effects can be implemented, such as rotation, displacement and scaling of coordinate positions and their own sizes, and color changes.

[0004] An image recognition interface based rendering can also be adopted, but the development cost is high, different codes need to be developed on devices using different image recognition interfaces, and multiple codes need to be developed for the same visual effect. SUMMARY

[0005] The main purpose of the embodiments of the present application is to provide a page-based visual effect creation method, system, device and medium, which solves the problems of complex process of creating visual effects, large file size occupied by visual effects, and high development cost.

[0006] To achieve the above purpose, a first aspect of the embodiments of the present application provides a page-based visual effect creation method, which comprises:

[0007] Obtaining a visual effect attribute value of a visual effect to be created configured by a user;

[0008] Obtaining a running environment of a web page corresponding to the visual effect to be created;

[0009] Determining a target image recognition interface according to the running environment;

[0010] Analyzing the visual effect attribute value of the visual effect to be created according to the target image recognition interface to generate a rendering instruction;

[0011] Calling the target image recognition interface to process the rendering instruction to render and draw the visual effect to be created on the web page.

[0012] In some embodiments, the effect attribute value of the visual effect to be created configured by the user comprises one of:

[0013] According to the setting operation of the user on the effect attribute value of the newly created visual effect in the visual effect attribute configuration page, the effect attribute value of the visual effect to be created configured by the user is obtained;

[0014] According to the modification operation of the user on the saved visual effect attribute value in the visual effect attribute configuration page, the effect attribute value of the visual effect to be created configured by the user is obtained.

[0015] In some embodiments, after obtaining the effect attribute value of the visual effect to be created configured by the user, the method further comprises:

[0016] In response to the save instruction of the user, the effect attribute value of the visual effect to be created is saved.

[0017] In some embodiments, the effect attribute value comprises a display attribute value, an action attribute value, and a time attribute value, the display attribute value represents color change, the action attribute value represents dynamic change mode, and the time attribute value represents dynamic change duration.

[0018] In some embodiments, the effect attribute value of the visual effect to be created is in a text format; and the generating of the rendering instruction according to the parsing of the effect attribute value of the visual effect to be created by the target image recognition interface comprises:

[0019] Obtaining a key value of a preset keyword from the text of the effect attribute value of the visual effect to be created;

[0020] Generating a rendering instruction according to the key value of the preset keyword;

[0021] The preset keyword comprises a display attribute keyword, an action attribute keyword, and a time attribute keyword.

[0022] In some embodiments, the image recognition interface comprises a modern image recognition interface and a compatible image recognition interface; and the determining of the target image recognition interface according to the running environment comprises:

[0023] If the running environment supports calling the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface;

[0024] If the running environment does not support calling the modern image recognition interface, the compatible image recognition interface is determined as the target image recognition interface.

[0025] In some embodiments, the obtaining of the running environment of the web page corresponding to the visual effect to be created comprises:

[0026] determine a web browser type and an operating system type corresponding to the web page;

[0027] obtain the running environment according to the web browser type and the operating system type corresponding to the web page.

[0028] To achieve the above object, a second aspect of the embodiment of the present application provides a page-based visual effect creation system, which comprises:

[0029] An effect attribute value acquisition module is configured to acquire an effect attribute value of a visual effect to be created configured by a user.

[0030] A running environment acquisition module is configured to acquire a running environment of a web page corresponding to the visual effect to be created.

[0031] An image recognition interface determination module is configured to determine a target image recognition interface according to the running environment.

[0032] A rendering instruction generation module is configured to parse the effect attribute value of the visual effect to be created according to the target image recognition interface, and generate a rendering instruction.

[0033] A rendering and drawing module is configured to call the target image recognition interface to process the rendering instruction, so as to render and draw the visual effect to be created on the web page.

[0034] To achieve the above object, a third aspect of the embodiment of the present application provides an electronic device, which comprises:

[0035] at least one memory;

[0036] at least one processor;

[0037] at least one computer program;

[0038] The at least one computer program is stored in the at least one memory, and the at least one processor executes the at least one computer program to implement the page-based visual effect creation method of the first aspect.

[0039] To achieve the above object, a fourth aspect of the embodiment of the present application provides a storage medium, which is a computer readable storage medium, and stores a computer program, wherein the computer program is used to make a computer execute the page-based visual effect creation method of the first aspect.

[0040] The application provides a page-based visual effect creation method, system, device and medium. In order to reduce the file size occupied by the visual effect, the application obtains a visual effect attribute value of a visual effect to be created configured by a user, and creates the visual effect to be created based on the visual effect attribute value. In order to successfully render and draw the visual effect to be created on a web page, the application obtains a running environment of a web page corresponding to the visual effect to be created, determines a target image recognition interface according to the running environment, and the target image recognition interface is an image recognition interface type supported by the running environment of the web page corresponding to the visual effect to be created. Therefore, the application can analyze the visual effect attribute value of the visual effect to be created according to the target image recognition interface, generate a rendering instruction, call the target image recognition interface to process the rendering instruction, and render and draw the visual effect to be created on the web page. The application can quickly create the visual effect to be created by calling the target image recognition interface corresponding to the running environment of the web page corresponding to the visual effect to be created and analyzing the visual effect attribute value of the visual effect to be created, thereby avoiding high cost of directly developing the visual effect based on the image recognition interface, and solving the problems of complex process of creating the visual effect, large file size occupied by the visual effect, and high development cost. BRIEF DESCRIPTION OF DRAWINGS

[0041] Figure 1 is a flowchart of a page-based visual effect creation method provided by an embodiment of the application;

[0042] Figure 2 is a flowchart of step S100 in Figure 1

[0043] Figure 3 is a flowchart of step S400 in Figure 1

[0044] Figure 4 is a flowchart of step S300 in Figure 1

[0045] Figure 5 is a flowchart of step S200 in Figure 1

[0046] Figure 6 is a structural schematic diagram of a page-based visual effect creation system provided by an embodiment of the application;

[0047] Figure 7 is a hardware structural schematic diagram of an electronic device provided by an embodiment of the application. DETAILED DESCRIPTION

[0048] ​​​​In order to make the purposes, technical solutions and advantages of the present application clearer, the present application will be further described in detail below with reference to the drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and not to limit the present application.

[0049] It should be noted that although the functional modules are divided in the device schematic diagram and the logical order is shown in the flowchart, in some cases, the steps shown or described can be performed in a manner different from the module division in the device or the order in the flowchart. The terms "first", "second", and the like in the specification and claims and the above-described drawings are used to distinguish similar objects, and do not necessarily describe a specific order or sequence.

[0050] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which the present application belongs. The terms used herein are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0051] The current common H5 (HTML5) page marketing activity visual effect creation scheme can adopt a Graphics Interchange Format (GIF) based implementation scheme, which relies on UI (interface) designers to design visual effects frame by frame. If the process of the visual effect is relatively complex, it will result in a relatively large GIF dynamic picture file size, which is not conducive to downloading and displaying on a mobile phone. A CSS (Cascading Style Sheet) animation and JavaScript DOM animation based implementation scheme can also be used, but only relatively simple and single visual effects can be implemented, such as rotation, displacement and scaling of coordinate positions and their own sizes, and color changes. An image recognition interface based rendering can also be used, but the development cost is relatively high, different codes need to be developed for different image recognition interface devices, and multiple codes need to be developed for the same visual effect.

[0052] Based on this, the embodiments of the present application provide a page based visual effect creation method, system, device and medium, which can make the process of creating visual effects simple, and the file size occupied by the visual effects is relatively small, and the development cost can also be reduced.

[0053] The page based visual effect creation method, system, device and medium provided by the embodiments of the present application are specifically described by the following embodiments. First, a page based visual effect creation method in the embodiments of the present application is described.

[0054] The embodiment of the application provides a page-based visual effect creation method, and relates to the technical field of Internet. The page-based visual effect creation method provided by the embodiment of the application can be applied to a terminal, can also be applied to a server end, and can be software running in the terminal or the server end. In some embodiments, the terminal can be a smart phone, a tablet computer, a notebook computer, a desktop computer or the like; the server end can be configured as a physical server, can also be configured as a server cluster or a distributed system formed by a plurality of physical servers, and can also be configured as a cloud server providing basic cloud computing services such as cloud service, cloud database, cloud computing, cloud function, cloud storage, network service, cloud communication, middleware service, domain name service, security service, CDN and big data and artificial intelligence platform; the software can be an application for implementing the page-based visual effect creation method, and the like, but is not limited to the above forms.

[0055] The application can be used in many general or specific computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, and the like. The application can be described in the general context of computer-executable instructions executed by a computer, such as a program module. Generally, program modules include routines, programs, objects, components, data structures, and the like that perform specific tasks or implement specific abstract data types. The application can also be practiced in a distributed computing environment in which tasks are performed by remote processing devices connected by a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media, including storage devices.

[0056] Please refer to Figure 1 , Figure 1 is an optional flowchart of the page-based visual effect creation method provided by the embodiment of the application, Figure 1 The method in the embodiment of the application can specifically include but is not limited to steps S100 to S500.

[0057] Step S100, obtaining an effect attribute value of a visual effect to be created configured by a user;

[0058] Step S200, obtaining a running environment of a web page corresponding to the visual effect to be created;

[0059] Step S300, determining a target image recognition interface according to the running environment;

[0060] Step S400, parsing the effect attribute value of the visual effect to be created according to the target image recognition interface, and generating a rendering instruction.

[0061] In step S500, a target image recognition interface is called to process the rendering instruction, so as to render and draw the to-be-created visual effect on the web page.

[0062] In steps S100-S500 of some embodiments, in order to reduce the file size occupied by the visual effect, the effect attribute value of the to-be-created visual effect configured by the user is obtained, and the to-be-created visual effect is created based on the effect attribute value. In order to successfully render and draw the to-be-created visual effect on the web page, the running environment of the web page corresponding to the to-be-created visual effect is obtained, and a target image recognition interface is determined according to the running environment. The target image recognition interface is an image recognition interface type supported by the running environment of the web page corresponding to the to-be-created visual effect, so that the effect attribute value of the to-be-created visual effect can be parsed according to the target image recognition interface, a rendering instruction is generated, and the target image recognition interface is called to process the rendering instruction, so as to render and draw the to-be-created visual effect on the web page. By calling the target image recognition interface corresponding to the running environment of the web page corresponding to the to-be-created visual effect, the effect attribute value of the to-be-created visual effect is parsed, so that the to-be-created visual effect is quickly created, the high cost of directly developing the visual effect based on the image recognition interface is avoided, and the problems of complex process of creating the visual effect, large file size occupied by the visual effect, and high development cost are solved.

[0063] In step S100 of some embodiments, in order to reduce the file size occupied by the visual effect, the effect attribute value of the to-be-created visual effect configured by the user is obtained. Specifically, the effect attribute value of the to-be-created visual effect configured by the user can be obtained through the setting operation of the user on the effect attribute value of the newly created visual effect. The effect attribute value of the to-be-created visual effect configured by the user can also be obtained through the modification operation of the user on the effect attribute value of the saved visual effect. The effect attribute value includes but is not limited to display attribute value, action attribute value, and time attribute value. By setting the display attribute value, action attribute value, and time attribute value, the smoke visual effect, flame visual effect, and light point visual effect close to the real scene and rich in expression can be realized. The traditional method of creating a visual effect by using CSS animation and JavaScript DOM animation can only realize relatively simple and single visual effects, such as rotation, displacement, and scaling of coordinate position and self size, and color change, etc. The visual effect created by the present application based on the effect attribute value not only occupies a smaller file size, but also realizes a visual effect close to the real scene and rich in expression, and the creation process is relatively simple.

[0064] In step S200 of some embodiments, the running environment mainly includes a web browser type and an operating system type. The web browser type can be, for example, an IE browser, an Edge browser, a Chrome browser, a Safari browser, an Opera browser, etc. The operating system type can be, for example, an Android operating system, an ios operating system, etc.

[0065] In step S300 of some embodiments, different running environments (i.e., web browser types and operating system types) support different image recognition interfaces. In order to avoid the high cost of directly developing visual effects based on image recognition interfaces, different image recognition interfaces are packaged in advance. Only the support of different image recognition interfaces by the corresponding running environment is needed to call the target image recognition interface that can be supported, and the visual effect to be created is rendered and drawn on the web page. The image recognition interface includes a modern image recognition interface and a compatible image recognition interface. Both the modern image recognition interface and the compatible image recognition interface are packaged in advance. According to the support of the modern image recognition interface by different running environments, the target image recognition interface is determined from the modern image recognition interface and the compatible image recognition interface. If the running environment supports the calling of the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface. If the running environment does not support the calling of the modern image recognition interface, the compatible image recognition interface is determined as the target image recognition interface. Most running environments support the modern image recognition interface, and only a small part of running environments support the compatible image recognition interface. If the running environment of the web page supports the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface, so that the visual effect to be created is rendered and drawn on the web page.

[0066] It should be noted that the modern image recognition interface and the compatible image recognition interface are both prior art known to those skilled in the art, and their uses will not be specifically introduced here. The way to determine whether the running environment supports the calling of the modern image recognition interface can be to make a corresponding table in advance, and then determine whether the running environment of the web page supports the calling of the modern image recognition interface through the corresponding table. However, the specific way to determine whether the running environment supports the calling of the modern image recognition interface cannot be regarded as a limitation of the present application.

[0067] In steps S400 and S500 of some embodiments, the effect of the visual effect to be created is obtained by analyzing the effect attribute value of the visual effect to be created according to the target image recognition interface, so as to generate a rendering instruction. The rendering instruction can be processed after the image recognition interface is called, so as to successfully render and draw the visual effect to be created on the web page, thereby completing the creation of the visual effect of the web page.

[0068] Please refer toFigure 2 , Figure 2 is a flowchart of a specific method of step S100 of some embodiments of the present application. In some embodiments of the present application, step S100 specifically includes but is not limited to step S110 or step S120, which will be described below in combination with Figure 2 The two steps will be described in detail.

[0069] Step S110, according to the setting operation of the user on the effect attribute value of the newly created visual effect in the visual effect attribute configuration page, obtaining the effect attribute value of the visual effect to be created configured by the user;

[0070] Step S120, according to the modification operation of the user on the effect attribute value of the saved visual effect in the visual effect attribute configuration page, obtaining the effect attribute value of the visual effect to be created configured by the user.

[0071] In step S110 of some embodiments, first enter the visual effect attribute configuration page, create a creation task, and obtain the effect attribute value of the visual effect to be created configured by the user through the setting operation of the user. Specifically, set the key value of the preset keyword in the effect attribute value.

[0072] In step S120 of some embodiments, first enter the visual effect attribute configuration page, if the visual effect to be created is saved in the visual effect attribute configuration page, directly open the saved visual effect, and obtain the effect attribute value of the visual effect to be created configured by the user through the modification operation of the user on the saved visual effect, avoiding repeated creation of visual effects and saving creation time. Specifically, modify the key value of the preset keyword in the effect attribute value.

[0073] It should be noted that the visual effect attribute configuration page can be a specific background management system or an H5 web page, and cannot be regarded as a limitation of the present application. The background management system also uses H5 web development, which can realize the analysis of the effect attribute value of the visual effect of the H5 web page.

[0074] In some embodiments of the present application, after step S100, a page-based visual effect creation method of the present application further includes: in response to a save instruction of the user, saving the effect attribute value of the visual effect to be created. In some embodiments, the effect attribute value of the visual effect to be created can be saved for subsequent direct use or modification based on the saved visual effect to be created, avoiding repeated creation of visual effects and shortening the time of creating visual effects.

[0075] It should be noted that the effect attribute value of the visual effect to be created can also not be saved, and the visual effect to be created can be used once, which is specifically selected according to the actual needs of the user, and cannot be regarded as a limitation of the present application.

[0076] In some embodiments of the present application, the special effect attribute value includes a display attribute value, an action attribute value, and a time attribute value, the display attribute value represents a color change, the action attribute value represents a dynamic change mode, and the time attribute value represents a dynamic change duration.

[0077] In some embodiments, in order to reduce the file size occupied by the visual effect, the special effect attribute value of the visual effect to be created configured by the user is obtained, the special effect attribute value includes a display attribute value, an action attribute value, and a time attribute value, the display attribute value represents a color change, the action attribute value represents a dynamic change mode, and the time attribute value represents a dynamic change duration. Specifically, the display attribute value includes but is not limited to: an initial color color, a red value variable range redRange, a green value variable range greenRange, a blue value variable range blueRange, a transparent value variable range alphaRange, a red value change speed redSpeed, a green value change speed greenSpeed, a blue value change speed blueSpeed, a transparent value change speed alphaSpeed, a scaling factor scale, a scaling factor variable range scaleRange, a size magnification change mode magnificationFilter (linear, fast first and slow later, etc.), and a size minification change mode minificationFilter (linear, fast first and slow later, etc.).

[0078] The action attribute value includes but is not limited to: a rotation speed spin, a rotation speed variable range spinRange, an emission latitude emissionLatitude, an emission longitude emissionLongitude, an emission latitude-longitude variable range emissionRange, a red value change speed redSpeed, a green value change speed greenSpeed, a blue value change speed blueSpeed, a transparent value change speed alphaSpeed, a scaling factor scale, a scaling factor variable range scaleRange, a size magnification change mode magnificationFilter (linear, fast first and slow later, etc.).

[0079] The time attribute value includes but is not limited to: a lifetime lifetime, a lifetime variable range lifetimeRange, a generation frequency birthRate, a scaling factor change speed scaleSpeed, a movement speed velocity, a movement speed variable range velocityRange, an X-axis movement acceleration xAcceleration, a Y-axis movement acceleration yAcceleration, and a Z-axis movement acceleration zAcceleration.

[0080] In some embodiments, by setting the display attribute value, the action attribute value, and the time attribute value, a smoke visual effect, a flame visual effect, a light point visual effect, and the like, which are rich in expressiveness and close to real scenes, can be realized. The traditional way of creating a visual effect by using CSS animation and JavaScript DOM animation can only realize relatively simple and single visual effects, such as rotation, displacement, and scaling of the coordinate position and the size of the self, and color change, and the like. The present application creates a visual effect based on an effect attribute value, occupies a smaller file size, can realize a visual effect which is rich in expressiveness and close to a real scene, and the creation process is relatively simple.

[0081] Please refer to Figure 3 , Figure 3 is a flowchart of a specific method of step S400 of some embodiments of the present application. In some embodiments of the present application, the effect attribute value of the visual effect to be created is in a text format, and step S400 specifically includes but is not limited to step S410 and step S420, which will be described below in combination with Figure 3 The two steps will be described in detail.

[0082] Step S410, obtaining a key value of a preset keyword from the text of the effect attribute value of the visual effect to be created;

[0083] Step S420, generating a rendering instruction according to the key value of the preset keyword; the preset keyword includes a display attribute keyword, an action attribute keyword, and a time attribute keyword.

[0084] In steps S410 and S420 of some embodiments, the effect attribute value of the visual effect to be created is in a text format, and the file size occupied by the text format is smaller than that of a GIF dynamic picture. By directly setting the key value of the preset keyword in the text of the effect attribute value of the visual effect to be created, the rendering instruction is generated by analyzing the key value of each preset keyword, so as to render and draw the required visual effect to be created on the web page. The creation process of the visual effect to be created is simple, and the file size occupied is small.

[0085] In particular, the display attribute keywords include, but are not limited to: initial color color, red value variable range redRange, green value variable range greenRange, blue value variable range blueRange, transparency value variable range alphaRange, red value change speed redSpeed, green value change speed greenSpeed, blue value change speed blueSpeed, transparency value change speed alphaSpeed, scale factor scale, scale factor variable range scaleRange, size magnification change mode magnificationFilter (linear, fast first and slow later, etc.), size minification change mode minificationFilter (linear, fast first and slow later, etc.).

[0086] The action attribute keywords include, but are not limited to: rotation speed spin, rotation speed variable range spinRange, emission latitude emissionLatitude, emission longitude emissionLongitude, emission latitude and longitude variable range emissionRange, red value change speed redSpeed, green value change speed greenSpeed, blue value change speed blueSpeed, transparency value change speed alphaSpeed, scale factor scale, scale factor variable range scaleRange, size magnification change mode magnificationFilter (linear, fast first and slow later, etc.).

[0087] The time attribute keywords include, but are not limited to: lifetime lifetime, lifetime variable range lifetimeRange, generation frequency birthRate, scale factor change speed scaleSpeed, movement speed velocity, movement speed variable range velocityRange, X-axis movement acceleration xAcceleration, Y-axis movement acceleration yAcceleration, Z-axis movement acceleration zAcceleration.

[0088] Please refer to Figure 4 , Figure 4 is a flowchart of the specific method of step S300 of some embodiments of the present application. In some embodiments of the present application, the image recognition interface includes: a modern image recognition interface and a compatible image recognition interface, and step S300 specifically includes, but is not limited to, step S310 and step S320, which will be described below in combination with Figure 4 The two steps will be described in detail.

[0089] Step S310, if the running environment supports calling the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface.

[0090] Step S320, if the running environment does not support calling the modern image recognition interface, the compatible image recognition interface is determined as the target image recognition interface.

[0091] In steps S310 and S320 of some embodiments, the modern image recognition interface and the compatible image recognition interface are packaged in advance, and the target image recognition interface is determined from the modern image recognition interface and the compatible image recognition interface according to the support of the modern image recognition interface by different running environments. If the running environment supports calling the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface, and if the running environment does not support calling the modern image recognition interface, the compatible image recognition interface is determined as the target image recognition interface. Most running environments support the modern image recognition interface, and only a small part of running environments support only the compatible image recognition interface. If the running environment of the web page supports the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface, so that the to-be-created visual special effect is rendered and drawn on the web page.

[0092] It should be noted that the modern image recognition interface and the compatible image recognition interface are prior art known to those skilled in the art, and their uses will not be specifically introduced here. The way to determine whether the running environment supports calling the modern image recognition interface can be to pre-establish a corresponding table, and then to determine whether the running environment of the web page supports calling the modern image recognition interface through the corresponding table, but the specific way to determine whether the running environment supports calling the modern image recognition interface cannot be regarded as a limitation of the present application.

[0093] Please refer to Figure 5 , Figure 5 is a flowchart of the specific method of step S200 of some embodiments of the present application. In some embodiments of the present application, step S200 specifically includes but is not limited to step S210 and step S220, which will be described in detail below. Figure 5 .

[0094] Step S210, determine the web browser type and operating system type corresponding to the web page;

[0095] Step S220, obtain the running environment according to the web browser type and operating system type corresponding to the web page.

[0096] In step S210 and step S220 of some embodiments, the web browser type can be specifically IE browser, Edge browser, Chrome browser, Safari browser, Opera browser, etc. The operating system type can be specifically Android operating system, ios operating system, etc. Both the operating system type and the web browser type need to support calling the modern image recognition interface, so as to confirm the modern image recognition interface as the target image recognition interface, thereby rendering and drawing the to-be-created visual effect on the web page.

[0097] Through the above description, in order to better reflect the advantages of the page-based visual effect creation method of the embodiments of the present application, a specific example is used to illustrate that the page-based visual effect creation method of the embodiments of the present application specifically includes but is not limited to the following steps:

[0098] Step S110, obtaining the visual effect attribute value of the to-be-created visual effect configured by the user according to the setting operation of the user on the visual effect attribute value of the newly created visual effect in the visual effect attribute configuration page; or step S120, obtaining the visual effect attribute value of the to-be-created visual effect configured by the user according to the modification operation of the user on the visual effect attribute value of the saved visual effect in the visual effect attribute configuration page;

[0099] Step S101, saving the visual effect attribute value of the to-be-created visual effect in response to the save instruction of the user;

[0100] Step S210, determining the web browser type and the operating system type corresponding to the web page;

[0101] Step S220, obtaining the running environment according to the web browser type and the operating system type corresponding to the web page;

[0102] Step S310, if the running environment supports calling the modern image recognition interface, determining the modern image recognition interface as the target image recognition interface;

[0103] Step S320, if the running environment does not support calling the modern image recognition interface, determining the compatible image recognition interface as the target image recognition interface;

[0104] Step S410, obtaining the key value of the preset keyword from the text of the visual effect attribute value of the to-be-created visual effect;

[0105] Step S420, generating a rendering instruction according to the key value of the preset keyword; the preset keyword includes a display attribute keyword, an action attribute keyword, and a time attribute keyword;

[0106] In step S500, a target image recognition interface is called to process the rendering instruction, so as to render and draw the to-be-created visual effect on the web page.

[0107] The page-based visual effect creation method provided in the embodiments of the present application acquires the effect attribute value of the to-be-created visual effect configured by the user, and creates the to-be-created visual effect based on the effect attribute value, so as to reduce the file size occupied by the visual effect. In order to successfully render and draw the to-be-created visual effect on the web page, the running environment of the web page corresponding to the to-be-created visual effect is acquired, and a target image recognition interface is determined according to the running environment. The target image recognition interface is an image recognition interface type supported by the running environment of the web page corresponding to the to-be-created visual effect, so that the effect attribute value of the to-be-created visual effect can be parsed according to the target image recognition interface, a rendering instruction is generated, and the target image recognition interface is called to process the rendering instruction, so as to render and draw the to-be-created visual effect on the web page. By calling the target image recognition interface corresponding to the running environment of the web page corresponding to the to-be-created visual effect, the effect attribute value of the to-be-created visual effect is parsed, so that the to-be-created visual effect is quickly created, the high cost of directly developing the visual effect based on the image recognition interface is avoided, and the problems of complex process of creating the visual effect, large file size occupied by the visual effect, and high development cost are solved.

[0108] Please refer to Figure 6 The embodiments of the present application also provide a page-based visual effect creation system, which can implement the above-mentioned page-based visual effect creation method. The system comprises an effect attribute value acquisition module 610, a running environment acquisition module 620, an image recognition interface determination module 630, a rendering instruction generation module 640, and a rendering and drawing module 650.

[0109] The effect attribute value acquisition module is configured to acquire the effect attribute value of the to-be-created visual effect configured by the user.

[0110] The running environment acquisition module is configured to acquire the running environment of the web page corresponding to the to-be-created visual effect.

[0111] The image recognition interface determination module is configured to determine the target image recognition interface according to the running environment.

[0112] The rendering instruction generation module is configured to parse the effect attribute value of the to-be-created visual effect according to the target image recognition interface, and generate a rendering instruction.

[0113] The rendering and drawing module is configured to call the target image recognition interface to process the rendering instruction, so as to render and draw the to-be-created visual effect on the web page.

[0114] In some embodiments, in order to reduce the file size occupied by the visual effect, the effect attribute value of the visual effect to be created configured by the user is obtained, specifically, the effect attribute value of the visual effect to be created configured by the user can be obtained through the setting operation of the user on the effect attribute value of the newly created visual effect. The effect attribute value of the visual effect to be created configured by the user can also be obtained through the modification operation of the user on the effect attribute value of the saved visual effect. The effect attribute value includes but is not limited to display attribute value, action attribute value and time attribute value. Through the setting of the display attribute value, the action attribute value and the time attribute value, the smoke visual effect, the flame visual effect and the light point visual effect close to the real scene and rich in expression can be realized. The traditional method of creating visual effects by using CSS animation and JavaScript DOM animation can only realize relatively simple and single visual effects, such as rotation, displacement and scaling of coordinate position and self size, and color change, etc. The present application creates visual effects based on effect attribute values, not only occupies smaller file size, but also realizes visual effects close to real scene and rich in expression, and the creation process is relatively simple.

[0115] The running environment mainly includes a web browser type and an operating system type. The web browser type can be specifically IE browser, Edge browser, Chrome browser, Safari browser, Opera browser, etc. The operating system type can be specifically Android operating system, ios operating system, etc. It should be noted that the acquisition method of the running environment is not limited in the present application.

[0116] Different running environments (i.e. web browser types and operating system types) support different image recognition interfaces, in order to avoid high cost of directly developing visual effects based on image recognition interfaces, different image recognition interfaces are packaged in advance, and only the support of different image recognition interfaces by the corresponding running environment is needed to call the target image recognition interface that can be supported, and the to-be-created visual effect is rendered and drawn on the web page. The image recognition interface includes a modern image recognition interface and a compatible image recognition interface, both of which are packaged in advance, and the target image recognition interface is determined from the modern image recognition interface and the compatible image recognition interface according to the support of the modern image recognition interface by different running environments. If the running environment supports calling the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface, and if the running environment does not support calling the modern image recognition interface, the compatible image recognition interface is determined as the target image recognition interface. Most running environments support the modern image recognition interface, and only a small number of running environments support the compatible image recognition interface. If the running environment of the web page supports the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface, so that the to-be-created visual effect is rendered and drawn on the web page.

[0117] It should be noted that the modern image recognition interface and the compatible image recognition interface are both prior art known to those skilled in the art, and their uses will not be specifically introduced here. The way to determine whether the running environment supports calling the modern image recognition interface can be to pre-establish a corresponding table, and then determine whether the running environment of the web page supports calling the modern image recognition interface through the corresponding table, but the specific way to determine whether the running environment supports calling the modern image recognition interface cannot be regarded as a limitation of the present application.

[0118] According to the effect attribute value of the to-be-created visual effect, the effect of the to-be-created visual effect that needs to be created is obtained, and a rendering instruction is generated, which can be processed after calling the image recognition interface to successfully render and draw the to-be-created visual effect on the web page, so as to complete the creation of the visual effect of the web page.

[0119] The page-based visual effect creation system provided by the embodiments of the present application can implement the page-based visual effect creation method described above. In order to reduce the file size occupied by the visual effect, the visual effect attribute value of the visual effect to be created configured by the user is obtained, and the visual effect to be created is created based on the visual effect attribute value. In order to successfully render and draw the visual effect to be created on the web page, the running environment of the web page corresponding to the visual effect to be created is obtained, the target image recognition interface is determined according to the running environment, the target image recognition interface is an image recognition interface type supported by the running environment of the web page corresponding to the visual effect to be created, so that the visual effect attribute value of the visual effect to be created can be parsed according to the target image recognition interface, a rendering instruction is generated, the target image recognition interface is called to process the rendering instruction, and the visual effect to be created is rendered and drawn on the web page. The embodiments of the present application call the target image recognition interface corresponding to the running environment of the web page corresponding to the visual effect to be created, and parse the visual effect attribute value of the visual effect to be created, so as to quickly create the visual effect to be created, avoid the high cost of directly developing the visual effect based on the image recognition interface, and solve the problems of complex process of creating the visual effect, large file size occupied by the visual effect, and high development cost.

[0120] The embodiments of the present application also provide an electronic device, which comprises at least one memory, at least one processor, and at least one computer program stored in the at least one memory, and the at least one processor executes the at least one computer program to implement the page-based visual effect creation method of any one of the embodiments described above. The electronic device can be any intelligent terminal including a tablet computer, a vehicle-mounted computer, etc.

[0121] Please refer to Figure 7 , Figure 7 The hardware structure of an electronic device of another embodiment is illustrated, which comprises:

[0122] The processor 710 can be implemented in the form of a general-purpose CPU (Central Processing Unit), a microprocessor, an ASIC (Application Specific Integrated Circuit), or one or more integrated circuits, etc., and is used to execute related programs to implement the technical solutions provided by the embodiments of the present application.

[0123] The memory 720 can be implemented in the form of a read-only memory (ROM), a static storage device, a dynamic storage device, or a random access memory (RAM), etc. The memory 720 can store an operating system and other application programs. When the technical solutions provided by the embodiments of the present application are implemented by software or firmware, the related program codes are stored in the memory 720 and are invoked and executed by the processor 710 to implement a page-based visual effect creation method according to an embodiment of the present application;

[0124] The input / output interface 730 is configured to realize information input and output.

[0125] The communication interface 740 is configured to realize communication interaction between the device and other devices. The communication can be realized by a wired manner (for example, a USB, a network cable, etc.) or a wireless manner (for example, a mobile network, WIFI, Bluetooth, etc.).

[0126] The bus 750 is configured to transmit information between various components (for example, the processor 710, the memory 720, the input / output interface 730, and the communication interface 740) of the device.

[0127] The processor 710, the memory 720, the input / output interface 730, and the communication interface 740 are connected to each other through the bus 750 to realize communication connection between the device.

[0128] The embodiments of the present application also provide a storage medium, which is a computer readable storage medium. The computer readable storage medium stores a computer program. The computer program is configured to enable a computer to execute the page-based visual effect creation method according to any one of the above embodiments.

[0129] The memory is a non-transitory computer readable storage medium, which can be used to store a non-transitory software program and a non-transitory computer executable program. In addition, the memory can include a high-speed random access memory and can also include a non-transitory memory, for example, at least one magnetic disk storage device, a flash memory device, or other non-transitory solid-state memory device. In some embodiments, the memory can optionally include a memory remotely arranged relative to the processor. These remote memories can be connected to the processor through a network. Examples of the network include but are not limited to the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof.

[0130] The embodiments described in the embodiments of the present application are used to more clearly illustrate the technical solutions of the embodiments of the present application and do not constitute a limitation on the technical solutions provided by the embodiments of the present application. Those skilled in the art can know that, with the evolution of technology and the appearance of new application scenarios, the technical solutions provided by the embodiments of the present application are also applicable to similar technical problems.

[0131] Those skilled in the art can understand that the technical solutions shown in the above embodiments are not limited to the embodiments of the present application, and can include more or fewer steps than the drawings, or combine certain steps, or different steps. Figures 1 to 5 The technical solutions shown in the above embodiments do not constitute a limitation on the embodiments of the present application, and can include more or fewer steps than the drawings, or combine certain steps, or different steps.

[0132] The device embodiments described above are only schematic, and units described as separate components can or can not be physically separate, i.e., can be located in one place, or can be distributed over multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the embodiments.

[0133] Those skilled in the art can understand that all or some of the steps in the above disclosed method, the functional modules / units in the system and the device can be implemented as software, firmware, hardware and their appropriate combinations.

[0134] The terms "first", "second", "third", "fourth" and the like used in the description of the present application and the above drawings, if any, are used to distinguish similar objects, and do not necessarily indicate a specific order or sequence. It should be understood that the data thus used can be interchanged under appropriate circumstances, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein. In addition, the terms "include" and "have" and any variations thereof are intended to cover non-exclusive inclusion, for example, a process, method, system, product or device including a series of steps or units does not necessarily limit to those steps or units clearly listed, but can include other steps or units not clearly listed or inherent to these processes, methods, products or devices.

[0135] It should be understood that in the present application, "at least one" means one or more, and "multiple" means two or more. "And / or" is used to describe the relationship between the associated objects, which means that there can be three relationships, for example, "A and / or B" can mean that there are three cases: only A, only B, and A and B at the same time, where A and B can be singular or plural. The character " / " generally represents an "or" relationship between the associated objects. "At least one of the following" or similar expressions means any combination of these items, including any combination of single or multiple items. For example, at least one of a, b or c, can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, and c can be single or multiple.

[0136] In several embodiments provided in the present application, it should be understood that the disclosed apparatus and method can be implemented by other manners. For example, the apparatus embodiments described above are merely illustrative, for example, the division of the above units is merely a logical function division, and actual implementation can have another division manner, for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the units or components shown or discussed can be indirect coupling or communication connection through some interfaces, apparatuses or units, and can be electrical, mechanical or other forms.

[0137] The units described above as separate components can or can not be physically separate, and the components shown as units can or can not be physical units, i.e., can be located in one place or can be distributed to a plurality of network units. Part or all of the units can be selected according to actual needs to achieve the purpose of the embodiment.

[0138] In addition, the functional units in each embodiment of the present application can be integrated in one processing unit, or each unit can be physically present separately, or two or more units can be integrated in one unit. The integrated unit can be realized in the form of hardware or in the form of a software functional unit.

[0139] If the integrated unit is realized in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the part of the prior art that makes a contribution or the whole or part of the technical solutions can be embodied in the form of a software product, which is stored in a storage medium and includes a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the method of each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and various program storage media.

[0140] The preferred embodiments of the embodiments of the present application are described above with reference to the accompanying drawings, but this does not limit the scope of the rights of the embodiments of the present application. Any modification, equivalent replacement and improvement made by those skilled in the art without departing from the scope and essence of the embodiments of the present application shall be within the scope of the rights of the embodiments of the present application.

Claims

1. A method for creating page-based visual effects, characterized in that, The method includes: Obtain the effect attribute values ​​configured by the user for the visual effect to be created. The effect attribute values ​​include display attribute values, action attribute values, and time attribute values. The display attribute values ​​represent color changes, the action attribute values ​​represent dynamic change methods, and the time attribute values ​​represent the duration of dynamic changes. Obtain the runtime environment of the webpage corresponding to the visual effect to be created; The target image recognition interface is determined based on the operating environment. The image recognition interface includes: a modern image recognition interface and a compatible image recognition interface. The effect attribute values ​​of the visual effect to be created are parsed according to the target image recognition interface to generate rendering instructions; The target image recognition interface is invoked to process the rendering instructions, so as to render and draw the visual effects to be created on the web page.

2. The method for creating page-based visual effects according to claim 1, characterized in that, The process of obtaining the effect attribute values ​​configured by the user for the visual effect to be created includes one of the following: Based on the user's settings of the effect attribute values ​​for the newly created visual effect in the visual effect attribute configuration page, the effect attribute values ​​configured by the user for the visual effect to be created are obtained. Based on the user's modifications to the saved visual effect attribute values ​​in the visual effect attribute configuration page, the user-configured visual effect attribute values ​​to be created are obtained.

3. The method for creating page-based visual effects according to claim 2, characterized in that, After obtaining the effect attribute values ​​of the visual effects to be created configured by the user, the process also includes: In response to the user's save command, the effect attribute values ​​of the visual effect to be created are saved.

4. The method for creating page-based visual effects according to claim 1, characterized in that, The effect attribute value of the visual effect to be created is in text format; The step of parsing the effect attribute values ​​of the visual effect to be created according to the target image recognition interface and generating rendering instructions includes: Obtain the key value of the preset keyword from the text of the effect attribute value of the visual effect to be created; Rendering instructions are generated based on the key values ​​of the preset keywords; The preset keywords include: display attribute keywords, action attribute keywords, and time attribute keywords.

5. The method for creating page-based visual effects according to claim 1, characterized in that, The step of determining the target image recognition interface based on the operating environment includes: If the operating environment supports calling the modern image recognition interface, the modern image recognition interface is determined as the target image recognition interface; If the operating environment does not support calling the modern image recognition interface, the compatible image recognition interface will be determined as the target image recognition interface.

6. The method for creating page-based visual effects according to claim 1, characterized in that, The step of obtaining the runtime environment of the webpage corresponding to the visual effect to be created includes: Determine the web browser type and operating system type corresponding to the web page; The operating environment is obtained based on the web browser type and operating system type corresponding to the web page.

7. A page-based visual effects creation system, characterized in that, The system includes: The special effects attribute value acquisition module is used to acquire the special effects attribute values ​​of the visual effects to be created configured by the user. The special effects attribute values ​​include display attribute values, action attribute values, and time attribute values. The display attribute values ​​represent color changes, the action attribute values ​​represent dynamic change methods, and the time attribute values ​​represent the duration of dynamic changes. The runtime environment acquisition module is used to acquire the runtime environment of the webpage corresponding to the visual effect to be created; The image recognition interface determination module is used to determine the target image recognition interface according to the operating environment. The image recognition interface includes: a modern image recognition interface and a compatible image recognition interface. The rendering instruction generation module is used to parse the effect attribute values ​​of the visual effect to be created based on the target image recognition interface and generate rendering instructions. The rendering and drawing module is used to call the target image recognition interface to process the rendering instructions, so as to render and draw the visual effects to be created on the web page.

8. An electronic device, characterized in that, include: At least one memory; At least one processor; At least one computer program; The at least one computer program is stored in the at least one memory, and the at least one processor executes the at least one computer program to perform: A method for creating page-based visual effects as described in any one of claims 1 to 6.

9. A storage medium, said storage medium being a computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that is used to cause the computer to execute: A method for creating page-based visual effects as described in any one of claims 1 to 6.

Images