Animation processing method, device and computer readable storage medium

Abstract

The present application provides an animation processing method, device and computer-readable storage medium, wherein the method comprises: creating an animation based on a style rule for creating a cascading style sheet, and associating the animation with a selector of a target container; configuring attribute information of the animation; wherein the attribute information is used to control the display effect of scrolling information in the animation; and controlling the selector to scroll and display the scrolling information based on the attribute information. The present application can achieve a smooth animation effect, improve the user experience and the presentation effect of the scrolling information.

Description

Technical Field

[0001] The embodiments of the present application relate to the field of animation processing technology in financial technology (Fintech), and relate to but are not limited to an animation processing method, device and computer-readable storage medium. Background Art

[0002] With the development of computer computing, more and more technologies are applied in the financial field. The traditional financial industry is gradually transforming to financial technology (Fintech). However, due to the security and real-time requirements of the financial industry, higher requirements are also placed on technology. At present, in the field of financial technology, most products include the function of announcements with a ticker effect, such as the display function of rolling information with a ticker effect such as the loan prime rate (LPR).

[0003] In the current scenario of multiple messages being played, the animation application programming interface (API) is called again through JavaScript's setInterval() and setTimeout() functions a few seconds after each scroll to control the loop playback of the marquee. However, since the repeated calls of the API by these two functions consume memory, it leads to memory leaks, program freezes, or even crashes. Summary of the invention

[0004] The embodiments of the present application provide an animation processing method, device and computer-readable storage medium, which control the infinite scrolling of scrolling information through a cascading style sheet, thereby achieving a smooth animation effect, improving user experience and announcement presentation effect.

[0005] The technical solution of the embodiment of the present application is implemented as follows:

[0006] An embodiment of the present application provides a method, comprising: creating an animation based on a style rule for creating a cascading style sheet, and associating the animation to a selector of a target container;

[0007] Configure the attribute information of the animation; the attribute information is used to control the display effect of the scrolling information in the animation;

[0008] The control selector scrolls and displays the scroll information based on the attribute information.

[0009] The present application provides a device, including:

[0010] The memory is used to store executable instructions; the processor is used to implement the above method when executing the executable instructions stored in the memory.

[0011] An embodiment of the present application provides a computer-readable storage medium storing executable instructions for causing a processor to execute and implement the above method.

[0012] The embodiments of the present application have the following beneficial effects:

[0013] By creating an animation based on the style rules used to create a cascading style sheet, and associating the animation with the selector of the target container; configuring the attribute information of the animation; wherein the attribute information is used to control the display effect of the scrolling information in the animation; and controlling the selector to scroll and display the scrolling information based on the attribute information. In this way, the scrolling information is controlled to scroll infinitely based on the cascading style sheet, avoiding the control of the scrolling information scrolling based only on the two functions of JavaScript setInterval() and setTimeout(), thereby solving a series of problems such as memory leakage, program freeze or even crash caused by repeated API calls in JavaScript, achieving smooth animation effects, and improving user experience and announcement presentation effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0014] Figure 1 This is an optional architecture diagram of a terminal provided in an embodiment of the present application;

[0015] Figure 2 It is an optional flowchart of the animation processing method provided in the embodiment of the present application;

[0016] Figure 3 It is an optional flowchart of the animation processing method provided in the embodiment of the present application;

[0017] Figure 4 It is an optional flowchart of the animation processing method provided in the embodiment of the present application;

[0018] Figure 5 It is an optional flowchart of the animation processing method provided in the embodiment of the present application;

[0019] Figure 6 It is an optional flowchart of the animation processing method provided in the embodiment of the present application;

[0020] Figure 7 This is an interface for displaying scrolling information in a target container in an embodiment of the present application. Figure 1 ;

[0021] Figure 8 This is an interface for displaying scrolling information in a target container in an embodiment of the present application. Figure 2 . DETAILED DESCRIPTION

[0022] In order to make the purpose, technical solutions and advantages of the present application clearer, the present application will be further described in detail below in conjunction with the accompanying drawings. The described embodiments should not be regarded as limiting the present application. All other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of this application.

[0023] In the following description, reference is made to "some embodiments", which describe a subset of all possible embodiments, but it is understood that "some embodiments" may be the same subset or different subsets of all possible embodiments, and may be combined with each other without conflict. Unless otherwise defined, all technical and scientific terms used in the embodiments of the present application have the same meaning as those commonly understood by those skilled in the art of the technical field of the embodiments of the present application. The terms used in the embodiments of the present application are only for the purpose of describing the embodiments of the present application and are not intended to limit the present application.

[0024] 1) The Loan Prime Rate (LPR) is quoted by a representative quoting bank based on the loan interest rate it provides to its best customers, by adding points to the open market operation rate (mainly the medium-term lending facility rate). Financial institutions should mainly refer to the LPR for loan pricing.

[0025] 2) Memory leak refers to the situation that the dynamically allocated heap memory in the program is not released or cannot be released by the program for some reason, resulting in a waste of system memory, slowing down the program running speed or even causing serious consequences such as system crash.

[0026] 3) Marquee. In computer science, a marquee refers to a string of text that scrolls from the beginning to the end, in an infinite loop, until it stops manually or when a stop condition is true.

[0027] 4) Cascading Style Sheets Level 3 (CSS3) Animation is the effect of gradually changing an element from one style to another. 0% (from) is the start of the animation, and 100% (to) is the end of the animation.

[0028] 5) The size unit of WeChat Mini Program (responsive pixel, rpx) stipulates that the screen width is 750rpx. For example, on a certain terminal, the screen width is 375px, and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels, 1rpx = 0.5px = 1 physical pixel.

[0029] In order to better understand the animation processing method provided in the embodiment of the present application, the animation processing method in the related art is first described:

[0030] In the related art, Solution 1, the marquee effect in the WeChat applet environment is mainly to achieve the marquee effect of horizontal scrolling of a single text. Solution 2, there are also solutions in the WeChat applet to achieve the marquee effect of horizontally connecting and scrolling multiple texts, but they are all based on the animation API of the applet combined with JavaScript to achieve.

[0031] At present, most products on the market have the function of announcements with a ticker effect. Especially for the financial industry, the function of rolling information with a ticker effect, such as LPR and announcements, is more important. At present, a large number of products have realized this function, and the implementation schemes are also different and have their own advantages. However, there are at least the following problems in these implementation schemes:

[0032] (1) The solution for realizing the scrolling effect of a single text in the related art cannot meet the requirement of realizing horizontal connection and scrolling of multiple texts when there are multiple texts. For example, in the current scenario of multiple texts scrolling, because they are identified as a single text, when one text has not completely scrolled out of the display area, another text has already scrolled in the display area.

[0033] (2) The implementation of multiple tickers in the related art uses pure JavaScript technology to calculate the ticker scrolling speed, and uses JavaScript's setInterval() or setTimeout() to control the ticker's loop playback; it relies on the WeChat applet animation API to achieve multiple text ticker effects. However, this implementation method will cause the program to freeze or even crash due to JavaScript memory leaks after the program runs (i.e., the ticker plays) for a certain period of time (calculated to have an 85% probability of the third ticker playing). In terms of visual effects, the ticker effect is sometimes fast and sometimes slow, sometimes stops scrolling, and sometimes suddenly scrolls, and the scrolling text is sometimes clear and sometimes blurred; the program freezes or crashes are specifically manifested as the page is completely stuck, and there is no response when clicking anywhere on the page. What's worse, it will directly flash back or close the software, causing the phone to freeze and heat up.

[0034] The following describes an exemplary application of the animation processing device provided by the embodiment of the present application. The animation processing device provided by the embodiment of the present application can be implemented as any terminal with a screen display function, such as a laptop computer, a tablet computer, a desktop computer, a mobile device (for example, a mobile phone, a portable music player, a personal digital assistant, a dedicated messaging device, a portable gaming device), an intelligent robot, etc., and can also be implemented as a server. The following describes an exemplary application when the animation processing device is implemented as a terminal.

[0035] See also Figure 1, Figure 1 is a schematic diagram of the structure of the terminal 100 provided in an embodiment of the present application, Figure 1 The terminal 100 shown includes: at least one processor 110, at least one network interface 120, a user interface 130 and a memory 150. The various components in the terminal 100 are coupled together via a bus system 140. It is understood that the bus system 140 is used to achieve connection and communication between these components. In addition to the data bus, the bus system 140 also includes a power bus, a control bus and a status signal bus. However, for the sake of clarity, the bus system 140 is not described in detail. Figure 1 Various buses are labeled as bus system 140 .

[0036] The processor 110 can be an integrated circuit chip with signal processing capabilities, such as a general-purpose processor, a digital signal processor (DSP), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc., where the general-purpose processor can be a microprocessor or any conventional processor, etc.

[0037] The user interface 130 includes one or more output devices 131 that enable presentation of media content, including one or more speakers and / or one or more visual display screens. The user interface 130 also includes one or more input devices 132, including user interface components that facilitate user input, such as a keyboard, mouse, microphone, touch screen display, camera, other input buttons and controls.

[0038] The memory 150 may be removable, non-removable or a combination thereof. Exemplarily, hardware devices include solid-state memory, hard disk drive, optical disk drive, etc. The memory 150 may optionally include one or more storage devices physically away from the processor 110. The memory 150 includes a volatile memory or a non-volatile memory, and may also include both volatile and non-volatile memory. The non-volatile memory may be a read-only memory (ROM), and the volatile memory may be a random access memory (RAM). The memory 150 described in the embodiments of the present application is intended to include any suitable type of memory. In some embodiments, the memory 150 is capable of storing data to support various operations, examples of which include programs, modules, and data structures or subsets or supersets thereof, as exemplarily described below.

[0039] Operating system 151, including system programs for processing various basic system services and performing hardware-related tasks, such as a framework layer, a core library layer, a driver layer, etc., for implementing various basic services and processing hardware-based tasks;

[0040] A network communication module 152, for reaching other computing devices via one or more (wired or wireless) network interfaces 120, exemplary network interfaces 120 include: Bluetooth, Wireless LAN (WiFi), and Universal Serial Bus (USB);

[0041] The input processing module 153 is used to detect one or more user inputs or interactions from one of the one or more input devices 132 and translate the detected inputs or interactions.

[0042] In some embodiments, the device provided in the embodiments of the present application can be implemented in software. Figure 1 An animation processing device 154 stored in the memory 150 is shown. The animation processing device 154 may be an animation processing device in the terminal 100. It may be software in the form of a program or a plug-in, and includes the following software modules: a first processing module 1541, a first output module 1542, and a second processing module 1543. These modules are logical, and therefore may be arbitrarily combined or further split according to the functions implemented. The functions of each module will be described below.

[0043] In other embodiments, the device provided in the embodiments of the present application can be implemented in hardware. As an example, the device provided in the embodiments of the present application can be a processor in the form of a hardware decoding processor, which is programmed to execute the animation processing method provided in the embodiments of the present application. For example, the processor in the form of a hardware decoding processor can adopt one or more application specific integrated circuits (Application Specific Integrated Circuit, ASIC), DSP, programmable logic device (Programmable Logic Device, PLD), complex programmable logic device (Complex Programmable Logic Device, CPLD), field programmable gate array (Field-Programmable Gate Array, FPGA) or other electronic components.

[0044] The following will describe the animation processing method provided by the embodiment of the present application in conjunction with the exemplary application and implementation of the terminal 100 provided by the embodiment of the present application. Figure 2 , Figure 2 is an optional flow chart of the animation processing method provided in the embodiment of the present application, which will be combined with Figure 2 The steps shown are explained.

[0045] Step S201 : creating an animation based on a style rule for creating a cascading style sheet, and associating the animation with a selector of a target container.

[0046] In the embodiments of the present application, Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HyperText Markup Language (HTML) or Extensible Markup Language (XML). CSS can not only modify web pages statically, but also dynamically format the elements of web pages in conjunction with various scripting languages. CSS can precisely control the layout of the position of elements in a web page at the pixel level, supports almost all fonts and font sizes, and has the ability to edit web page objects and model styles.

[0047] Here, the style rules used to create CSS include the @keyframes rule of CSS3, which is an upgraded version of CSS technology. The terminal creates an animation based on the @keyframes rule and binds the animation to the selector of the target container to achieve the animation effect. The @keyframes rule controls the intermediate steps in the CSS animation sequence by defining the style of the keyframes in the animation sequence.

[0048] The target container includes a container in CSS, and the container in CSS refers to a container obtained by placing all elements in a box (BOX) based on CSS when formatting a page object. Here, the terminal can control the selector in the target container to scroll and display the scrolling information based on the attribute information to present an animation effect. Here, the selector in the target container includes a class element selector, and the class element selector allows the style to be specified in a manner independent of the document element. The scrolling information includes information in the Fintech field, such as LPR or Fintech announcement information.

[0049] For example, the target container is a marquee container. The terminal first uses @keyframes to create an animation. Second, the terminal binds the defined animation to the class element selector marqueeText of the marquee container. In an achievable manner, binding the defined animation to marqueeText can be achieved by the following operations: the html element of the marquee text content is<view class="marqueeText"> For the text content, set the animation binding to: .marqueeText{animation:marquee}, where marquee is the animation created by @keyframes, such as: @keyframes marquee{...}).

[0050] Step S202: configuring animation attribute information.

[0051] The attribute information is used to control the display effect of the scrolling information in the animation.

[0052] Here, the terminal can configure the attribute information of the animation based on JavaScript.

[0053] In the embodiment of the present application, the attribute information of the animation can be called CSS animation configuration data, that is, the attribute information of the animation refers to the data used to control the animation effect implemented by CSS, such as the parameters for controlling the display duration and display mode of the animation, the parameters for controlling the shape of the animation body, the parameters for controlling the position of the animation body, the parameters for controlling the number of animation bodies, the parameters for controlling the animation body in different time states, etc. It should be noted that the same animation effect can be implemented by different CSS animation configuration data, such as the parameters for controlling the shape of the animation body can be composed of text projection parameters or inner margin parameters, border parameters, background parameters, layer projection parameters, etc., and the animation body is generated by the coordination of various parameters, the parameters for controlling the position of the animation body can be composed of character spacing control parameters, or can be composed of character indentation parameters, the parameters for controlling the number of animation bodies can be hidden by hiding characters parameters to hide the characters and thus change the number of animation bodies, and can also be made transparent by transparency parameters to change the number of animation bodies. It can be seen that due to the flexibility of CSS, the animation effect can be conveniently and flexibly controlled through CSS animation configuration data.

[0054] Step S203: Control the selector to scroll and display the scroll information based on the attribute information.

[0055] In an embodiment of the present application, when the terminal creates an animation based on the style rules for creating CSS, associates the animation to the selector of the target container, and configures the attribute information of the animation, the terminal controls the selector in the target container to scroll the scroll information based on the attribute information to present the animation effect.

[0056] The animation processing method provided by the present application creates an animation based on a cascading style sheet style rule such as the @keyframes rule, and associates the animation with a selector of a target container; further, configures the attribute information of the animation; wherein the attribute information is used to control the display effect of the scrolling information in the animation; and finally controls the selector to scroll and display the scrolling information based on the attribute information. In this way, the scrolling information is infinitely scrolled based on CSS, avoiding the scrolling of the scrolling information based only on the two functions of setInterval() and setTimeout() of JavaScript, thereby solving a series of problems such as memory leakage, program freeze or even crash caused by repeated API calls in JavaScript, achieving smooth animation effects, and improving user experience and announcement presentation effects.

[0057] In some embodiments, before configuring the attribute information of the animation in step S202, the scroll information needs to be determined first. Figure 3 , Figure 3 is a schematic diagram of an implementation flow of determining scroll information provided by an embodiment of the present application, such as Figure 3 As shown, the following steps are included:

[0058] Step S21, obtaining the array to be processed through the application program interface.

[0059] The arrays to be processed include JavaScript arrays and Hypertext Markup Language arrays.

[0060] In an embodiment of the present application, scrolling information can be determined in at least two ways: method 1, the terminal receives given scrolling information, which is applicable to a single announcement scenario; method 2, the terminal determines scrolling information based on information extracted from a database such as basic data. This method is applicable to announcement scenarios with flexible and changeable announcement content, and can flexibly determine scrolling information matching different announcement scenarios based on the basic data in the database.

[0061] Here, the terminal extracts basic data corresponding to the data request from the database through the API. The basic data may be arranged in the form of an array, so the terminal obtains the array to be processed through the API.

[0062] As an example, assume that the basic data returned by the terminal in response to the data request from the backend is:

[0063]

[0064]

[0065] As can be seen from the above, the basic data is arranged in the form of arrays arry, and these arrays are used as arrays to be processed to determine the scroll information.

[0066] Step S22, based on the array screening condition, the JavaScript array and the Hypertext Markup Language array are screened to obtain a target JavaScript array and a target Hypertext Markup Language array that meet the array screening condition.

[0067] In the embodiment of the present application, the array screening condition includes but is not limited to at least one of the following time screening conditions, keyword screening conditions, and source screening conditions. Based on the array screening conditions, the terminal screens the JavaScript array and the hypertext markup language array to obtain a target JavaScript array and a target hypertext markup language array that meet the array screening conditions.

[0068] Exemplarily, the terminal filters the JavaScript array and the Hypertext Markup Language array based on the time filtering condition to obtain the target JavaScript array and the target Hypertext Markup Language array that meet the time filtering condition. When the JavaScript array and the Hypertext Markup Language array are LPR / announcement text, the time filtering condition can be used to filter out the target JavaScript array and the target Hypertext Markup Language array that are within the validity period, such as greater than the start time and less than the end time.

[0069] As an example, when the array filtering conditions include time filtering conditions and keyword filtering conditions, the terminal filters out JavaScript arrays and Hypertext Markup Language arrays that are greater than the start time startTime and less than the end time endTime from the array to be processed based on the array filtering conditions, and at the same time, the keywords include "LPR text content 02".

[0070] Step S23, determining the scroll information based on the target JavaScript array and the target Hypertext Markup Language array.

[0071] In the embodiment of the present application, after obtaining the target JavaScript array and the target Hypertext Markup Language array, the terminal further performs a loop process on the target JavaScript array and the target Hypertext Markup Language array to obtain scrolling information adapted to the target container.

[0072] It can be seen that in the embodiment of the present application, when determining the scrolling information, the terminal flexibly filters out the target array that meets different array screening conditions based on the array to be processed extracted from the database, and the target array includes a target JavaScript array and a target Hypertext Markup Language array, thereby determining the scrolling information matching different announcement scenarios based on the target array, thereby achieving the effect of automatically determining the scrolling information without manual setting, and at the same time expanding the source of the scrolling information to be suitable for more announcement scenarios.

[0073] In some embodiments, the scrolling information includes multiple pieces of information, and the control selector is based on the attribute information to scroll and display the scrolling information, including: controlling any one of the multiple pieces of information to scroll out of a target container along a target direction based on the attribute information through the selector, and controlling the next piece of scrolling information to be displayed in the target container.

[0074] In the embodiment of the present application, the scrolling information may include one piece of information, or the scrolling information may include multiple pieces of information. When the scrolling information includes multiple pieces of information, the terminal controls any one of the multiple pieces of information to scroll out of the target container along the target direction based on the attribute information through the selector, and controls the next scrolling information to be displayed in the target container; in this way, when the target direction is horizontal, multiple pieces of information are horizontally connected and cyclically scrolled from right to left or from left to right in the target container. When the target direction is vertical, multiple pieces of information are vertically connected and cyclically scrolled from bottom to top or from top to bottom in the target container.

[0075] In some embodiments, the target JavaScript array and the target hypertext markup language array include at least two pieces of information. In step S23, when determining the scroll information based on the target JavaScript array and the target hypertext markup language array, reference may be made to Figure 4 Steps in:

[0076] Step S231, identifying the first number of spaces of each element in the target JavaScript array relative to the width of the target container.

[0077] In an embodiment of the present application, in order to achieve a better continuous scrolling effect and avoid the phenomenon that in a scenario where multiple texts are scrolling and one text has not yet completely scrolled out of the display area while another text has already scrolled in the display area, the terminal loops through the target JavaScript array and the target HTML array to obtain scrolling information suitable for the target container.

[0078] Here, the terminal loops the target JavaScript array and the target HTML array based on JavaScript's forEach(). The foreach statement repeats an embedded statement group for each element in an array or object collection. The foreach statement is used to loop through a collection to obtain the required information.

[0079] Furthermore, the terminal loops the target JavaScript array based on JavaScript's forEach() to identify the first number of spaces for each element in the target JavaScript array relative to the width of the target container. Specifically, when each element in the target JavaScript array is text, within the forEach() loop, the text length of each item in the target JavaScript array is calculated, divided by the width of the target container to obtain the remainder of the division, and then multiplied by a preset constant value (optionally 2 in this embodiment) to obtain the first number of spaces for the text relative to the screen width.

[0080] Step S232, identifying the second space quantity of each element in the target HTML array relative to the width of the target container.

[0081] Here, the terminal loops the target HTML array based on JavaScript's forEach() to identify the second space quantity of each element in the target HTML array relative to the width of the target container. Exemplarily, when each element in the target HTML array is text, within the forEach() loop, the text length of each item in the target HTML array is calculated, divided by the width of the target container to obtain the remainder of the division, and then multiplied by a preset constant value (optionally 2 in this embodiment) to obtain the second space quantity of the text relative to the screen width.

[0082] In the embodiment of the present application, the first number of spaces and the second number of spaces are both used to splice the scrolling information to achieve a seamless scrolling effect.

[0083] Step S233, based on the first number of spaces corresponding to each data item in the target JavaScript array, each data item in the target JavaScript array is concatenated, and based on the second number of spaces corresponding to each data item in the target hypertext markup language array, each data item in the target hypertext markup language array is concatenated to obtain scrolling information.

[0084] Here, when the terminal obtains the first space number and the second space number, it splices each data item in the target JavaScript array based on the first space number corresponding to each data item in the target JavaScript array, and splices each data item in the target HTML array based on the second space number corresponding to each data item in the target HTML array to obtain the scrolling information. That is, the terminal splices the first space number obtained to the scrolling information such as LPR or announcement text for the JavaScript part, and splices the second space number obtained to the scrolling information such as LPR or announcement text for the HTML part.

[0085] Exemplarily, assuming that the target array after screening in the above data splitting stage is marqueeList, the above code for reorganizing the target array, i.e., performing splicing processing, is:

[0086]

[0087] Here, the corresponding parts of the above ①-⑥ are explained in detail. ①wx.getSystemInfoSync() is an API provided by the applet to obtain system information. The system information includes the information in the terminal database. *2 is because the applet uses rpx as the size unit; ②When splicing multiple texts, it is necessary to splice spaces according to the screen width to ensure that each text occupies an integer n screen width when scrolling, that is, each text is scrolled after the next text is scrolled; \t is the space character recognized by JavaScript; ③  is the space symbol recognized by html; ④When there is only one text, there is no need to splice spaces, that is, JavaScript and HTML text are equal to the text in the filtered array; ⑤⑥ splice spaces for JavaScript and html respectively.

[0088] In the embodiment of the present application, considering that the infinite scrolling effect of multiple pieces of data involves the splicing of data, and the size unit relationship of the WeChat applet is 1px=2rpx, the recognition of spaces is also inconsistent. Specifically, JavaScript recognizes '\t' as a space, while HTML recognizes ' ' as a space. Therefore, spaces are spliced ​​for both the JavaScript part and the HTML part to obtain the final required data to ensure a seamless scrolling effect; thereby avoiding the related art of only processing the JavaScript part when there are multiple pieces of information, which leads to some visual dislocations, such as the phenomenon that the previous piece of text has not yet finished scrolling, and the next piece of text has begun to scroll.

[0089] In some embodiments, the attribute information includes the target duration required for a preset period of animation display, the speed of the animation display, the number of animation displays, and the animation content associated with the target moment of the animation.

[0090] The preset period may be one period, or may be multiple periods. For the sake of convenience in description, the preset period is taken as one period as an example in this application.

[0091] Here, the terminal can use JavaScript to calculate the scrolling information such as the total width of the LPR text / screen width to obtain the target duration required for the animation to complete a cycle, set the speed curve of the animation display to linear, and the number of animation displays, i.e. the number of playbacks, to infinite, and then make it effective.

[0092] In some embodiments, the target moment includes the start moment of the animation, the specific moment of the animation, and the end moment of the animation; wherein the specific moment of the animation is the moment between the start moment of the animation and the end moment of the animation, and the duration between the specific moment of the animation and the start moment of the animation is less than a preset duration, and the animation content displayed from the specific moment of the animation to the start moment of the animation remains unchanged.

[0093] In the embodiment of the present application, the terminal accesses @keyframes through the CSSKeyframesRule interface of the CSS object model based on JavaScript. Before using the keyframe, the terminal first creates a @keyframes rule with a name so that the animation name (animation-name) attribute can be used to match the animation with its keyframe declaration.

[0094] Here, each @keyframes rule contains multiple keyframes, which is a style block statement. Each keyframe has a percentage value as a name, which represents the stage in the animation at which the style contained in this frame is triggered. The keyframe percentages can be listed in any order, and the animation will be processed in the order in which they should occur.

[0095] Among them, the start time of the animation corresponds to the start state of the animation 0% or from, the end time of the animation corresponds to the end state of the animation 100% or to, and the specific moment of the animation corresponds to the stay state of the animation, such as the state of the animation completing 3%. Of course, the stay state can also be other percentages, such as 2%, 4%, 10%, etc. The embodiment of the present application does not specifically limit the stay state, so as to achieve a short stay, that is, a delayed start, to ensure that the user can see the content of the start of the animation clearly, and to avoid visual freezes caused by staying too long.

[0096] Exemplarily, in some embodiments, the animation state can be defined by CSS3 2D transformation. When the animation state is 0%, the terminal sets transform:translateX(0), that is, moves the element 0rpx along the X axis; when the animation state is 3%, the terminal sets transform:translateX(0); when the animation state is 100%, the terminal sets transform:translateX(calc(-100%+130rpx)). It should be noted that the reason why the element is still set to move 0rpx along the X axis when the animation completes 3% is to make the animation transition smoothly and have a short stay. In addition to enhancing the user experience, this setting is also more ergonomic.

[0097] In some embodiments, when the attribute information is the target duration required for the preset period of animation display, when configuring the attribute information of the animation in step S202, it can be combined with Figure 5 The steps shown here to determine the target duration include:

[0098] Step S2021, obtaining the length of the scrolling information, the size of the scrolling information, and the width of the target container.

[0099] Here, the terminal obtains the total length width of the scrolling information displayed on the page of the target container, and then uses width×the size of the scrolling information, where the size of the scrolling information is the set text size (size), and finally uses the above product / the width of the target container to obtain the time required for the animation to complete one cycle.

[0100] Step S2022: determining a target duration required for the scrolling information to scroll for a preset period in the target container based on the length of the scrolling information, the size of the scrolling information, and the width of the target container.

[0101] Here, after obtaining the length of the scrolling information, the size of the scrolling information and the width of the target container, the terminal determines the target duration required for the scrolling information to scroll for a preset period in the target container based on the length of the scrolling information, the size of the scrolling information and the width of the target container.

[0102] Exemplarily, the length of the scrolling information is represented by len, the target duration is represented by duration, the size of the scrolling information is represented by size, and the width of the target container is represented by windowWidth, then, duration=len×size / windowWidth.

[0103] In some embodiments, the animation processing method provided by the present application can also be performed as follows: Figure 6 The steps shown generate the applet components, including:

[0104] Step S301, obtaining a preset component in an editable panel.

[0105] In the embodiment of the present application, the preset component is a simple encapsulation of data and methods. The preset component can have its own properties and methods. The properties are simple accessors to the component data, and the methods are some simple and visible functions of the component. In other words, the preset component is a pre-set component that can achieve a certain function. It can be used directly to build a front-end web page without rewriting the code. It is also called a user interface (UI) component. It should be noted that the code of the preset component is HTML code. The editable panel is a visual panel for displaying preset components. Users can put multiple preset components into the editable panel by dragging, adding, etc. The preset components are placed in the preset component library, including but not limited to: view containers, basic content, form components, navigation, media components, maps, canvases, native components, etc.

[0106] For example, the terminal can obtain the preset component through the following steps: declare the custom component in the JSON file; write the animation component template in the WXML file; add the animation component style in the WXSS file; add the properties in the WXS file to define the external properties of the animation component, thereby obtaining the preset component. Here, WXS refers to a scripting language for applet, which can be combined with WXML to build the structure of the page.

[0107] Step S302: Generate a logic processing strategy for the component based on the attribute information.

[0108] In the embodiment of the present application, the attribute information is used to control the display effect of the scrolling information in the animation. The terminal generates a logic processing strategy for the component based on the attribute information.

[0109] Step S303, generating mini-program components based on preset components and logic processing strategies.

[0110] In the embodiment of the present application, the terminal automatically generates mini-program components based on preset components and logical processing strategies, thereby reducing the workload of developers and improving development results.

[0111] For example, in one application scenario, the packaging of the marquee component can be implemented by the following steps:

[0112] First, declare {"component":true} in the json of the terminal custom component;

[0113] Secondly, the terminal writes the marquee component template in WXML, that is, the html page structure, such as Figure 7 As shown, it includes icons on the left and right sides, a first icon 41 and a second icon 42, and a display area of ​​a scrolling text in the middle;

[0114] Again, the terminal adds a marquee component style to WXSS, such as Figure 7 and Figure 8 As shown, in the interface of the ** application, the layout of the marquee is set to display: flex; width is width: 100%; left and right inner spacing is padding: 0 30rpx; background color is background: #5BACFB; font color is color: #FFFFFF; font size is font-size: 28rpx; etc.;

[0115] Next, the terminal adds properties in WXS to define the external properties of the Marquee component, that is, the type and value of the field name of the Marquee component that need to be passed in; thus, the preset of the component is completed and the preset component is obtained;

[0116] Finally, the terminal sets the logic processing strategy required for the marquee in WXS. For example, the logic processing strategy includes calculating the total width of the LPR text / screen width to obtain the time required for the animation to complete a cycle, processing the background return data, etc.; and then generates the applet component based on the preset components and logic processing strategy.

[0117] The embodiment of the present application generates mini-programs based on components, realizes visual editing of mini-program pages and automatic generation of mini-program codes, and encapsulates the infinite scrolling effect into components by horizontally connecting multiple texts, uniformly processing the marquee logic, and exposing the relevant fields of the components to the outside. When globally referencing, you only need to introduce the component and provide the fields required by the component, without having to write the relevant logic for each page. This not only saves manpower, time and other resource costs, but also makes the code clearer and easier to read, reduces code maintenance costs, and saves code memory space.

[0118] Next, an exemplary application of the embodiment of the present application in an actual application scenario will be described. The application scenario refers to the horizontal connection and scrolling of multiple LPRs or multiple announcements (hereinafter LPRs or announcements are collectively referred to as texts) based on the WeChat applet environment, that is, the marquee effect.

[0119] It should be noted that this application uses pure CSS to control infinite text scrolling, processes basic data returned by the background based on JavaScript, and combines modular thinking to achieve horizontal connection and scrolling of multiple texts. For example, in this scenario, the text scrolls from right to left or from left to right in a loop.

[0120] In order to achieve the infinite scrolling effect of text, the embodiment of the present application is implemented based on the CSS3 animation solution + CSS3 2D conversion solution + JavaScript solution, wherein:

[0121] The CSS3 animation solution includes: first use @keyframes to create an animation, specify the original style at 0%, the style at 3%, and the end style at 100%. Then bind the defined animation to the class element selector marqueeText of the marquee container (for example, the html element of the marquee text content is<view class="marqueeText"> For the text content, set the animation binding to: .marqueeText{animation:marquee}, where marquee is the animation created by @keyframes (e.g., @keyframes marquee{...}). Furthermore, use JavaScript to calculate the total width of the LPR text / screen width of the marquee container to get the time required for the animation to complete a cycle, set the animation speed curve to linear, and the number of plays to infinite, and then make it effective.

[0122] The CSS3 2D transformation scheme includes: when the animation state is 0%, set transform:translateX(0), that is, move the element 0rpx along the X axis; when the animation state is 3%, set transform:translateX(0); when the animation state is 100%, set transform:translateX(calc(-100%+130rpx)).

[0123] Here, when the animation is 3% complete, the element is still set to move 0rpx along the X axis in order to make the animation transition smoothly and have a short pause state. In addition to enhancing the user experience, this setting is also more ergonomic.

[0124] The JavaScript solution includes: calculating the time required for the animation to complete a cycle, obtaining the length len of the scroll information, the width windowWidth of the target container, and the size size of the scroll information. Then, duration can be calculated by the following formula:

[0125] duration = len × size / windowWidth. For example, see Figure 7 and Figure 8 , when the scrolling information displayed in the ticker container includes multiple texts, for example, the first text is Figure 7 The second text is "Xiaoe Channel - First Content Display" Figure 8 As shown in the “Xiaoe Channel - Second Content Display”, combined with Figure 7 and Figure 8It can be seen that during the process of multiple texts scrolling in the marquee container, when the first text scrolls out of the marquee container in the direction from right to left, the second text is displayed in the marquee container. At this time, the character "small" in the second text is displayed in the marquee container, but Figure 8 the information "Goose Channel - Second Content Display" in the dashed box 43 in Figure 8 is not currently displayed on the marquee container. Subsequently, over time, the content in the dashed box 43 appears on the marquee container from right to left in sequence. Here, the dashed box 43 only represents the subsequent text part to be displayed. When these texts are successively displayed, only the texts are presented in the marquee container in sequence, without the dashed box. In this way, a seamless scrolling effect of multiple texts is achieved.

[0126] As can be seen from the above, when implementing the infinite scrolling effect of texts, the animation processing provided by this application uses pure CSS to set the text scrolling effect, and only uses JavaScript to perform ordinary calculations on the time required for one cycle of text scrolling. It does not involve using JavaScript's setInterval() or setTimeout() to control the loop playback of the marquee, thus solving a series of problems such as lag and program crashes caused by JavaScript memory leaks. Next, the exemplary structure of the animation processing device 154 implemented as a software module provided by the embodiments of this application will be continued. In some embodiments, as Figure 1 shown, the software module in the animation processing device 154 stored in the memory 150 can be the animation processing device in the terminal 100, including:

[0127] A first processing module 1541, configured to create an animation based on a style rule for creating a cascading style sheet and associate the animation with a selector of a target container;

[0128] The first processing module 1541 is further configured to configure attribute information of the animation; wherein, the attribute information is used to control the display effect of the scrolling information in the animation;

[0129] A first output module 1542, configured to control the selector to perform a scrolling display on the scrolling information based on the attribute information.

[0130] In some embodiments, the animation processing device 154 further includes a second processing module 1543, configured to obtain an array to be processed through an application programming interface; wherein, the array to be processed includes a JavaScript array and a hypertext markup language array;

[0131] Based on an array filtering condition, filter the JavaScript array and the hypertext markup language array to obtain a target JavaScript array and a target hypertext markup language array that meet the array filtering condition;

[0132] Based on the target JavaScript array and the target HTML array, the scrolling information is determined.

[0133] In some embodiments, the scrolling information includes multiple pieces of information, and the first output module 1542 is further used to control any one of the multiple pieces of information to scroll out of the target container along the target direction based on the attribute information through the selector, and control the next scrolling information to be displayed in the target container.

[0134] In some embodiments, the target JavaScript array and the target Hypertext Markup Language array include at least two pieces of information, and the second processing module 1543 is further used to identify a first space number of each element in the target JavaScript array relative to the width of the target container;

[0135] Identify a second number of spaces for each element in the target HTML array relative to the width of the target container;

[0136] Based on the first number of spaces corresponding to each data item in the target JavaScript array, each data item in the target JavaScript array is spliced, and based on the second number of spaces corresponding to each data item in the target Hypertext Markup Language array, each data item in the target Hypertext Markup Language array is spliced ​​to obtain scrolling information.

[0137] In some embodiments, the attribute information includes the target duration required for a preset period of animation display, the speed of the animation display, the number of animation displays, and the animation content associated with the target moment of the animation.

[0138] In some embodiments, the target moment includes the start moment of the animation, the specific moment of the animation, and the end moment of the animation;

[0139] Among them, the specific moment of the animation is the moment between the start moment of the animation and the end moment of the animation, and the duration between the specific moment of the animation and the start moment of the animation is less than the preset duration, and the animation content displayed from the specific moment of the animation to the start moment of the animation remains unchanged.

[0140] In some embodiments, when the attribute information is the target duration required for the preset cycle of animation display, the first processing module is further used to obtain the length of the scrolling information, the size of the scrolling information and the width of the target container;

[0141] Based on the length of the scrolling information, the size of the scrolling information, and the width of the target container, a target duration required for the scrolling information to scroll for a preset period in the target container is determined.

[0142] In some embodiments, the second processing module 1543 is also used to obtain preset components in the editable panel; generate a logical processing strategy for the component based on the attribute information; and generate a mini-program component based on the preset components and the logical processing strategy.

[0143] It should be noted that the description of the device of the embodiment of the present application is similar to the description of the above method embodiment, and has similar beneficial effects as the method embodiment, so it is not repeated. For technical details not disclosed in the embodiment of the device, please refer to the description of the method embodiment of the present application for understanding.

[0144] The present application embodiment provides a storage medium storing executable instructions, wherein the executable instructions are stored. When the executable instructions are executed by a processor, the processor will execute the method provided by the present application embodiment, for example, Figure 2-6 The method shown.

[0145] In some embodiments, the storage medium can be a computer-readable storage medium, for example, a ferroelectric random access memory (FRAM), a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), a flash memory, a magnetic surface memory, an optical disk, or a compact disk read-only memory (CD-ROM), etc.; it can also be various devices including one or any combination of the above memories.

[0146] In some embodiments, executable instructions may be in the form of a program, software, software module, script or code, written in any form of programming language (including compiled or interpreted languages, or declarative or procedural languages), and may be deployed in any form, including as a stand-alone program or as a module, component, subroutine or other unit suitable for use in a computing environment.

[0147] As examples, executable instructions may, but need not, correspond to a file in a file system, may be stored as part of a file storing other programs or data, such as in one or more scripts in a Hypertext Markup Language (Hypertext Markup Language) document, in a single file dedicated to the program in question, or in multiple coordinated files (e.g., files storing one or more modules, subroutines, or code portions). As examples, executable instructions may be deployed to be executed on one computing device, or on multiple computing devices located at one site, or on multiple computing devices distributed at multiple sites and interconnected by a communication network.

[0148] The above is only an embodiment of the present application and is not intended to limit the protection scope of the present application. Any modifications, equivalent substitutions and improvements made within the spirit and scope of the present application are included in the protection scope of the present application.

Claims

1. An animation processing method, characterized in that: include: Creating an animation based on the style rules used to create the cascading style sheet and associating the animation to a selector of a target container; Configuring attribute information of the animation; wherein the attribute information is used to control the display effect of the scrolling information in the animation; Controlling the selector to scroll and display the scroll information based on the attribute information; Before configuring the attribute information of the animation, the method further includes: Obtaining an array to be processed through an application program interface; wherein the array to be processed includes a Java Script array and a Hypertext Markup Language array; Based on the array screening condition, the JavaScript array and the Hypertext Markup Language array are screened to obtain a target JavaScript array and a target Hypertext Markup Language array that meet the array screening condition; Determining scroll information based on the target JavaScript array and the target Hypertext Markup Language array; The target JavaScript array and the target Hypertext Markup Language array include at least two pieces of information, and the step of determining the scroll information based on the target JavaScript array and the target Hypertext Markup Language array includes: Identify a first number of spaces for each element in the target JavaScript array relative to the width of the target container; Identify a second number of spaces for each element in the target hypertext markup language array relative to the width of the target container; Based on the first number of spaces corresponding to each data item in the target JavaScript array, each data item in the target JavaScript array is spliced, and based on the second number of spaces corresponding to each data item in the target Hypertext Markup Language array, each data item in the target Hypertext Markup Language array is spliced ​​to obtain the scrolling information.

2. The method according to claim 1, characterized in that The scroll information includes a plurality of pieces of information, and the control selector scrolls and displays the scroll information based on the attribute information, including: Based on the attribute information, the selector controls any one of the multiple pieces of information to scroll out of the target container along a target direction, and controls the next scrolled information to be displayed in the target container.

3. The method according to claim 1, characterized in that The attribute information includes a target duration required for a preset period of the animation display, a speed of the animation display, a number of times the animation is displayed, and animation content associated with a target moment of the animation.

4. The method according to claim 3, characterized in that The target moments include the start moment of the animation, the specific moment of the animation, and the end moment of the animation; Among them, the specific moment of the animation is the moment between the start moment of the animation and the end moment of the animation, and the duration between the specific moment of the animation and the start moment of the animation is less than the preset duration, and the animation content displayed from the specific moment of the animation to the start moment of the animation remains unchanged.

5. The method according to claim 3, characterized in that When the attribute information is the target duration required for the animation to display a preset period, the attribute information for configuring the animation includes: Obtaining the length of the scroll information, the size of the scroll information, and the width of the target container; A target duration required for the scrolling information to scroll for the preset period in the target container is determined based on the length of the scrolling information, the size of the scrolling information, and the width of the target container.

6. The method according to any one of claims 1 to 5, characterized in that After the control selector scrolls and displays the scroll information based on the attribute information, the method further includes: Get the preset component in the editable panel; Based on the attribute information, generating a logic processing strategy for the component; Based on the preset components and the logic processing strategy, a mini-program component is generated.

7. An animation processing device, characterized in that: include: A memory for storing executable instructions; A processor, configured to implement the method according to any one of claims 1 to 6 when executing the executable instructions stored in the memory.

8. A computer-readable storage medium, characterized in that: Executable instructions are stored, which are used to cause a processor to execute and implement the method described in any one of claims 1 to 6.

Images