Method for animation development and related product
By using the preview tool and configuration interface to adjust the animation effects in real time, the problems of high CSS development costs and complex compatibility are solved, and efficient animation development and rapid iteration are achieved.
Patent Information
- Application Number
- CN202510272531.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-03-07
- Publication Date
- 2025-07-11
AI Technical Summary
In the prior art, animation development relies on CSS to lead to high development costs, long development cycles and complex compatibility testing, making it difficult to meet the market demand for rapid iteration.
By loading and parsing animation description files using the preview tool, providing a configuration interface for real-time adjustments, and generating target animation description files and code files, avoiding manual code modification.
Improves animation development efficiency, reduces development time and cost, adapts to the compatibility of multiple devices and browsers, and supports rapid iteration.
Smart Images
Figure CN120298546A_ABST
Abstract
Description
Technical Field
[0001] This disclosure generally relates to the field of animation development technology. More specifically, this disclosure relates to a method, a processing device, and a computer-readable storage medium for animation development. Background Art
[0002] In the core business scenarios of user growth, there are a large number of animation interaction design requirements. And given the rapid changes in the market environment and user preferences, interactive animations need to maintain a very high iteration frequency to continuously attract new users, enhance user stickiness, and promote continuous business growth. In the past, the design of interactive animations relied to a large extent on CSS (Cascading Style Sheets) to achieve. Although this method brings basic dynamic effects to web pages, its limitations are becoming increasingly prominent.
[0003] First of all, the process of creating and adjusting CSS animations is often time-consuming. Especially when pursuing complex animation effects, the development cycle is significantly extended. Secondly, due to the differences in the support of CSS by different browsers, developers need to spend additional time and effort on compatibility testing and fixing to ensure that the animation effects can be consistently displayed on different devices, which undoubtedly increases the development cost.
[0004] Therefore, there is an urgent need to provide a method for animation development to make the animation have higher development efficiency. Summary of the Invention
[0005] In order to solve at least one or more of the above-mentioned technical problems, this disclosure proposes a method for animation development in multiple aspects to solve at least one defect mentioned in the above background art.
[0006] In a first aspect, this disclosure provides a method for animation development, including: obtaining an animation description file; using a preview tool to load and parse the animation description file to display the animation effect corresponding to the animation description file on the preview playback interface of the preview tool, where the preview playback interface includes a configuration interface; receiving configuration items set by the user based on the configuration interface, and adjusting the animation effect in real time according to the configuration items; and receiving a user confirmation instruction, and generating a target animation description file and / or a target animation code file corresponding to the adjusted animation effect according to the configuration items.
[0007] In some embodiments, the preview tool is implemented based on lottie-web.
[0008] In some embodiments, the step of loading and parsing the animation description file by using the preview tool to display the animation effect corresponding to the animation description file on the preview play interface of the preview tool includes: loading and parsing the animation description file by using the preview tool to obtain the animation code file corresponding to the animation description file, where the preview tool loads the animation description file in an asynchronous loading manner; and rendering the animation code file to display the corresponding animation effect on the preview play interface.
[0009] In some embodiments, the step of receiving the configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: if a first preset configuration item is received, performing font adaptive scaling on the animation text; and adjusting the vertical centering position of the text according to the line height and text box height of the animation text after font adaptive scaling, and rendering it to the preview play interface.
[0010] In some embodiments, the step of receiving the configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: if a second preset configuration item is received, obtaining the html fragment corresponding to the second preset configuration item and the associated animation attributes, where the html fragment is imported by the user through the configuration interface; synchronously injecting the html fragment and the animation attributes into the corresponding position in the animation code file, and rendering it to the preview play interface.
[0011] In some embodiments, the step of receiving the configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: if a third preset configuration item is received, obtaining the style data corresponding to the third preset configuration item, where the style data is input by the user through the configuration interface and includes the styles of multiple paragraphs in the text; and rendering the style data to the text elements of the corresponding paragraphs.
[0012] After rendering the style data to the text elements of the corresponding paragraphs in some embodiments, it includes: if the total character width of a text line is greater than the text box width, determining a scaling ratio according to the largest font size in the text line; and scaling and looping the characters in the text line at the scaling ratio until the total character width of the text line is less than the text box width.
[0013] In some embodiments, the step of receiving the configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: if a fourth preset configuration item is received, performing mirror flipping on the animation text; and identifying the target elements in the animation text that are not mirror flipped, and performing mirror flipping on the target elements again.
[0014] In a second aspect, the present disclosure provides a processing device for animation development, including: a processor configured to execute program instructions; and a memory configured to store program instructions, which, when loaded and executed by the processor, cause the processor to execute the method for animation development according to the first aspect of the present disclosure.
[0015] In a third aspect, the present disclosure provides a computer-readable storage medium storing program instructions, which, when loaded and executed by a processor, cause the processor to execute the method for animation development according to the first aspect of the present disclosure.
[0016] Through the method for animation development provided as above, the embodiments of the present disclosure load and parse an animation description file by using a preview tool to display the animation effect corresponding to the animation description file on the preview play interface of the preview tool, thereby realizing animation playback. And by setting a configuration interface including various configuration items on the preview play interface, developers can complete the adjustment of the animation effect by setting the configuration items and inputting relevant information, and can generate a target description file and / or a target animation code file corresponding to the adjusted animation effect according to the configuration items, without the need for developers to manually modify the animation code, achieving the effect of improving the efficiency of animation development. BRIEF DESCRIPTION OF THE DRAWINGS
[0017] By reading the following detailed description with reference to the accompanying drawings, the above and other objects, features and advantages of the exemplary embodiments of the present disclosure will become readily understood. In the drawings, several embodiments of the present disclosure are shown in an exemplary and non-limiting manner, and the same or corresponding reference numerals represent the same or corresponding parts, wherein:
[0018] Figure 1 An exemplary flowchart of the method for animation development according to an embodiment of the present disclosure is shown;
[0019] Figure 2 An exemplary flowchart of the method for animation development according to an embodiment of the present disclosure is shown;
[0020] Figure 3 An exemplary flowchart of the method for animation development according to an embodiment of the present disclosure is shown;
[0021] Figure 4 An exemplary flowchart of the method for animation development according to an embodiment of the present disclosure is shown;
[0022] Figure 5 An exemplary flowchart of the method for animation development according to an embodiment of the present disclosure is shown;
[0023] Figure 6 An exemplary structural block diagram of an electronic device according to an embodiment of the present disclosure is shown. Detailed implementation manners
[0024] The following will clearly and completely describe the technical solutions in the embodiments of the present disclosure with reference to the accompanying drawings in the embodiments of the present disclosure. Obviously, the described embodiments are some, but not all, of the embodiments of the present disclosure. All other embodiments obtained by those of ordinary skill in the art based on the embodiments in the present disclosure without creative efforts shall fall within the protection scope of the present disclosure.
[0025] It should be understood that the terms "including" and "comprising" used in the specification and claims of the present disclosure indicate the presence of the described features, wholes, steps, operations, elements, and / or components, but do not exclude the presence or addition of one or more other features, wholes, steps, operations, elements, components, and / or their combinations.
[0026] It should also be understood that the terms used in the specification of the present disclosure are only for the purpose of describing specific embodiments and are not intended to limit the present disclosure. As used in the specification and claims of the present disclosure, unless the context clearly indicates otherwise, the singular forms "a", "an", and "the" are intended to include the plural forms. It should be further understood that the term "and / or" used in the specification and claims of the present disclosure refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.
[0027] As used in this specification and the claims, the term "if" can be interpreted as "when", "once", "in response to determining", or "in response to detecting" according to the context. Similarly, the phrase "if determined" or "if [the described condition or event] is detected" can be interpreted as meaning "once determined", "in response to determining", "once [the described condition or event] is detected", or "in response to detecting [the described condition or event]" according to the context.
[0028] The following will describe in detail the specific implementation manners of the present disclosure with reference to the accompanying drawings.
[0029] Exemplary application scenarios
[0030] Interactive animations are widely used in business scenarios for user growth to enhance user experience, increase user stickiness, and promote user conversion. These scenarios generally cover the entire process from when a user first contacts an application or website to in-depth use and possible conversion into a loyal user. Due to the rapid changes in the market environment, the continuous evolution of user preferences, and the continuous optimization of product functions, the demands for animated interactions are not only diverse but also have a very high iteration frequency.
[0031] In some existing solutions, the technical implementation of interactive animations generally relies on CSS. However, developing interactive animations using CSS has some drawbacks. First, the development cost of CSS is relatively high. Especially when building complex animations, a large amount of style code needs to be written, increasing the difficulty of development and maintenance. Second, although CSS provides rich animation effects, in some complex scenarios or delicate designs, its visual restoration may not fully meet the expectations of designers, resulting in a gap between the animation effect and the expectation.
[0032] Exemplary application scenarios
[0033] In view of this, embodiments of the present disclosure provide a method for animation development, which optimizes the animation effect by adjusting the configuration items of the preview tool and can automatically generate an animation code file for direct copying and use in the project, making the interactive animation have higher development efficiency and being able to adapt to multiple scenarios. Figure 1 FIG. shows an exemplary flowchart of a method 100 for animation development according to some embodiments of the present disclosure, as Figure 1 shown, in step S101, the method 100 obtains an animation description file. The animation description file is a file used to store and define the animation content. Through these files, developers can define how the animation is displayed, how it changes in different times and spaces, or how it interacts with user operations. It can be understood that the animation description file cannot be directly played. It is necessary to further load and parse the data stored in the animation description file and render the animation effect before it can be played.
[0034] In some embodiments, the animation description file can be designed by personnel such as animation designers using animation design software according to the animation effect requirements. For example, an animation designer can produce an animation in adobe after effects (abbreviated as AE) software according to the animation effect requirements, and after completing the animation production, export the animation description file through the bodymovin plug-in.
[0035] In some embodiments, the file format of the animation description file can be the JSON format.
[0036] Subsequently, the process reaches step S102. In this step S102, the method 100 uses the preview tool to load and parse the animation description file to display the animation effect corresponding to the animation description file on the preview playback interface of the preview tool, where the preview playback interface includes a configuration interface.
[0037] In this embodiment, the preview tool is implemented based on lottie - web. Lottie - web is an open - source JavaScript library designed to help developers render and display Lottie animations on web pages. The Lottie - web library can read the information of the animation description file in the JSON file format and render smooth animations on the web page. Specifically, in this embodiment, the preview tool is obtained by improving on the basis of Lottie - web. It can be understood that the preview tool can be obtained by installing the Lottie - web library, using the functions provided by the Lottie - web library, and making corresponding improvements to the functions provided by Lottie - web. The corresponding method steps implemented by using the functions provided by the Lottie - web library itself in this disclosure embodiment will not be described in detail, and only the optimized and improved parts based on Lottie - web will be specifically described. Those skilled in the art can refer to the official documentation or instructions of the Lottie - web library to obtain more specific information on how to use the library.
[0038] Specifically, as a specific implementation manner of step S102, the preview tool can be used to load and parse the animation description file to obtain the animation code file corresponding to the animation description file. Then, the animation code file is rendered to display the corresponding animation effect on the preview playback interface. In this embodiment, the loading method of Lottie - Web is changed from synchronous loading to asynchronous loading, so that the preview tool loads the animation description file in an asynchronous loading manner, thereby improving the loading speed of the web page's first - screen and achieving a performance improvement of about 100 milliseconds.
[0039] It can be understood that the synchronous loading of Lottie - Web means that tasks are executed one by one in order, and the next task will not be continued until the current task is completed, resulting in a slow loading speed. After changing the synchronous loading of Lottie - Web to asynchronous loading, multiple tasks can be executed simultaneously, thereby improving the web page loading speed.
[0040] Furthermore, since the preview tool of this embodiment is implemented based on lottie - web, the preview playback interface of this embodiment can create an svg canvas based on lottie - web to render the animation code file to display the corresponding animation effect. Specifically, svg is a vector graphics format that can accurately describe the shape and details of a graphic. During the rendering process of Lottie - web, the animation data is converted into a series of svg elements, ensuring a high - quality, scalable, and clear animation effect on the web page. This method is particularly suitable for displaying animations on different devices and screens and will not be distorted due to size changes, thus ensuring the visual consistency of the animation at various resolutions.
[0041] In some embodiments, the text of the animated text can be rendered using the svg single-character rendering method.
[0042] After that, the process proceeds to step S103, where method 100 receives the configuration items set by the user based on the configuration interface and adjusts the animation effect in real time according to the configuration items. The configuration interface provides various configuration items for different adjustments of the animation effect. Developers only need to select the corresponding configuration items and / or input the corresponding configuration content in the configuration items to achieve the adjustment of the animation effect and can see the adjusted animation effect in real time on the preview playback interface, without the need for developers to manually modify the animation code file, thereby improving the animation development efficiency.
[0043] Finally, the process reaches step S104, where method 100 receives the user confirmation instruction and generates the target animation description file and / or target animation code file corresponding to the adjusted animation effect according to the configuration items. In some embodiments, after the developer sets the configuration items and views the adjusted animation effect through the preview playback interface and meets the requirements, the developer can trigger, for example, a button or a link on the preview playback interface for generating the target animation description file and / or target animation code file, so that the preview tool receives the user confirmation instruction, and then generates the target animation description file and / or target animation code file corresponding to the adjusted animation effect according to the configuration items set by the developer, realizing the animation development. The developer can export the target animation description file and / or target animation code file and directly copy them into the corresponding project for use.
[0044] The above Figure 1 Generally describes method 100 for animation development of the present disclosure. The embodiments of the present disclosure load and parse the animation description file by using the preview tool to display the animation effect corresponding to the animation description file on the preview playback interface of the preview tool, realizing animation playback. And by setting a configuration interface including various configuration items on the preview playback interface, developers can complete the adjustment of the animation effect by setting the configuration items and inputting relevant information, and can generate the target description file and / or target animation code file corresponding to the adjusted animation effect according to the configuration items, without the need for developers to manually modify the animation code, achieving the effect of improving the animation development efficiency.
[0045] However, those skilled in the art should understand that Figure 1 The method shown is exemplary rather than restrictive, and those skilled in the art can make adjustments as needed. Next, multiple embodiments and their variants of method 100 of some embodiments of the present disclosure will be further described.
[0046] In some embodiments, referring to Figure 2 , Figure 2An exemplary flowchart of method 200 for animation development showing some embodiments of the present disclosure is presented. It can be understood that method 200 is a specific implementation of method 100 described above. Therefore, the same steps in method 200 as those in method 100 will not be elaborated in this embodiment. Similarly, in any method proposed hereinafter that is a specific implementation of method 100, the same steps as those in method 100 will not be elaborated either.
[0047] As Figure 2 shown, the foregoing step S103 may include step S203 and step S204. Specifically, at step S203, if method 200 receives a first preset configuration item, it performs font adaptive scaling on the animation text. In this embodiment, when the user triggers the first preset configuration item through the configuration interface, the preview tool can receive the first preset configuration item. It can be understood that other preset configuration items of the configuration interface are also triggered by the user through the configuration interface, and will not be elaborated hereinafter. If the first preset configuration item is received, the preview tool obtains the animation text selected by the user, and then performs font adaptive scaling on the animation text selected by the user. If the user does not select animation text, it is default to perform font adaptive scaling on all animation text.
[0048] It can be understood that the animation text refers to the animation content presented by the animation effect. The preview tool in this embodiment is implemented based on lottie-web. Therefore, the font adaptive scaling function provided by lottie-web is used to perform font adaptive scaling on the animation text.
[0049] At step S204, method 200 adjusts the vertical centering position of the text according to the line height and text box height of the animation text after font adaptive scaling, and renders it to the preview playback interface. In this embodiment, after the animation text is subjected to font adaptive scaling, the vertical centering position of the animation text is further adjusted so that the animation text can still maintain vertical centering after font adaptive scaling, thereby ensuring that the animation text still has a good aesthetic effect after font adaptive scaling.
[0050] As a specific implementation, assume that the height of the text box after font adaptive scaling is Y and the line height is H. Therefore, the vertical centering position of the animation text can be (Y - H / 2).
[0051] The above is generally combined with Figure 2Step S103 in method 100 for animation development disclosed herein is further described. In an embodiment of the present disclosure, when a first preset configuration item is received, font adaptive scaling is performed on the animation text. After performing font adaptive scaling on the animation text, the vertical centering position of the animation text is readjusted according to the line height and text box height of the animation text, so that the animation text remains vertically centered after font adaptive scaling, thereby ensuring a better aesthetic effect.
[0052] However, those skilled in the art should understand that the method shown above is exemplary rather than restrictive, and those skilled in the art can make adjustments as needed. Next, multiple embodiments and their variants of method 100 of some embodiments of the present disclosure are further described.
[0053] In some embodiments, referring to Figure 3 , Figure 3 FIG. shows an exemplary flowchart of method 300 for animation development according to some embodiments of the present disclosure. As Figure 3 shown, the above step S103 may further include steps S303 to S304. First, at step S303, if method 300 receives a second preset configuration item, an html fragment corresponding to the second preset configuration item and associated animation attributes are obtained, where the second preset configuration item in the configuration interface provides an html import entry. The user can import the html fragment through the html import entry corresponding to the second preset configuration item in the configuration interface. Through this entry, developers can conveniently load and apply relevant configurations, thereby realizing the customization and adjustment of interface elements without manually modifying and debugging the animation code file.
[0054] In this embodiment, the second preset configuration item is associated with a preset slot specification. The slot specification is defined by animators and other personnel when using software such as Adobe After Effects for animation production. The slot specification includes animation attributes. Therefore, when the second preset configuration item is received, the associated animation attributes can be obtained by identifying the slot specification associated with the second preset configuration item. It can be understood that the animation attributes refer to different dynamic characteristics used to control the corresponding html element during the animation process. For example, the animation attributes may include, but are not limited to, the position, transparency, color change, scaling size, etc. of the html element.
[0055] Then the process reaches step S304, where the method 300 synchronously injects the html fragment and the animation attribute into the corresponding position of the animation code file and renders it to the preview playback interface. In this way, the html fragment and the animation attribute can be automatically and synchronously injected into the animation code file, avoiding the tedious manual modification and repeated operations of the developer, and further improving the efficiency of animation development.
[0056] Specifically, this embodiment can create a DOM container separated from the SVG canvas, synchronously inject HTML and animation attributes into the DOM container, and render it to the preview and playback interface.
[0057] The above overall combination Figure 3 Step S103 in the method 100 for animation development disclosed in the present invention is further described. When receiving the second preset configuration item, the embodiment of the present invention obtains the html fragment imported by the user through the html import entry corresponding to the second preset configuration item of the configuration interface and the animation attribute associated with the second preset configuration item, and then synchronously injects the html fragment and the animation attribute into the corresponding position in the animation code file, and renders them to the preview and playback interface, thereby realizing real-time adjustment of the animation effect without the need for the developer to manually modify and debug the animation code file, further improving the efficiency of animation development.
[0058] However, those skilled in the art should understand that the above method is exemplary rather than restrictive, and those skilled in the art can make adjustments as needed. Next, multiple embodiments and variations of the method 100 of some embodiments of the present disclosure are further described.
[0059] In some embodiments, reference Figure 4 , Figure 4 An exemplary flow chart of a method 400 for animation development according to some embodiments of the present disclosure is shown. Figure 4 As shown, the above step S103 may also include step S403 and step S404. In step S403, if the method 400 receives the third preset configuration item, the style data corresponding to the third preset configuration item is obtained, and the style data includes the styles of multiple paragraphs in the text. In this embodiment, the developer or other user inputs the style data at the corresponding position of the third preset configuration item in the configuration interface, and associates and binds the style data with the corresponding paragraph of the animated text.
[0060] The third preset configuration item in the configuration interface can be achieved by adding a groupt input parameter to lottie-web's original updateDocumentData interface. In groupt, a paragraph of text can be split into multiple paragraphs, and a separate style receiving entry is provided for each paragraph of text for construction, so as to perform flexible style customization and construction.
[0061] Then, at step S404, method 400 renders the style data to the text element of the corresponding paragraph. In this embodiment, the style data is rendered to the text element of the paragraph associated and bound with it. This text element refers to the text element node within the svg canvas, and can also be referred to as an svg node.
[0062] In this embodiment, users such as developers only need to input the style data in the third preset configuration item of the configuration interface and bind it to the corresponding paragraph of the animated text, then they can modify the style of the animated text and can see the adjusted animated effect in real time, without manually modifying and debugging the animation code, which can further improve the animation development efficiency.
[0063] In some embodiments, after step S404, steps S405 and S406 can be further executed. Among them, at step S405, method 400 executes to determine the scaling ratio according to the maximum font size within the text line if the total character width of the text line is greater than the text box width. In some embodiments, the scaling ratio can be the reciprocal of the maximum font size. For example, if the maximum font size is F, then the scaling ratio is 1 / F.
[0064] Then, at step S406, method 400 scales and loops the characters within the text line by the scaling ratio until the total character width of the text line is less than the text box width. Specifically, the characters within the text line are reduced by F - F*(1 / F) at the above scaling ratio and looped until the width of all characters, that is, the total character width, can be less than the text box width. Through this operation, it can be avoided that text overflows or becomes too large or too small after the text style is modified, ensuring that the text can maintain a consistent display effect on various devices and in various environments.
[0065] The above is generally combined Figure 4 The step S103 in method 100 for animation development disclosed in this disclosure is further described. When receiving the third preset configuration item in the embodiment of this disclosure, the style data including multiple paragraphs input by the user through the third preset configuration item of the configuration interface is obtained, and the style data is rendered to the text element of the corresponding paragraph, thereby realizing the style adjustment of the animated text, which can further improve the animation development efficiency. And after the style adjustment, if it is detected that the total character width of the text line is greater than the text box width, the characters of the text line are adaptively scaled to avoid text overflow or becoming too large or too small after the text style is modified, ensuring that the text can maintain a consistent display effect on various devices and in various environments.
[0066] However, those skilled in the art should understand that the methods shown above are exemplary rather than restrictive, and those skilled in the art can make adjustments as needed. Next, multiple embodiments of method 100 of some embodiments of the present disclosure and their variants will be further described.
[0067] In some embodiments, the reading habits in different countries are different. For example, the reading habit in China is from left to right, while the reading habit in the Middle East market is from right to left. To make the animation effect adapt to the reading habits of different countries, in some embodiments, with reference to Figure 5 , Figure 5 FIG. shows an exemplary flowchart of method 500 for animation development according to some embodiments of the present disclosure. As Figure 5 shown, step S103 described above may further include step S503 and step S504. Specifically, at step S503, if method 500 receives a fourth preset configuration item, it performs a mirror flip on the animation text. The user only needs to trigger the fourth preset configuration item in the configuration interface to make the preview tool receive the fourth preset configuration item, and then the mirror flip of the animation text can be realized. For example, the user can click on the trigger identifier of the fourth preset configuration item to trigger the fourth preset configuration item. The trigger identifier can be a button or a link, and this embodiment does not make specific limitations on this. Then at step S504, method 500 identifies the target elements in the animation text that are not mirror-flipped and performs a second mirror flip on the target elements. Based on this operation, the animation text can be flipped to adapt to the reading habits of different countries, so that the finally generated target description file and / or target animation code file can be applicable to different application scenarios.
[0068] As an example, to achieve the mirror flip, the overall flip can be achieved by adding transform: xcale(-1) to the animation container. After identifying the target elements that do not need to be mirrored, such as the text layer, the transform property can be modified to flip these target elements back. It can be understood that in Lottie-Web, the animation container is usually a specified DOM element, and the Lottie animation will be rendered in this container.
[0069] In some embodiments, after step S504, the rendering method of the animation text can also be modified to the method of nesting span within div for rendering, so as to provide a context environment for the entire line of content of the text and let the browser automatically adjust the word order.
[0070] It should be noted that, as described above, when the word order is not adjusted, the text of the animated text is rendered using the svg single-character rendering method. Therefore, when or after changing the rendering method of the animated text to the method of nesting spans within a div, it is also necessary to use the DOM to re-implement the functions that originally relied on other rendering methods, such as svg single-character rendering.
[0071] The above is combined overall Figure 5 The step S103 in the method 100 for animation development disclosed in this disclosure is further described. When the fourth preset configuration item is received in the embodiments of this disclosure, the word order is converted by mirroring and flipping the animated text to adapt to the reading habits of different national markets, so that the finally generated target animation description file and / or target animation code file can be applicable to different application scenarios. However, those skilled in the art should understand that the above-described method is exemplary rather than restrictive, and those skilled in the art can make flexible adjustments according to needs. Next, multiple embodiments and their variant solutions of the method 100 of some embodiments of this disclosure are further described.
[0072] In some embodiments, the above-mentioned step S103 may further include: if it is detected that the animated text reaches the maximum number of lines, perform text adaptive scaling on the animated text and render it to the said preview playback interface. By this operation, text overflow or occlusion can be avoided.
[0073] In some embodiments, when performing text adaptive scaling, the line number N where the current text is located is recorded, and then multiplied by the line height of the text to obtain and adjust the vertical positioning of the text, so that the text remains centered vertically after text adaptive scaling, with a better aesthetic effect. In some embodiments, the fifth preset configuration item can be pre-configured in the configuration interface to set the maximum number of lines for line breaks, so as to flexibly adjust the line break requirements.
[0074] In some embodiments, the above-described step S103 may further include: if a line break identifier is detected, perform a line break operation on the animated text. The line break identifier can be \r.
[0075] The above is combined overall to further describe the step S103 in the method 100 for animation development disclosed in this disclosure. When the animated text reaches the maximum number of lines, text adaptive scaling is performed on the animated text to avoid text overflow or occlusion. However, those skilled in the art should understand that the above-described method is exemplary rather than restrictive, and those skilled in the art can make flexible adjustments according to needs.
[0076] Thus, the method provided by the embodiments of the present disclosure for animation development is described above, in which the animation effect is optimized by adjusting the configuration items of the preview tool, and the generated target animation description file and / or target animation code file are used in the project, improving the animation development efficiency and making it applicable to diverse application scenarios.
[0077] To implement the method steps described in the foregoing of the present disclosure in terms of software and hardware, embodiments of the present disclosure further provide a processing device, which is an electronic device as Figure 6 shown. Figure 6 An exemplary structural block diagram of the electronic device 600 according to an embodiment of the present disclosure is shown. As Figure 6 shown, the electronic device 600 of the present disclosure may include a processor 601 and a memory 602. Among them, an executable program is stored on the memory 602, and the processor 601 can load and execute the executable program, so that the electronic device 600 implements any of the method steps described above.
[0078] In an example scenario, the processor 601 can be used to control the memory 602. Further, the processor 601 may be a central processing unit (CPU), an application processor (AP), etc. integrated in the electronic device 600; and the memory 602, as the hardware for implementing the storage function, may be a read-only memory (ROM), a dynamic RAM (DRAM), etc.
[0079] The present disclosure can also be implemented as a computer-readable storage medium, in which program instructions are stored. When the program instructions are executed by the processor of the electronic device, the processor executes at least part of the various steps of the method of the present disclosure described above. In the embodiments of the present disclosure, a computer program product is also provided, including a computer program or instruction, which when executed by the processor, implements the method for animation development described in the embodiments of the present disclosure.
[0080] Although multiple embodiments of the present disclosure have been shown and described herein, it will be apparent to those skilled in the art that such embodiments are provided by way of example only. Those skilled in the art can think of many changes, alterations, and alternative ways without departing from the spirit and scope of the present disclosure. It should be understood that various alternative solutions to the embodiments of the present disclosure described herein can be adopted in the practice of the present disclosure. The appended claims are intended to define the scope of protection of the present disclosure and thus cover equivalents or alternatives within the scope of these claims.
Claims
1. A method for animation development, characterized in that, including: Obtain an animation description file; Use a preview tool to load and parse the animation description file to display the animation effect corresponding to the animation description file on the preview playback interface of the preview tool, where the preview playback interface includes a configuration interface; Receive configuration items set by the user based on the configuration interface, and adjust the animation effect in real time according to the configuration items; and Receive a user confirmation instruction, and generate a target animation description file and / or a target animation code file corresponding to the adjusted animation effect according to the configuration items.
2. The method according to claim 1, characterized in that, The preview tool is implemented based on lottie-web.
3. The method according to claim 1, characterized in that, The step of using the preview tool to load and parse the animation description file to display the animation effect corresponding to the animation description file on the preview playback interface includes: Use the preview tool to load and parse the animation description file to obtain the animation code file corresponding to the animation description file, where the preview tool loads the animation description file in an asynchronous loading manner; and Render the animation code file to display the corresponding animation effect on the preview playback interface.
4. The method according to claim 1, wherein The step of receiving configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: If a first preset configuration item is received, perform font adaptive scaling on the animation text; and Adjust the vertical centering position of the text according to the line height and text box height of the animation text after font adaptive scaling, and render it to the preview playback interface.
5. The method according to claim 1, characterized in that, The step of receiving configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: If a second preset configuration item is received, obtain the html fragment corresponding to the second preset configuration item and the associated animation attributes, where the html fragment is imported by the user through the configuration interface; Synchronously inject the html fragment and the animation attributes into the corresponding position in the animation code file, and render it to the preview playback interface.
6. The method according to claim 1, characterized in that, The step of receiving configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: If a third preset configuration item is received, obtain the style data corresponding to the third preset configuration item, where the style data is input by the user through the configuration interface, and the style data includes the styles of multiple paragraphs in the text; and Render the style data to the text elements of the corresponding paragraphs.
7. The method according to claim 6, wherein After rendering the style data to the text elements of the corresponding paragraphs, it includes: If the total character width of a text line is greater than the text box width, determine the scaling ratio according to the largest font size in the text line; and Scale and loop the characters in the text line at the scaling ratio until the total character width of the text line is less than the text box width.
8. The method according to claim 1, wherein The step of receiving configuration items set by the user based on the configuration interface and adjusting the animation effect in real time according to the configuration items includes: If a fourth preset configuration item is received, perform mirror flipping on the animation text; and Identify the target elements in the animation text that are not mirror flipped, and perform mirror flipping on the target elements again.
9. A processing device for animation development, characterized in that, including: A processor configured to execute program instructions; and a memory configured to store the program instructions, which, when loaded and executed by the processor, cause the processor to execute the method for animation development according to any one of claims 1-8.
10. A computer-readable storage medium storing program instructions, characterized in that, When the program instructions are loaded and executed by the processor, the processor is caused to execute the method for animation development according to any one of claims 1-8.