A graphical interactive engine implementation method, device, equipment and storage medium

Abstract

This application relates to a graphical interactive engine implementation method, apparatus, device, and storage medium, belonging to the field of software engineering technology. By constructing a configurable general engine architecture and a Canvas-based rendering pipeline, this application effectively solves the problems of long development cycles, rigid animations, low performance, and poor compatibility in related technologies for graphical interactive engines. This solution decouples UI visuals from business logic, enabling operators to quickly customize interfaces and animations through configuration. The lightweight rendering mechanism based on Canvas ensures high-performance animation across platforms and devices, with stable frame rates and low memory usage, improving user experience and activity iteration efficiency.

Description

Technical Field

[0001] This application relates to the field of software engineering technology, and in particular to a method, apparatus, device and storage medium for implementing a graphical interactive engine. Background Technology

[0002] In industries such as ride-hailing, to enhance user activity and loyalty, operators frequently conduct various in-app lottery marketing activities, such as lucky draws and tic-tac-toe games. The related technical solutions generally adopt a DOM (Document Object Model) combined with CSS3 (an upgraded version of Cascading Style Sheets) animation approach, hard-coding a single lottery game. This approach has significant drawbacks: First, the game's scalability is poor; adding or switching games requires redeveloping the entire page and logic, resulting in long development cycles and high costs. Second, the user interface (UI) is deeply coupled with business logic; visual redesigns or layout adjustments require developers to modify code, which cannot be quickly completed through configuration. Third, animation control is rigid, making it difficult to flexibly adjust speed and easing effects through parameters, affecting the interactive experience. Finally, in WebView environments or on low-performance devices, complex DOM animations easily trigger layout reflow and style calculation overhead, leading to rendering stutters, high memory usage, and animation frame drops, thus reducing the user experience. Summary of the Invention

[0003] Therefore, it is necessary to provide a lightweight, efficient, and flexibly configurable graphical interactive engine implementation method, device, computer equipment, and storage medium to address the aforementioned technical problems.

[0004] Firstly, a method for implementing a graphical interactive engine is provided, the method comprising: In response to the graphical interaction engine creation request, the common logic of the graphical interaction process is determined based on the graphical interaction engine creation request; Based on the common logic of the graphical interaction process, construct an abstract base engine class; Instantiation and extension are performed based on the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The visual rendering process of the interactive form subclass is invoked, and the corresponding visual element model is generated based on the structured configuration data; The motion effect calculation process of the interactive form subclass is invoked and started. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visualization element model to generate a dynamic visualization interface.

[0005] Optionally, in response to a graphical interaction engine creation request, the common logic for determining the graphical interaction process based on the graphical interaction engine creation request includes: The graphical interactive engine creation request is parsed to determine the structured configuration data; Based on the structured configuration data, a standardized common process is determined, which includes the logic for loading and parsing interactive configuration data, standardized lifecycle execution rules, interactive state management logic, and interactive result verification and callback processing logic. The standardized common process is encapsulated to generate a common logic for a unified graphical interactive process.

[0006] Optionally, based on the common logic of the graphical interaction process, the abstract base engine class includes: Implement the standardized processes in the public logic as specific methods of the basic engine class; The visualization processing logic that depends on specific interactive forms is declared as an abstract method to be implemented in the base engine class; Define and manage state variables used to control the lifecycle of the interactive process within the base engine class.

[0007] Optionally, instantiating and extending the base engine class to create at least one interactive form subclass includes: Based on the inheritance mechanism of the aforementioned base engine class, construct interactive subclasses that adapt to different graphical interaction methods; In the interactive form subclass, based on the specific characteristics of the corresponding interactive form, the abstract methods reserved by the basic engine class are supplemented and implemented. The implementation content of the abstract methods includes the differentiated interface rendering rules and motion effect control logic for the corresponding interactive form. The method call compatibility between the interaction form subclass and the base engine class is verified. If the verification passes, the interaction form subclass is generated.

[0008] Optionally, invoking the visual rendering process of the interactive form subclass and generating the corresponding visual element model based on the structured configuration data includes: Invoke the visual rendering process of the interactive form subclass, and based on the visual rendering process, parse the visual element attributes defined in the structured configuration data; Based on the interaction form-specific geometric layout algorithm corresponding to the interaction form subclass, the spatial parameters corresponding to the visual element attributes are determined. The spatial parameters include one or more of spatial coordinates, size, and shape. Based on the spatial parameters and their associated style attributes, a hierarchical visualization element model is constructed. The target element model node of the visualization element model includes at least type, spatial description information, and drawing style information.

[0009] Optionally, the motion effect calculation process of the interactive form subclass is invoked and started, and in the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visual element model to generate a dynamic visual interface, including: Invoke and start the motion effect calculation process of the interactive form subclass, and receive real-time status data based on the output of the motion effect calculation process in each animation frame; Based on the real-time status data, update the spatial description information of the corresponding element model node in the visualization element model to generate the target visualization element model; Based on the target visualization element model, a drawing operation is performed to generate a dynamic visualization interface.

[0010] Optionally, based on the target visualization element model, performing drawing operations to generate a dynamic visualization interface includes: Call the two-dimensional context drawing interface of the canvas element; The target visualization element model is traversed, the drawing context state is set according to the drawing style information corresponding to each element model node, and the corresponding drawing instructions are executed according to the updated spatial description information. Before executing the corresponding drawing command, clear the drawing content of the previous frame on the canvas.

[0011] Secondly, a graphical interactive engine implementation device is provided, the device comprising: The first analysis and processing module is used to respond to the graphical interaction engine creation request and determine the common logic of the graphical interaction process based on the graphical interaction engine creation request. The second analysis and processing module is used to construct an abstract basic engine class based on the common logic of the graphical interactive process; The third analysis and processing module is used to instantiate and extend the base engine class to create at least one interactive form subclass. The interactive form subclass is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The fourth analysis and processing module is used to call the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data. The fifth analysis and processing module is used to call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0012] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: In response to the graphical interaction engine creation request, the common logic of the graphical interaction process is determined based on the graphical interaction engine creation request; Based on the common logic of the graphical interaction process, construct an abstract base engine class; Instantiation and extension are performed based on the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The visual rendering process of the interactive form subclass is invoked, and the corresponding visual element model is generated based on the structured configuration data; The motion effect calculation process of the interactive form subclass is invoked and started. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visualization element model to generate a dynamic visualization interface.

[0013] Fourthly, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, performs the following steps: In response to the graphical interaction engine creation request, the common logic of the graphical interaction process is determined based on the graphical interaction engine creation request; Based on the common logic of the graphical interaction process, construct an abstract base engine class; Instantiation and extension are performed based on the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The visual rendering process of the interactive form subclass is invoked, and the corresponding visual element model is generated based on the structured configuration data; The motion effect calculation process of the interactive form subclass is invoked and started. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visualization element model to generate a dynamic visualization interface.

[0014] Fifthly, a computer program product is provided, the computer program product comprising a computer program, which, when executed by a processor, performs the following steps: In response to the graphical interaction engine creation request, the common logic of the graphical interaction process is determined based on the graphical interaction engine creation request; Based on the common logic of the graphical interaction process, construct an abstract base engine class; Instantiation and extension are performed based on the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The visual rendering process of the interactive form subclass is invoked, and the corresponding visual element model is generated based on the structured configuration data; The motion effect calculation process of the interactive form subclass is invoked and started. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visualization element model to generate a dynamic visualization interface.

[0015] The aforementioned graphical interaction engine implementation method, apparatus, computer device, and storage medium, the method comprising: responding to a graphical interaction engine creation request, determining common logic of the graphical interaction process based on the graphical interaction engine creation request; constructing an abstract base engine class according to the common logic of the graphical interaction process; instantiating and extending the base engine class to create at least one interaction form subclass, the interaction form subclass being used to implement a visual rendering process and motion effect calculation process matching the corresponding interaction form; invoking the visual rendering process of the interaction form subclass and generating a corresponding visual element model based on structured configuration data; and invoking and starting the motion effect calculation process of the interaction form subclass. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is called to draw the visualization element model to generate a dynamic visualization interface. This application effectively solves the problems of long development cycle, rigid motion effects, low performance and poor compatibility of graphical interactive engines in related technologies by constructing a configurable general engine architecture and a Canvas-based rendering pipeline. This solution decouples UI vision from business logic, enabling operators to quickly customize the interface and motion effects through configuration. The lightweight rendering mechanism based on Canvas ensures high-performance animation performance across platforms and devices, with stable frame rate and low memory usage, improving user experience and activity iteration efficiency. Attached Figure Description

[0016] To more clearly illustrate the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is an application environment diagram of a graphical interaction engine implementation method in one embodiment; Figure 2 This is a flowchart illustrating a graphical interaction engine implementation method in one embodiment; Figure 3 This is another flowchart illustrating the implementation method of a graphical interactive engine in one embodiment; Figure 4 This is a schematic diagram of programmable animation timeline control for a graphical interactive engine implementation method in one embodiment; Figure 5 This is a flowchart comparing the implementation methods of a graphical interactive engine in one embodiment; Figure 6 This is a structural block diagram of a graphical interactive engine implementation device in one embodiment; Figure 7 This is an internal structural diagram of a computer device in one embodiment. Detailed Implementation

[0018] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions in the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0019] It should be understood that, in the description of this application, unless the context explicitly requires it, words such as "including" or "comprising" throughout the specification should be interpreted as including rather than exclusive or exhaustive; that is, meaning "including but not limited to".

[0020] It should also be understood that the terms "first," "second," etc., are used for descriptive purposes only and should not be construed as indicating or implying relative importance. Furthermore, in the description of this application, unless otherwise stated, "a plurality of" means two or more.

[0021] It should be noted that the terms "S1," "S2," etc., are used only for descriptive purposes and do not specifically refer to the order or sequence, nor are they intended to limit this application. They are merely for the convenience of describing the method of this application and should not be construed as indicating the sequential order of the steps. Furthermore, the technical solutions of the various embodiments can be combined with each other, but this must be based on the ability of those skilled in the art to implement them. When the combination of technical solutions is contradictory or impossible to implement, it should be considered that such a combination of technical solutions does not exist and is not within the scope of protection claimed in this application.

[0022] According to the background technology, in order to improve driver activity, task completion rate and platform loyalty, operators frequently carry out various lottery marketing activities in the driver's app, such as the big wheel and the nine-square grid. When implementing such activities, the relevant technical solutions usually face the following technical problems: (1) Fixed gameplay and poor scalability: The relevant lottery functions are mostly implemented by hard coding for a single gameplay (such as only the big wheel). When it is necessary to add or switch another lottery gameplay (such as switching to the nine-square grid), it is necessary to redevelop the front-end page, interaction logic and animation. The development cycle is long and the cost is high, which cannot meet the needs of rapid iteration and flexibility of ride-hailing operation activities; (2) High UI customization cost and insufficient flexibility: In the relevant solutions, UI elements (such as the background of the wheel, prize pictures / text, button styles) are often deeply coupled with business logic. Every time the visual is revised or the layout is adjusted (such as adapting to different page sizes), front-end development is required. (2) The code was modified and re-released by the staff, which could not be completed quickly through configuration. The staff could not dynamically adjust the skin during holidays. (3) The dynamic effects and interactive control were rigid and the experience was poor. The core dynamic effects (such as the rotating wheel and the flashing grid) and their interactive control (such as speed change and easing effect) in the lottery process were usually preset and fixed. It was difficult to flexibly adjust the acceleration time, deceleration time, easing function and other parameters through programming. As a result, the dynamic effects were monotonous, lacked visual impact and smoothness, and affected the participation experience of the driver users. (4) Rendering performance and compatibility issues: Some complex dynamic effects implemented by DOM+CSS3 were prone to rendering lag, high memory usage and animation frame drops in the WebView environment of the driver app or on low-performance models. This affected the smoothness of the lottery process and even caused the application to freeze, damaging the user experience. At the same time, when there were too many DOM elements, the overhead of style calculation and layout repainting was large.

[0023] To address the aforementioned technical issues, this application provides a method, apparatus, device, and storage medium for implementing a graphical interactive engine. By constructing a configurable general engine architecture and a Canvas-based rendering pipeline, it effectively solves the problems of long development cycles, rigid animations, low performance, and poor compatibility in related technologies for graphical interactive engines. This solution decouples UI visuals from business logic, enabling operators to quickly customize interfaces and animations through configuration. The lightweight rendering mechanism based on Canvas ensures high-performance animation across platforms and devices, with stable frame rates and low memory usage, thereby improving user experience and activity iteration efficiency.

[0024] The graphical interactive engine implementation method provided in this application can be applied to, for example... Figure 1 In the application environment shown, terminal 102 communicates with a data processing platform set on server 104 via a network. Terminal 102 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. Server 104 can be implemented as a standalone server or a server cluster consisting of multiple servers.

[0025] In one embodiment, such as Figure 2 As shown, a method for implementing a graphical interactive engine is provided, which can be applied to... Figure 1 Taking the terminal in the example, the explanation includes the following steps: S1: In response to the graphical interaction engine creation request, determine the common logic of the graphical interaction process based on the graphical interaction engine creation request.

[0026] It should be noted that the graphical interaction process refers to the process of interacting with users and presenting dynamic visual effects through graphical elements (such as spinning wheels or 3x3 grids) within a webpage or application. This is commonly seen in scenarios such as lotteries and games in marketing campaigns. Common logic refers to the technical processes shared by different forms of interaction, including standardized operations such as initialization, data acquisition, animation start / stop, and state reset. It is the foundation for realizing engine reuse and expansion.

[0027] S2: Based on the common logic of the graphical interaction process, construct an abstract basic engine class.

[0028] It should be noted that the abstract base engine class refers to the parent class defined by a programming language (such as JavaScript), which encapsulates the implementation of common logic and declares the abstract methods that subclasses must implement (such as rendering and motion effect calculation), forming a unified architecture template.

[0029] S3: Instantiate and extend the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that matches the corresponding interactive form.

[0030] It's important to note that instantiation extension refers to the process of creating specific subclasses by inheriting from the base engine class. These subclasses only need to implement differentiated visual rendering and motion effect calculation logic to quickly support new interactive forms. Interactive form subclasses refer to concrete implementation classes that inherit from the base engine class (such as the turntable engine or the nine-grid engine), containing interface layout rules and animation calculation methods for specific interactive forms. The visual rendering process refers to the methods or processes in the subclass used to parse configuration data, calculate the geometric parameters (position, size, etc.) of visual elements, and generate structured visual element models. Structured configuration data refers to configuration files defined in formats such as JSON, containing attributes such as the size, position, style, and resource paths of interface elements, used to drive the engine's visual presentation.

[0031] S4: Invoke the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data.

[0032] It should be noted that the visual element model refers to the memory data structure generated by the visual rendering process. It is organized hierarchically and describes the type, spatial parameters and style information of each visual element. It is the only data source for drawing operations.

[0033] S5: Call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0034] It should be noted that the motion effect calculation process refers to the methods or processes in the subclass that calculate the state of each frame of the animation (such as rotation angle, highlight index) in real time based on the time axis and parameters (speed, easing function, etc.); real-time state data refers to the dynamic calculation results output by the motion effect calculation process in each frame (such as the latest coordinates and rotation values ​​of the element), which are used to update the visual element model and drive the drawing; the canvas drawing interface refers to the 2D graphics drawing APIs provided by HTML5Canvas (such as fillRect, drawImage), which are used to render the visual element model into pixel images frame by frame; and the dynamic visualization interface refers to the graphical interface that is generated by continuously calling the canvas drawing interface and updates smoothly over time, ultimately presenting an interactive visual experience to the user.

[0035] In some specific implementations, such as Figure 3 As shown, in response to a graphical interaction engine creation request, the common logic for determining the graphical interaction process based on the graphical interaction engine creation request includes: The graphical interactive engine creation request is parsed to determine structured configuration data, which includes attributes such as the size, position, background style, content display style, and operation component status of the visual elements. Based on the structured configuration data, a standardized common process is determined, which includes the logic for loading and parsing interactive configuration data, standardized lifecycle execution rules, interactive state management logic, and interactive result verification and callback processing logic. The standardized common process is encapsulated to generate a common logic for a unified graphical interactive process.

[0036] In some specific ways, based on the common logic of the graphical interaction process, the abstract base engine class is constructed as follows: Implement the standardized processes in the public logic as specific methods of the basic engine class; The visualization processing logic that depends on specific interactive forms is declared as an abstract method to be implemented in the base engine class; Define and manage state variables used to control the lifecycle of the interactive process within the base engine class.

[0037] In some specific ways, instantiation extension based on the base engine class to create at least one interactive form subclass includes: Based on the inheritance mechanism of the aforementioned base engine class, construct interactive subclasses that adapt to different graphical interaction methods; In the interactive form subclass, based on the specific characteristics of the corresponding interactive form, the abstract methods reserved by the basic engine class are supplemented and implemented. The implementation content of the abstract methods includes the differentiated interface rendering rules and motion effect control logic for the corresponding interactive form. The method call compatibility between the interaction form subclass and the base engine class is verified. If the verification passes, the interaction form subclass is generated.

[0038] Specifically, the above steps involve creating a generic engine with a personalized subclass architecture. This involves creating an abstract `BaseLotteryEngine` class, which does not implement any specific UI but declares and partially implements the core logic and methods common to all lottery games, forming a standardized lifecycle template, including: `init(config)` initialization, `fetchLotteryResult` to retrieve lottery results, `start` to start, `stop` to stop, and `reset` to reset the state. A concrete subclass is then created. For the "Spin the Wheel" game, a `TurntableEngine` class is created, which inherits from `BaseLotteryEngine`. Subclasses only concern themselves with the parts that differ from the general gameplay. More specifically, firstly, analyze common requirements: analyze the common technical implementation aspects of various graphical interactions (such as spinning wheels, tic-tac-toe, scratch cards, etc.), such as lifecycle management: all require initialization, start, stop, and reset; data logic: all require obtaining and processing interaction results; state management: all require maintaining states such as "whether in progress" and "current result"; configuration parsing: all require loading and parsing configuration data defining the interface and behavior; abstract and define interfaces: abstract the above common aspects into a set of standard methods or function interfaces, forming the engine's "skeleton" or "protocol"; for example, define an init(config) method as the unified entry point for all engine initialization, define a start() method as the unified instruction for starting animations, and implement common logic: in the abstract base class, provide defaults for some operations that are undoubtedly certain and whose logic is completely consistent in all subclasses. The implementation includes functions such as managing certain state variables and initial validation of configuration data. For parts that require customization by subclasses (such as specific drawing), these are declared as abstract methods or reserved extension points. When creating interactive subclasses, based on the inheritance rules of the base engine class, subclasses adapted to different interactive forms (such as turntable interactive subclasses and nine-square interactive subclasses) are created. Subclasses automatically inherit all public logic and methods encapsulated in the base engine class. Only for the specific characteristics of the corresponding interactive form, the abstract methods reserved by the base engine class are supplemented and implemented in the subclass. The core is the differentiated interface rendering rules (such as the sector drawing of the turntable and the grid layout of the nine-square grid) and the motion effect control logic (such as the rotation speed curve of the turntable and the highlight switching rules of the nine-square grid). The compatibility of method calls between the subclass and the base engine class is verified to ensure that the subclass only extends the differentiated logic and does not modify the public logic of the base engine class, ensuring that multiple interactive subclasses can share the same base engine class without interfering with each other.

[0039] In the above implementation, an abstract and general "gameplay engine" (or basic gameplay class) is designed. The general engine does not care whether it is a spinning wheel or a 3x3 grid. It only encapsulates the common logic of all lottery gameplay. Specific gameplay (such as a spinning wheel or a 3x3 grid) are subclasses that inherit from the general gameplay engine to ensure the consistency of the architecture. Only the differences of new gameplay need to be focused on, without having to repeatedly write the basic animation logic, making the expansion more efficient and standardized.

[0040] In some specific implementations, invoking the visual rendering process of the interactive form subclass and generating the corresponding visual element model based on structured configuration data includes: Invoke the visual rendering process of the interactive form subclass, and based on the visual rendering process, parse the visual element attributes defined in the structured configuration data; Based on the interaction form-specific geometric layout algorithm corresponding to the interaction form subclass, the spatial parameters corresponding to the visual element attributes are determined. The spatial parameters include one or more of spatial coordinates, size, and shape. Based on the spatial parameters and their associated style attributes, a hierarchical visualization element model is constructed. The target element model node of the visualization element model includes at least type, spatial description information, and drawing style information. The hierarchy may include background area, content display area, operation button area, etc.

[0041] Specifically, at some point before engine initialization (init) or initial startup, a specific method (usually named render or setupVisualModel) implemented in the interactive subclass (such as TurntableEngine) for visual rendering is called via code. This method is a concrete implementation of the abstract method reserved in the base engine class by the subclass according to its gameplay. The subclass receives structured configuration data from external input (e.g., a JSON configuration describing the spinning wheel, including the wheel radius, prize list, background image URL, text style, etc.). The rendering method of the subclass parses this configuration, extracting all parameters related to visual presentation. Based on the parsed parameters, it calculates and generates a unique, element-based memory data structure (i.e., a visual element model) specific to this interactive form. For example, for the spinning wheel, it calculates the starting and ending angles of each prize's sector area based on the number of prizes; and it calculates the visual element model based on the layout parameters. The positioning point (x, y coordinates) and reference rotation angle of the prize text are determined; the image URL, color value, text content, etc. in the configuration are associated with the geometric information and style information calculated above to form individual "element objects"; all "element objects" (such as background layer, multiple prize block layers, button layer, pointer layer) are organized into a complete scene diagram or model list according to the hierarchical relationship and stored in memory. The memory model does not directly contain any pixel information, but is a description of a set of drawing instructions (such as "draw a sector at (x1, y1) with radius r, fill it with color c, and draw text t at (x2, y2) with angle a"). This model is the only data source for subsequent animation calculations and Canvas drawing. The animation process changes some state parameters of the elements in the model (such as rotation angle), and the drawing process executes the actual drawing instructions according to the final state of the model. The configuration of the visual element model is shown in Table 1.

[0042] Table 1: Visual Element Model Configuration Table.

[0043] In the above implementation, by constructing a set of UI description specifications decoupled from specific gameplay, and defining the width, height, position, background image / color, prize image / text style, button state, and other visual attributes of the lottery component through structured data such as JSON, the UI layer is fully configurable, allowing operators to customize the interface through the skin configuration platform.

[0044] In some specific implementations, the motion effect calculation process of the interactive form subclass is invoked and started, and in the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visual element model to generate a dynamic visual interface, including: Invoke and start the motion effect calculation process of the interactive form subclass, and receive real-time status data based on the output of the motion effect calculation process in each animation frame; Based on the real-time status data, update the spatial description information of the corresponding element model node in the visualization element model to generate the target visualization element model; Based on the target visualization element model, a drawing operation is performed to generate a dynamic visualization interface.

[0045] In some specific implementations, performing drawing operations based on the target visualization element model to generate a dynamic visualization interface includes: Call the two-dimensional context drawing interface of the canvas element; The target visualization element model is traversed, the drawing context state is set according to the drawing style information corresponding to each element model node, and the corresponding drawing instructions are executed according to the updated spatial description information. Before executing the corresponding drawing command, clear the drawing content of the previous frame on the canvas.

[0046] Specifically, after the motion effect calculation process starts, its registered frame callback function (usually driven by requestAnimationFrame) will be executed periodically at the screen refresh rate (usually 60Hz). When the callback function is executed in each frame (i.e. each "target animation frame"), the motion effect calculation logic is executed first. This logic calculates the latest state (i.e., real-time state data) of all visual elements in the current frame based on the current time, preset motion effect parameters (speed, easing function, etc.), and the specific animation rules of the interactive form (such as rotation formula). For example, it updates the angle value of the turntable model and the highlight index of the nine-square grid model. After this stage is completed, the data of the visual element model in memory has been updated to the state of the current frame. Within the callback function of the same frame, the Canvas drawing interface (Canvas2DContextAPI) is called immediately afterward. The drawing process is entirely based on the updated visual element model. The drawing program traverses each element node in the model, reads its type, spatial description information (current frame state), and drawing style information, and then executes a series of corresponding Canvas drawing instructions, such as calling drawImage to draw an image based on the type, calling fillRect to draw a rectangle based on the spatial information, and setting the fillStyle color based on the style. Before drawing, ctx.clearRect is called to clear the previous frame's image, and then the current frame is drawn, thus generating continuous animation. This "calculation-drawing" loop continues to execute until the motion effect calculation process determines that the animation has ended (such as reaching the target angle or completing the blinking sequence). At this point, the registration of the callback for the next frame stops, the loop terminates, and finally, the user sees a smooth, expected dynamic visual interface generated by Canvas in real time on the screen. The configuration of the programmable motion effect control is shown in Table 2, and its programmable motion effect timeline control is as follows. Figure 4 As shown.

[0047] Table 2: Programmable motion control configuration table.

[0048] In the above implementation, the actuator exposes a rich set of motion effect control APIs (such as setting initial velocity, acceleration, deceleration, and easing functions), enabling precise control of the motion effect process through programming, thereby enhancing the interactive experience. Figure 5 As shown, through comparison, the lightweight and high-efficiency rendering based on Canvas is achieved: the entire lottery interface and animation rendering are implemented entirely based on the Canvas 2D context. By utilizing the real-time rendering mode of Canvas, the complex style calculations and layout reordering of DOM / CSS are avoided, significantly reducing memory usage and CPU overhead, and ensuring smooth, frame-free lottery animations on driver-end devices with various performance levels.

[0049] The above-described graphical interaction engine implementation method includes: responding to a graphical interaction engine creation request, determining the common logic of the graphical interaction process based on the graphical interaction engine creation request; constructing an abstract base engine class based on the common logic of the graphical interaction process; instantiating and extending the base engine class to create at least one interaction form subclass, the interaction form subclass being used to implement a visual rendering process and motion effect calculation process matching the corresponding interaction form; calling the visual rendering process of the interaction form subclass and generating a corresponding visual element model based on structured configuration data; calling and starting the motion effect calculation process of the interaction form subclass, and in the target animation frame... Based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is called to draw the visual element model to generate a dynamic visual interface. This application effectively solves the problems of long development cycle, stiff motion effects, low performance and poor compatibility of graphical interactive engines in related technologies by constructing a configurable general engine architecture and a Canvas-based rendering pipeline. This solution decouples UI vision from business logic, enabling operators to quickly customize the interface and motion effects through configuration. The lightweight rendering mechanism based on Canvas ensures high-performance animation performance across platforms and devices, with stable frame rate and low memory usage, improving user experience and activity iteration efficiency.

[0050] It should be understood that, although Figures 2-5 The steps in the flowchart are shown sequentially as indicated by the arrows, but these steps are not necessarily executed in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order in which these steps are executed, and they can be performed in other orders. Figures 2-5 At least some of the steps in the process may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be executed in turn or alternately with other steps or at least some of the sub-steps or stages of other steps.

[0051] In one embodiment, such as Figure 6 As shown, a graphical interactive engine implementation device is provided, including: The first analysis and processing module is used to respond to the graphical interaction engine creation request and determine the common logic of the graphical interaction process based on the graphical interaction engine creation request. The second analysis and processing module is used to construct an abstract basic engine class based on the common logic of the graphical interactive process; The third analysis and processing module is used to instantiate and extend the base engine class to create at least one interactive form subclass. The interactive form subclass is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The fourth analysis and processing module is used to call the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data. The fifth analysis and processing module is used to call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0052] In a preferred embodiment of the present invention, the first analysis and processing module is specifically used for: The graphical interactive engine creation request is parsed to determine the structured configuration data; Based on the structured configuration data, a standardized common process is determined, which includes the logic for loading and parsing interactive configuration data, standardized lifecycle execution rules, interactive state management logic, and interactive result verification and callback processing logic. The standardized common process is encapsulated to generate a common logic for a unified graphical interactive process.

[0053] In a preferred embodiment of the present invention, the second analysis and processing module is specifically used for: Implement the standardized processes in the public logic as specific methods of the basic engine class; The visualization processing logic that depends on specific interactive forms is declared as an abstract method to be implemented in the base engine class; Define and manage state variables used to control the lifecycle of the interactive process within the base engine class.

[0054] In a preferred embodiment of the present invention, the third analysis and processing module is specifically used for: Based on the inheritance mechanism of the aforementioned base engine class, construct interactive subclasses that adapt to different graphical interaction methods; In the interactive form subclass, based on the specific characteristics of the corresponding interactive form, the abstract methods reserved by the basic engine class are supplemented and implemented. The implementation content of the abstract methods includes the differentiated interface rendering rules and motion effect control logic for the corresponding interactive form. The method call compatibility between the interaction form subclass and the base engine class is verified. If the verification passes, the interaction form subclass is generated.

[0055] In a preferred embodiment of the present invention, the fourth analysis and processing module is specifically used for: Invoke the visual rendering process of the interactive form subclass, and based on the visual rendering process, parse the visual element attributes defined in the structured configuration data; Based on the interaction form-specific geometric layout algorithm corresponding to the interaction form subclass, the spatial parameters corresponding to the visual element attributes are determined. The spatial parameters include one or more of spatial coordinates, size, and shape. Based on the spatial parameters and their associated style attributes, a hierarchical visualization element model is constructed. The target element model node of the visualization element model includes at least type, spatial description information, and drawing style information.

[0056] In a preferred embodiment of the present invention, the fifth analysis and processing module is specifically used for: Invoke and start the motion effect calculation process of the interactive form subclass, and receive real-time status data based on the output of the motion effect calculation process in each animation frame; Based on the real-time status data, update the spatial description information of the corresponding element model node in the visualization element model to generate the target visualization element model; Based on the target visualization element model, a drawing operation is performed to generate a dynamic visualization interface.

[0057] In a preferred embodiment of the present invention, the fifth analysis and processing module is further configured to: Call the two-dimensional context drawing interface of the canvas element; The target visualization element model is traversed, the drawing context state is set according to the drawing style information corresponding to each element model node, and the corresponding drawing instructions are executed according to the updated spatial description information. Before executing the corresponding drawing command, clear the drawing content of the previous frame on the canvas.

[0058] Specific limitations regarding the implementation device of the graphical interactive engine can be found in the limitations on the implementation method of the graphical interactive engine mentioned above, and will not be repeated here. Each module in the aforementioned graphical interactive engine implementation device can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in the computer device in hardware form, or stored in the memory of the computer device in software form, so that the processor can call and execute the operations corresponding to each module.

[0059] In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as follows: Figure 7As shown, the computer device includes a processor, memory, network interface, display screen, and input devices connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system and computer programs. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used to communicate with external terminals via a network connection. When the computer program is executed by the processor, it implements a graphical interactive engine. The display screen can be an LCD screen or an e-ink screen. The input devices can be a touch layer covering the display screen, buttons, a trackball, or a touchpad mounted on the computer device casing, or an external keyboard, touchpad, or mouse.

[0060] Those skilled in the art will understand that Figure 7 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0061] In one embodiment, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to perform the following steps: S1: In response to the graphical interaction engine creation request, determine the common logic of the graphical interaction process based on the graphical interaction engine creation request; S2: Based on the common logic of the graphical interaction process, construct an abstract basic engine class; S3: Instantiate and extend the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. S4: Invoke the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data; S5: Call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0062] In one embodiment, a computer-readable storage medium is provided having a computer program stored thereon, the computer program performing the following steps when executed by a processor: S1: In response to the graphical interaction engine creation request, determine the common logic of the graphical interaction process based on the graphical interaction engine creation request; S2: Based on the common logic of the graphical interaction process, construct an abstract basic engine class; S3: Instantiate and extend the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. S4: Invoke the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data; S5: Call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0063] In one embodiment, a computer program product is provided, the computer program product comprising a computer program that, when executed by a processor, performs the following steps: S1: In response to the graphical interaction engine creation request, determine the common logic of the graphical interaction process based on the graphical interaction engine creation request; S2: Based on the common logic of the graphical interaction process, construct an abstract basic engine class; S3: Instantiate and extend the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. S4: Invoke the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data; S5: Call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

[0064] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0065] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0066] The embodiments described above are merely examples of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application.

Claims

1. A method for implementing a graphical interactive engine, characterized in that, The method includes: In response to the graphical interaction engine creation request, the common logic of the graphical interaction process is determined based on the graphical interaction engine creation request; Based on the common logic of the graphical interaction process, construct an abstract base engine class; Instantiation and extension are performed based on the base engine class to create at least one interactive form subclass, which is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The visual rendering process of the interactive form subclass is invoked, and the corresponding visual element model is generated based on the structured configuration data; The motion effect calculation process of the interactive form subclass is invoked and started. In the target animation frame, based on the real-time status data output by the motion effect calculation process, the canvas drawing interface is invoked to draw the visualization element model to generate a dynamic visualization interface.

2. The graphical interactive engine implementation method according to claim 1, characterized in that, In response to the graphical interaction engine creation request, the common logic for determining the graphical interaction process based on the graphical interaction engine creation request includes: The graphical interactive engine creation request is parsed to determine the structured configuration data; Based on the structured configuration data, a standardized common process is determined, which includes the logic for loading and parsing interactive configuration data, standardized lifecycle execution rules, interactive state management logic, and interactive result verification and callback processing logic. The standardized common process is encapsulated to generate a common logic for a unified graphical interactive process.

3. The graphical interactive engine implementation method according to claim 1, characterized in that, Based on the common logic of the graphical interaction process, the abstract base engine class includes: Implement the standardized processes in the public logic as specific methods of the basic engine class; The visualization processing logic that depends on specific interactive forms is declared as an abstract method to be implemented in the base engine class; Define and manage state variables used to control the lifecycle of the interactive process within the base engine class.

4. The graphical interactive engine implementation method according to claim 1, characterized in that, Instantiation extensions based on the aforementioned base engine class to create at least one interactive form subclass include: Based on the inheritance mechanism of the aforementioned base engine class, construct interactive subclasses that adapt to different graphical interaction methods; In the interactive form subclass, based on the specific characteristics of the corresponding interactive form, the abstract methods reserved by the basic engine class are supplemented and implemented. The implementation content of the abstract methods includes the differentiated interface rendering rules and motion effect control logic for the corresponding interactive form. The method call compatibility between the interaction form subclass and the base engine class is verified. If the verification passes, the interaction form subclass is generated.

5. The graphical interactive engine implementation method according to claim 1, characterized in that, The process of invoking the visual rendering flow of the interactive form subclass and generating the corresponding visual element model based on the structured configuration data includes: Invoke the visual rendering process of the interactive form subclass, and based on the visual rendering process, parse the visual element attributes defined in the structured configuration data; Based on the interaction form-specific geometric layout algorithm corresponding to the interaction form subclass, the spatial parameters corresponding to the visual element attributes are determined. The spatial parameters include one or more of spatial coordinates, size, and shape. Based on the spatial parameters and their associated style attributes, a hierarchical visualization element model is constructed. The target element model node of the visualization element model includes at least type, spatial description information, and drawing style information.

6. The graphical interactive engine implementation method according to claim 1, characterized in that, The process involves invoking and initiating the motion effect calculation flow of the interactive subclass, and within the target animation frame, drawing the visualization element model using the canvas drawing interface based on the real-time status data output by the motion effect calculation flow, to generate a dynamic visualization interface, including: Invoke and start the motion effect calculation process of the interactive form subclass, and receive real-time status data based on the output of the motion effect calculation process in each animation frame; Based on the real-time status data, update the spatial description information of the corresponding element model node in the visualization element model to generate the target visualization element model; Based on the target visualization element model, a drawing operation is performed to generate a dynamic visualization interface.

7. The graphical interactive engine implementation method according to claim 6, characterized in that, Based on the target visualization element model, performing drawing operations to generate a dynamic visualization interface includes: Call the two-dimensional context drawing interface of the canvas element; The target visualization element model is traversed, the drawing context state is set according to the drawing style information corresponding to each element model node, and the corresponding drawing instructions are executed according to the updated spatial description information. Before executing the corresponding drawing command, clear the drawing content of the previous frame on the canvas.

8. A graphical interactive engine implementation device, characterized in that, The device includes: The first analysis and processing module is used to respond to the graphical interaction engine creation request and determine the common logic of the graphical interaction process based on the graphical interaction engine creation request. The second analysis and processing module is used to construct an abstract basic engine class based on the common logic of the graphical interactive process; The third analysis and processing module is used to instantiate and extend the base engine class to create at least one interactive form subclass. The interactive form subclass is used to implement the visual rendering process and motion effect calculation process that match the corresponding interactive form. The fourth analysis and processing module is used to call the visual rendering process of the interactive form subclass and generate the corresponding visual element model based on the structured configuration data. The fifth analysis and processing module is used to call and start the motion effect calculation process of the interactive form subclass, and in the target animation frame, according to the real-time status data output by the motion effect calculation process, call the canvas drawing interface to draw the visualization element model to generate a dynamic visualization interface.

9. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method of any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 7.

Images