Web animation generator based on timeline control and implementation method thereof

Abstract

The invention belongs to the technical field of Web animation development, and provides a Web animation generator based on timeline control and an implementation method thereof, and the Web animation generator comprises an animation timeline control module, an animation effect library, a dynamic animation adjustment module, a user interaction module and a code generator. According to the method and the device, abstraction at a higher level is realized, a user can conveniently and quickly create a complex Web animation through a graphical interface or a small number of codes, and meanwhile, fine control of the animation can be realized, so that the problems in the prior art are effectively solved.

Description

Technical Field

[0001] The invention belongs to the technical field of Web animation development, and in particular relates to a Web animation generator based on timeline control and an implementation method thereof. Background Art

[0002] With the development of Internet technology, web pages have gradually transitioned from static content to dynamic content with rich interactivity. Web animation is an important means to improve user experience and attract user attention, and has been widely used in web design. Traditional Web animation methods rely on JavaScript or specific plug-ins (such as Adobe Flash) to implement, which have problems such as poor compatibility and performance limitations.

[0003] Existing web standards such as CSS animations and Web Animation API (WAAPI) provide a set of declarative and procedural tools for creating complex animations, but they still have the following shortcomings: (1) When creating complex timeline animations, the control and synchronization of animations are relatively complex; (2) A large amount of code needs to be written to accurately control the animation sequence; (3) It is difficult to implement advanced functions in animation control, such as dynamically modifying animations, interrupting and resuming animations, etc. Summary of the invention

[0004] The purpose of the present invention is to provide a Web animation generator based on timeline control to solve the technical problems existing in the prior art.

[0005] In order to achieve the above object, the technical solution adopted by the present invention is as follows: A web animation generator based on timeline control, including: Animation timeline control module, including: keyframe setting module, which creates keyframes by clicking on a specific point on the timeline or dragging; parameter setting module, which sets editable properties for each keyframe; slider control module, which browses and edits different stages of the animation by dragging the slider control; real-time preview module, when the slider control moves, the animation shows the state of the slider control at the corresponding time point; duration and delay setting module, which sets the duration and delay time for each keyframe; Animation effect library, which integrates and provides several preset animation effects; Dynamic animation adjustment module, used to dynamically change animation parameters during animation execution; User interaction module, allowing users to build animation timelines by dragging and clicking; using intuitive drag-and-drop and property setting operations to simplify the animation construction process; A code generator that automatically generates optimized CSS @keyframes animations or JSON structured code using WAAPI based on user actions in the GUI.

[0006] Preferably, the code generator includes a module for capturing user operations, which is used to synchronize operation action records and data models; a module for building internal data structures, which is used to create internal data structures to represent keyframes and attribute animations, calculate the start time, duration, and end time of the animations, and associate them with the keyframes and attribute animations; an animation parameter processing module, which is used to optimize the animation parameters, as well as unit and prefix processing; a CSS @keyframes generation module, which generates CSS @keyframes animation code, allocates a percentage to each keyframe according to the timeline and sets the corresponding CSS attribute value, and completes the `animation` CSS attribute of each element; a WAAPI code generation module, which converts the internal data model into a JSON format acceptable to the WebAnimations API, and converts the keyframes and attribute animations into a list of key-value pairs of WAAPI; a code formatting module, which formats and detects errors in the generated code; and a cross-browser compatibility module, which performs cross-browser testing on the generated code and automatically adds CSS attribute prefixes.

[0007] Preferably, the dynamic animation adjustment module includes: a parameter tracking module, which tracks the parameters of the animation key frames through an event monitoring mechanism when the animation is playing; a state capture module, which captures the state of the current animation execution; an adjustment control module, which is used to adjust the animation parameters; a real-time feedback module, when the adjustment is made, the animation responds and displays the adjusted effect in the preview window; an animation playback control module, which is used to control the animation playback process; a time point jump module, which is used to jump to any time point on the timeline; a data binding module, which is used to bind the animation parameters to the adjustment controls; a parameter change module, which is used to process all parameter changes in real time in the memory; a buffer operation module, which uses efficient calculation and rendering methods to reduce the delay of real-time adjustment and preview; a graphics engine integration module, which integrates an advanced graphics rendering engine to support real-time preview of complex animations; an API interface module, which provides a set of APIs so that developers can control and adjust animation parameters programmatically; and a real-time data storage module, which is used for data storage.

[0008] Preferably, the user interaction module includes a component library module, which provides a component library containing various animation elements or objects; a drag-and-drop module, which is used to drag the required elements from the component library to the canvas or timeline; an element selection module, which is used to click and select the animation element on the canvas, and display the relevant properties in the property panel; a property editing module, which adjusts the style and behavior of the selected element by changing the value in the property panel; an intuitive feedback module, which is used to reflect the results of clicks and property changes on the canvas; a real-time synchronization module, which updates any edits on the timeline to the canvas preview in real time; a resource manager module, which provides a resource manager interface allowing users to upload and manage external resources; a drag-and-drop import module, which is used to drag local resources into the resource manager, and the resources will be uploaded to the server and can be used in the animation; a timeline interaction module, which is used to drag the keyframes on the timeline to change their position, adjust the start and end time and duration of the animation by dragging the time bar on the timeline, or delete the keyframes by right-clicking.

[0009] In order to achieve the above object, the present invention also provides a method for implementing a Web animation generator based on timeline control, comprising the following steps: (1) Run the Web animation generator based on timeline control; (2) Select the animation object; (3) Apply preset animation effects; (4) Adjust animation parameters through the animation timeline control module; (5) Real-time preview of animation effects; (6) Determine whether the animation effect is satisfactory. If so, proceed to the next step. If not, return to step (2) or (4). (7) Generate animation code through the code generator; (8)Integrate animation code into web projects.

[0010] Compared with the prior art, the present invention has the following beneficial effects: (1) It improves the complexity and technical barriers of existing Web animation production, making it easy for non-professionals to create beautiful Web animations; (2) The timeline control of animation can achieve refined management, which not only simplifies the control and synchronization of animation, but also makes the animation more precise and colorful; (3) The dynamic animation adjustment module makes animation modification flexible, facilitates rapid response to design change requirements, and can implement advanced functions in animation control; (4) Cross-platform and cross-browser animation effect implementation ensures the consistency of animation effects and the unity of user experience; (5) The code generator improves the efficiency of writing animation code, avoids repetitive work, and helps maintain code optimization and consistency. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] Figure 1 The present invention is a flowchart of the method for implementing the present invention. DETAILED DESCRIPTION

[0012] In order to enable those skilled in the art to have a clearer understanding and knowledge of the present invention, the present invention is further described in detail below in conjunction with the embodiments. It should be understood that the specific embodiments described below are only used to explain the present invention, and are convenient for understanding. The technical solutions provided by the present invention are not limited to the technical solutions provided by the following embodiments, and the technical solutions provided by the embodiments should not limit the protection scope of the present invention.

[0013] It should be noted that the illustrations provided in the following embodiments are only used to illustrate the basic concept of the present invention in a schematic manner. Therefore, the drawings only show components related to the present invention rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the form, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0014] Example This embodiment provides a timeline-controlled Web animation generator, which implements a higher level of abstraction, making it easier for users to quickly create complex Web animations through a graphical interface or a small amount of code, while enabling fine control of the animation.

[0015] In this embodiment, the Web animation generator based on timeline control mainly includes the following modules: 1. Animation timeline control module In this module, users can define animation keyframes, duration, delay and other parameters; users can define animation keyframes on the timeline by moving sliders, entering values, etc.; provide graphical display of the animation process, including the start, middle and end of the animation, etc.; specifically include the following: The keyframe setting module creates keyframes by clicking on specific points on the timeline or dragging; the parameter setting module sets editable properties for each keyframe; the slider control module browses and edits different stages of the animation by dragging the slider control; the real-time preview module displays the state of the slider control at the corresponding time point when the slider control moves; the duration and delay setting module sets the duration and delay time for each keyframe.

[0016] 2. Animation Effects Library Provides a variety of preset animation effects that users can select and apply to target elements; integrates multiple preset animation effects, such as fade in and fade out, zoom, slide, rotate, etc., and complex path animation or deformation animation; supports custom animation effects and adds them to the animation effect library for future use.

[0017] 3. Dynamic animation adjustment module Used to dynamically change animation parameters during animation execution; allows developers or designers to adjust animation parameters in real time during animation playback; supports real-time preview of adjustment results to ensure that the animation effect meets expectations; provides API interfaces to support programmatic control of dynamic adjustment of animation parameters; specifically includes the following; Parameter tracking module, which tracks the parameters of animation keyframes through event monitoring mechanism when the animation is playing; state capture module, which captures the state of the current animation execution; adjustment control module, which is used to adjust animation parameters; real-time feedback module, when making adjustments, the animation responds and displays the adjusted effect in the preview window; animation playback control module, which is used to control the animation playback process; time point jump module, which is used to jump to any time point on the timeline; data binding module, which is used to bind animation parameters to adjustment controls; parameter change module, which is used to process all parameter changes in real time in memory; buffer operation module, which uses efficient calculation and rendering methods to reduce the delay of real-time adjustment and preview; graphics engine integration module, which integrates advanced graphics rendering engine to support real-time preview of complex animations; API interface module, which provides a set of APIs so that developers can control and adjust animation parameters programmatically; real-time data storage module, which is used for data storage.

[0018] 4. User Interaction Module Allows users to build animation timelines by dragging and dropping and clicking; uses intuitive drag-and-drop and property setting operations to simplify the animation construction process; the animation timeline in the GUI is synchronized with the code generator in real time to ensure that what you see is what you get; supports importing external images and SVG elements as animation objects; specifically includes the following; The component library module provides a component library containing various animation elements or objects; the drag-and-drop module is used to drag the required elements from the component library to the canvas or timeline; the element selection module is used to click on the animation element on the canvas and select it, and display the relevant properties in the property panel; the property editing module adjusts the style and behavior of the selected element by changing the value in the property panel; the intuitive feedback module is used to reflect the results of clicks and property changes on the canvas; the real-time synchronization module updates any edits on the timeline to the canvas preview in real time; the code generator is used to synchronize the user's operations into the corresponding code; the resource manager module provides a resource manager interface that allows users to upload and manage external resources; the drag-and-drop import module is used to drag local resources into the resource manager, and the resources will be uploaded to the server and can be used in animation; the timeline interaction module is used to drag the keyframes on the timeline to change their position, adjust the start and end time and duration of the animation by dragging the time bar on the timeline, or delete the keyframes by right-clicking.

[0019] 5. Code Generator It can automatically generate optimized CSS @keyframes animations or JSON structure code using WAAPI based on user operations in the GUI; the automatically generated code supports direct copy and paste, which is convenient for developers to quickly integrate; the generated code complies with modern Web standards to ensure cross-browser compatibility; specifically includes the following: Capture user operation module, used for operation action recording and data model synchronization; build internal data structure module, used to create internal data structure to represent keyframes and attribute animations, calculate the start time, duration, and end time of the animation, and associate it with the keyframes and attribute animations; animation parameter processing module, used to optimize animation parameters, as well as unit and prefix processing; generate CSS @keyframes module, generate CSS @keyframes animation code, each keyframe is allocated a percentage according to the timeline and sets the corresponding CSS attribute value, and completes the `animation` CSS attribute of each element; generate WAAPI code module, convert the internal data model into a JSON format acceptable to the Web Animations API (WAAPI), and convert keyframes and attribute animations into a list of key-value pairs of WAAPI; code formatting module, formats and detects errors in the generated code; cross-browser compatibility module, performs cross-browser testing on the generated code, and automatically adds CSS attribute prefixes.

[0020] Based on the above modules, animation execution status monitoring can be implemented, including; parameter tracking: use the event monitoring mechanism in JavaScript (such as requestAnimationFrame) to monitor each frame of the animation. When the animation is playing, the attribute values ​​of the current key frame of the animation, such as position, transparency, scale, etc., are obtained through the event listener. This can be achieved by adding custom attributes to the animation elements and reading these attributes in real time during the calculation of each frame of the animation; state capture: create a state object for each animation element, containing information such as the current time, attribute values ​​(such as position, transparency, etc.). State information can be stored through data structures such as Map or WeakMap to ensure that this information can be captured and accessed in real time during the animation playback process.

[0021] Based on the above modules, you can achieve: Real-time adjustment interface, including: Adjustment control: Provide users with a visual control panel, including sliders, input boxes, color palettes and other controls. Each control is bound to a specific property of the animation element, such as color, transparency, position, etc. When the user adjusts these controls, the interface listens to the input event, captures the user input in real time, and updates the relevant animation properties; Real-time feedback: Through short-cycle calls of requestAnimationFrame or setTimeout, ensure that the animation is refreshed immediately after each property adjustment and presents the updated effect in the preview window. This requires the implementation of a two-way data binding mechanism so that the controls and animation properties are synchronized.

[0022] Animation playback control, including: playback control buttons: create a group of buttons to control the playback, pause, stop and other operations of the animation. Each button triggers the corresponding function (such as play(), pause(), stop()), which operates the main controller object of the animation, which manages the overall timeline and state of the animation; time point jump: through the timeline control or input box, the user can enter or drag the timeline to a specific time point. Use the currentTime property to set the current playback time of the animation and trigger the animation engine to re-render the picture at that time point.

[0023] Control and synchronization of animation: Time is displayed as a scale on a timeline (usually a horizontal bar graph). Users can click a specific point on the timeline, or drag a cursor (such as a slider) to a certain position and click a button to create a keyframe. Input boxes and slider controls are provided for each keyframe's properties (such as position, scale, transparency), and users can edit the value directly or adjust it with the slider. When the user changes the property value, the corresponding keyframe object is updated immediately, and the preview animation is updated in real time according to the position on the timeline.

[0024] Dynamic update mechanism: Data binding: Use MVVM or a custom data binding mechanism to directly bind the value of the control to the animation property. For example, when the value of the slider control changes, the corresponding animation property value is updated immediately and redrawn through the DOM or Canvas API; Parameter changes in memory: Ensure that all animation parameters are stored in a model object in memory instead of directly operating DOM or CSS properties. In this way, adjustments can be quickly responded to and the responsiveness of the application can be maintained.

[0025] Real-time preview of adjustment results: Buffer operation: Introduce a buffer (Offscreen Canvas or GPU acceleration) for rendering to reduce the delay after each property adjustment. Layered rendering can reduce the overhead of global redrawing; Graphics engine integration: Integrate advanced graphics rendering engines such as WebGL or Canvas API, so that when processing complex animations, GPU acceleration can be used to improve the frame rate and rendering effect of real-time preview; API interface support: Animation control API: Design a set of APIs, including startAnimation(), pauseAnimation(), setProperty(), getProperty(), etc. The API allows developers to programmatically control animation playback, modify properties, and even create custom animations. The API should be flexible, support any property adjustment of the animation, and provide detailed documentation; Flexibility and scalability: The API should be designed to be modular and support plug-ins and extensions. For example, allow developers to extend the functions of the animation generator through custom plug-ins (such as adding new types of animation property control).

[0026] Real-time data storage: Parameter storage solution: Use the browser's local storage (such as localStorage or IndexedDB) or temporarily store the data in memory. When the animation parameters change, update the data in the storage immediately to ensure that the current state can be restored when the page is opened next time; Historical operation record: Implement a history stack, store each operation (such as parameter adjustment) in the stack, and provide undo and redo functions. Rollback can be achieved by saving the state snapshot before and after each operation.

[0027] The above-mentioned functional modules can be integrated into a processing unit, or each module can exist physically separately, or two or more modules can be integrated into one unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit. If the integrated unit is implemented 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 solution of the present application is essentially or part of the contribution to the prior art or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, a server, or a network device, etc.) or a processor (processor) to perform all or part of the steps of each implementation method of the present application. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory, random access memory, disk or optical disk and other media that can store program code.

[0028] like Figure 1 As shown, this embodiment also provides an implementation method of a Web animation generator based on timeline control, including the following steps: (1) running a Web animation generator based on timeline control; (2) selecting an animation object; (3) applying a preset animation effect; (4) adjusting animation parameters through an animation timeline control module; (5) previewing the animation effect in real time; (6) determining whether the animation effect is satisfactory, if so, executing the next step, if not, returning to step (2) or (4); (7) generating animation code through a code generator; (8) integrating the animation code into a Web project.

[0029] The above embodiments are merely illustrative of the principles and effects of the present invention, and are not intended to limit the present invention. Anyone familiar with the art may modify or alter the above embodiments without departing from the spirit and scope of the present invention. Therefore, all equivalent modifications or alterations made by a person of ordinary skill in the art without departing from the spirit and technical concept disclosed by the present invention shall still be covered by the claims of the present invention.

Claims

1. A Web animation generator based on timeline control, characterized in that: include: Animation timeline control module, including: keyframe setting module, which creates keyframes by clicking on a specific point on the timeline or dragging; parameter setting module, which sets editable properties for each keyframe; slider control module, which browses and edits different stages of the animation by dragging the slider control; real-time preview module, when the slider control moves, the animation shows the state of the slider control at the corresponding time point; duration and delay setting module, which sets the duration and delay time for each keyframe; Animation effect library, which integrates and provides several preset animation effects; Dynamic animation adjustment module, used to dynamically change animation parameters during animation execution; User interaction module, allowing users to build animation timelines by dragging and clicking; using intuitive drag-and-drop and property setting operations to simplify the animation construction process; A code generator that automatically generates optimized CSS @keyframes animations or JSON structured code using WAAPI based on user actions in the GUI.

2. The timeline-controlled Web animation generator according to claim 1, characterized in that: The code generator includes a user operation capture module for operation action recording and data model synchronization; an internal data structure construction module for creating an internal data structure to represent keyframes and attribute animations, calculating the start time, duration, and end time of the animation, and associating them with the keyframes and attribute animations; an animation parameter processing module for optimizing animation parameters, as well as unit and prefix processing; a CSS @keyframes generation module for generating CSS @keyframes animation code, allocating a percentage to each keyframe according to the timeline and setting the corresponding CSS attribute value, and completing the `animation` CSS attribute of each element; Generate WAAPI code module, convert the internal data model into JSON format acceptable to Web Animations API, and convert keyframes and attribute animations into WAAPI key-value pair lists; code formatting module, formatting and error detection of generated code; The cross-browser compatibility module performs cross-browser testing on the generated code and automatically adds CSS property prefixes.

3. The timeline-controlled Web animation generator according to claim 2, characterized in that: The dynamic animation adjustment module includes: a parameter tracking module, which tracks the parameters of the animation key frames through an event monitoring mechanism when the animation is playing; a state capture module, which captures the state of the current animation execution; an adjustment control module, which is used to adjust the animation parameters; a real-time feedback module, when the adjustment is made, the animation responds and displays the adjusted effect in the preview window; an animation playback control module, which is used to control the animation playback process; a time point jump module, which is used to jump to any time point on the timeline; a data binding module, which is used to bind the animation parameters to the adjustment controls; a parameter change module, which is used to process all parameter changes in real time in the memory; a buffer operation module, which uses efficient calculation and rendering methods to reduce the delay of real-time adjustment and preview; a graphics engine integration module, which integrates an advanced graphics rendering engine to support real-time preview of complex animations; an API interface module, which provides a set of APIs so that developers can control and adjust animation parameters programmatically; and a real-time data storage module, which is used for data storage.

4. The timeline-controlled Web animation generator according to claim 3, characterized in that: The user interaction module includes a component library module, which provides a component library containing various animation elements or objects; a drag-and-drop module, which is used to drag the required elements from the component library to the canvas or timeline; Element selection module, used to click and select animation elements on the canvas, and display related properties in the property panel; Property editing module, adjust the style and behavior of the selected element by changing the values ​​in the property panel; Intuitive feedback module, used to reflect the results of clicks and property changes on the canvas; Real-time synchronization module, any edits on the timeline are updated in real time to the canvas preview; resource manager module, provides a resource manager interface that allows users to upload and manage external resources; drag and drop import module, used to drag local resources into the resource manager, the resources will be uploaded to the server and can be used in animation; timeline interaction module, used to drag the keyframes on the timeline to change their position, adjust the start and end time and duration of the animation by dragging the time bar on the timeline, or delete the keyframes by right-clicking.

5. The method for implementing a timeline-controlled Web animation generator according to any one of claims 1 to 4, characterized in that: The steps include: (1) Run the Web animation generator based on timeline control; (2) Select the animation object; (3) Apply preset animation effects; (4) Adjust animation parameters through the animation timeline control module; (5) Real-time preview of animation effects; (6) Determine whether the animation effect is satisfactory. If so, proceed to the next step. If not, return to step (2) or (4). (7) Generate animation code through the code generator; (8)Integrate animation code into web projects.

Images