WO2020151316A1 - 一种Web端动画配置方法及装置 - Google Patents

一种Web端动画配置方法及装置 Download PDF

Info

Publication number
WO2020151316A1
WO2020151316A1 PCT/CN2019/117544 CN2019117544W WO2020151316A1 WO 2020151316 A1 WO2020151316 A1 WO 2020151316A1 CN 2019117544 W CN2019117544 W CN 2019117544W WO 2020151316 A1 WO2020151316 A1 WO 2020151316A1
Authority
WO
WIPO (PCT)
Prior art keywords
animation
style
css style
css
configuration
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Ceased
Application number
PCT/CN2019/117544
Other languages
English (en)
French (fr)
Inventor
李清鹏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Ping An Technology Shenzhen Co Ltd
Original Assignee
Ping An Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Ping An Technology Shenzhen Co Ltd filed Critical Ping An Technology Shenzhen Co Ltd
Publication of WO2020151316A1 publication Critical patent/WO2020151316A1/zh
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/40—Transformation of program code
    • G06F8/41—Compilation
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—Two-dimensional [2D] animation, e.g. using sprites

Definitions

  • This application relates to the field of computer technology, and in particular to a method and device for configuring Web animations.
  • a web-side animation configuration method is provided. Based on this method, the user can directly generate the animation by obtaining the data input by the user for the animation element.
  • the CSS style of the animation element is described, so as to realize the animation style description of the animation element and simplify the animation configuration process.
  • the embodiments of the present application provide a method for configuring animation on the Web side, which is characterized in that it includes:
  • a first CSS style and a second CSS style for the animation element are generated, the first CSS style is used to define the basic animation properties of the animation element, and the second CSS
  • the style includes multiple style description codes that respectively define the motion state of each element in the animation effect process of the animation element;
  • the first CSS style and the second CSS style of the animation element are added to the style description code segment corresponding to the animation element in the target page.
  • a web-side animation configuration device including:
  • the interaction module is used to obtain the animation elements imported by the user on the animation configuration page, and receive the animation effect identification and animation configuration parameters input by the user for the animation element;
  • a processing module configured to generate a first CSS style and a second CSS style for the animation element according to the animation effect identifier and animation configuration parameters
  • a display module which loads the first CSS style and the second CSS style of the animation element in the animation configuration page, so that the animation effect of the animation element is previewed in the animation configuration page;
  • the confirmation module is used to add the first CSS style and the second CSS style of the animation element to the style description code corresponding to the animation element in the target page after receiving the confirmation instruction for the animation effect of the animation element In the paragraph.
  • a web-side animation configuration device which includes a processor, a memory, and an input and output interface;
  • the processor is respectively connected to the memory and the input and output interface, wherein the input and output interface is used for page interaction, the memory is used for storing program code, and the processor is used for calling the program code to Perform the method described in one aspect of the embodiments of the present application. ,
  • Another aspect of the embodiments of the present application provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, the computer program includes program instructions, and the program instructions are executed by a processor. At this time, the method described in one aspect of the embodiments of the present application is executed.
  • the animation configuration process can be simplified, the efficiency of animation configuration is improved, and the compatibility configuration of animation effects is realized at the same time, so that the animation element can display the same animation effect on different browsers.
  • FIG. 1 is a flow chart of a web-side animation configuration provided by an embodiment of the application
  • FIG. 2a is a schematic diagram of a page of an optional web-side animation configuration method provided by an embodiment of the present application
  • FIG. 2b is a schematic diagram of an animation configuration selection interface provided by an embodiment of the present application.
  • Figure 2c is a schematic diagram of an animation display effect provided by an embodiment of the present application.
  • FIG. 3 is a schematic diagram of a web-side animation configuration device provided by an embodiment of the present application.
  • Fig. 4 is a schematic structural diagram of a terminal device provided by an embodiment of the present application.
  • FIG. 1 is a flowchart of a web-side animation configuration provided by an embodiment of the present application. As shown in Figure 1, the above method includes the following steps:
  • Step S101 Obtain the animation element imported by the user on the animation configuration page, and receive the animation effect identifier and animation configuration parameters input by the user for the animation element.
  • an animation configuration page is provided for the user.
  • the animation configuration options of the animation element are provided to the user, so as to obtain the user’s
  • the animation effect identification and animation configuration parameters input by the animation element are provided to the user, so as to obtain the user’s.
  • the above-mentioned animation effect identifier is a predefined animation name, which is used to define the name of the above-mentioned animation element, and is used to specify the name of the animation element that needs to be bound to the keyframe selector;
  • the above-mentioned animation configuration parameters include but are not limited to: Animation process duration, animation speed parameters, animation start delay, animation playback times, whether to play animation in reverse, etc., the above animation configuration attributes are only some of the configuration attributes listed, and do not mean that the attributes of other animation animations are not in this application Within the scope of the animation configuration of the embodiment.
  • Step S102 Generate a first Cascading Style Sheet (CSS) style and a second CSS style for the animation element according to the animation effect identifier and animation configuration parameters.
  • CSS Cascading Style Sheet
  • the above-mentioned first CSS style is used to define the basic animation properties of the above-mentioned animation element
  • the above-mentioned second CSS style includes multiple style description codes that respectively define the motion state of each element during the animation effect of the animation element.
  • the first CSS style includes some optional animation attributes and an optional animation attribute description method including but not limited to "animation: name duration timing-function delay iteration-count direction", the animation attribute description method In turn, it means “animation: animation name animation playback duration, animation speed curve, delay animation playback times before the animation starts, whether to play in reverse direction", where the above animation name corresponds to the above animation effect identifier, and the rest of the animation attributes are respectively configured with the above animation The parameters correspond one to one.
  • the default value of an optional animation attribute description method of the above animation attribute is: "animation:none 0ease 0 1normal", that is, the predefined first CSS style can be considered as the above default value.
  • the motion trajectory of the animation element is determined according to the aforementioned animation effect identifier, and the element animation state of each frame of the animation element in the aforementioned animation process duration is determined in combination with the aforementioned animation configuration parameters. Specifically, according to the initial state of the animation element’s motion trajectory and the aforementioned animation speed parameters, determine the amount of state change of the animation element in each frame after the animation starts, so as to determine the animation element in each frame of the animation process duration. The animation state of the element.
  • the above animation effect identifier is used as the name of the keyframe selector in the second CSS style, and multiple corresponding keyframe selectors are selected from the predefined second CSS style through the animation effect identifier, and the motion track of the animation element is determined .
  • the aforementioned motion trajectory includes but is not limited to: from left to right, from top to bottom, from right to left, from bottom to top, rotation, etc., and according to the animation speed parameter in the above animation configuration parameters to determine the animation element in each frame
  • the animation state of the element the timing-function in the above animation attribute uses a mathematical function named Cubic Bezier function to generate a speed curve, which is used to define the time it takes for the animation to change from one set of CSS styles to another.
  • the keyframe selector from the multiple keyframe selectors that matches the motion track corresponding to the animation speed parameter is selected according to the animation speed parameter, and the keyframe selector is the aforementioned The second CSS style.
  • the first CSS style of the animation element includes a plurality of basic animation attribute descriptions of different compatible prefixes, wherein the basic animation attribute description of each compatible prefix is used to be recognized and executed by the browser kernel corresponding to the compatible prefix.
  • the style description code in the second CSS style of the animation element includes a plurality of style description statements with different compatible prefixes, and each of the style description statements with compatible prefixes is used to be recognized and recognized by the browser kernel corresponding to the compatible prefix. carried out.
  • the above-mentioned compatible prefixes include: -webkit-, -moz-, -o- or -ms-, -webkit-corresponding browser types include Google or Safari, -moz-corresponding browser types include Firefox, -o- The corresponding browser type includes Opera, and the corresponding browser type of -ms- includes IE.
  • Step S103 Load the first CSS style and the second CSS style of the animation element in the animation configuration page, so that the animation effect of the animation element is previewed in the animation configuration page.
  • switching between different browser cores opens the animation configuration page loaded with the first CSS style and the second CSS style of the animation element, so that the animation effect of the animation element is previewed in the animation configuration page.
  • open the animation configuration result page that loads the animation element in any browser detect the browser kernel type that opens the animation configuration result page, and run the first CSS style and the second CSS style that correspond to the browser kernel type
  • the style description sentence compatible with the prefix is displayed so as to display the animation configuration result of the animation element determined by the animation effect identifier and animation configuration parameters of the animation element, and display the animation effect corresponding to the animation configuration result.
  • the animation effect of the animation element after the animation configuration is displayed in different browsers to ensure that the animation compatibility configuration of the animation element is successful, and it is determined that the above animation effect is the animation effect required by the user.
  • Step S104 after receiving the confirmation instruction for the animation effect of the animation element, add the first CSS style and the second CSS style of the animation element to the style description code corresponding to the animation element in the target page.
  • the first CSS style and the second CSS style of the animation element are exported, and the aforementioned first CSS style and second CSS style are exported.
  • the style is added to the target page code.
  • the user can click the animation configuration confirmation button.
  • the animation configuration confirmation button is clicked, that is, Receive the animation effect confirmation instruction of the animation element, export the finally obtained first CSS style and second CSS style of the animation element, and add the above first CSS style and second CSS style to the target page.
  • the animation The style description code corresponding to the element.
  • the first CSS style and the second CSS style can be directly embedded in the html tag element of the target page, that is, the first CSS style and the second CSS style can be directly added to the div in the description tag of the animation element , Get " ⁇ div>first CSS style ⁇ /div> ⁇ div>second CSS style ⁇ /div>" to realize the animation configuration of the animation element.
  • the style declaration in the head part of the html document of the target page can be processed, the above first CSS style and the second CSS style are inserted into the above style declaration, and the animation style description of the animation element is performed, that is By setting a selector for the animation element in the target page, and describing the selector for the animation element in the above style statement, the animation configuration of the animation element is realized.
  • the above-mentioned selectors may include: id selectors, class selectors, element name selectors, composite selectors, attribute selectors and hierarchical selectors.
  • the link address of the first CSS style and the link address of the second CSS style are added to the head part of the html document of the target page.
  • the web-side animation configuration process provided by the embodiments of this application is to obtain the animation effect identifier and animation configuration parameters for the animation element input by the user, and generate the CSS style of the animation element according to the animation effect identifier and animation configuration parameters. After the instruction is confirmed for the animation effect of the animation element, the above CSS style is added to the style description code of the animation element in the target page to realize the animation configuration of the animation element, simplify the animation configuration process, and improve the efficiency of animation configuration.
  • the method provided by the embodiment of the present application can animate the animation elements based on the CSS styles generated in the steps shown in FIG. 1.
  • the method provided by the embodiment of the present application will be described below with reference to FIGS. 2a to 2c.
  • FIGS. 2a to 2c are schematic diagrams of pages of an optional web-side animation configuration method provided in an embodiment of the present application.
  • FIG. 2a is a schematic diagram of a page of an optional web-side animation configuration method provided by an embodiment of the present application.
  • the animation configuration page 20 includes an animation playback page 201 and an animation style description page 202.
  • the animation element 2011 is uploaded on the animation playback page 201 in the animation configuration page 20 described above.
  • the CSS style description code of the animation element 2011 can be displayed in the animation style description page 202, and the animation configuration selection interface 203 is displayed at the same time.
  • FIG. 2b is a schematic diagram of an animation configuration selection interface provided by an embodiment of the application.
  • the animation configuration selection interface 203 when the animation configuration selection interface 203 is initially displayed, it is shown as the initial animation configuration 203a, and the animation configuration selection interface 203 after configuration is displayed as shown in the generated animation configuration 203b.
  • the initial value of the animation configuration of the animation element 2011 includes: the initial value of name is none, the initial value of duration is 0s, the initial value of timing-function is ease, the initial value of delay is 0s, and the iteration-count The initial value is 1, and the initial value of direction is normal.
  • the predefined first CSS style and the predefined second CSS style are stored in the embodiment of the present application. You can refer to the animation style description page 202 shown in FIG. 2a, which includes two parts: the first CSS style 2021 and the second CSS style. CSS style 2022.
  • the configuration parameters of each animation attribute in the above-mentioned predefined first CSS style are all default values
  • the above-mentioned predefined second CSS style includes multiple pieces of CSS style codes, and each piece of CSS style code describes an animation motion track.
  • the predefined first CSS style and the predefined second CSS style support different browser kernels by adding different compatible prefixes.
  • the specific implementation process is as shown in step S102 in FIG. 1 above.
  • the animation effect identification and animation configuration parameters entered by the user for the animation element 2011 are the configuration of name, duration, timing-function, delay, iteration-count, and direction, where the name value corresponds to Animation effect logo.
  • the name value corresponds to Animation effect logo.
  • animation effect identification input by the user for the animation element is big-rotate
  • the animation effect identification is a predefined option, that is, the value of the name is predefined
  • animation configuration parameters include: the duration value is 3s, which is the animation process time of the animation element; the timing-function value is linear, which is the animation
  • the animation speed parameter of the element indicates that the animation moves at a constant speed.
  • the unit of the foregoing duration, delay, etc. may be set to milliseconds.
  • the animation style description page 202 in the CSS style code After obtaining the animation effect identifier and animation configuration parameters input by the user for the animation element, if it is detected that the user clicks the confirmation button, that is, if the animation configuration confirmation request of the animation element is received, the animation style description page 202 in the CSS style code.
  • the predefined first CSS style and the predefined second CSS style in the server are configured, and the first CSS style is generated by adding the above-mentioned animation effect identifier and animation configuration parameters to the above-mentioned predefined first CSS style.
  • the acquired animation effect identifiers and animation configuration parameters are replaced with the default values of the corresponding animation properties in the above-mentioned predefined first CSS style, so as to generate the first CSS style, which is displayed in the first CSS style display 2021.
  • the above animation effect identifier select the corresponding style description code segment from the above predefined second CSS style. It can be seen that the above animation effect identifier is big-rotate, then select the keyframes selector name from the second CSS style as big-rotate.
  • a style description code segment, and then a specific second CSS style is determined according to the above animation speed parameters.
  • the specific motion speed parameter of the above animation is linear. It can be seen that the speed of the animation of the animation element is the same from beginning to end. Then look for the linear motion speed change from the multiple style description code segments with the name of the keyframes selector as big-rotate.
  • Regular style description code segment, the style description code segment is the second CSS style, rotates at an angle of 3 degrees per frame, and obtains the second CSS style that conforms to the linear motion speed change law, and displays it in the second CSS style Display in 2022.
  • Figure 2c is the first CSS of the animation element.
  • the animation effect corresponding to the style and the second CSS style.
  • the animation element 2011 rotates clockwise at a uniform speed as shown in the left image, and the left image is the animation state of the animation element 2011 in each frame. The specific process is shown on the right.
  • the animation element 2011 takes the animation element state 2011.0 as the initial state; the first frame rotates 3 degrees to get the animation element state 2011.1; the second frame rotates 7 degrees to get the animation element state 2011.2; the third frame rotates 10 Degrees, get the animation element state 2011.3; ...; rotate 90 degrees in the 25th frame, get the animation element state 2011.25; ...; rotate 360 degrees in the 100th frame, get the animation element state 2011.100.
  • the animation element state of each frame mentioned above is the same center point, as shown in the left image in Figure 2c. Repeat the aforementioned clockwise uniform rotation process, that is, play the aforementioned clockwise uniform rotation process twice to complete the animation effect display of the animation element 2011.
  • the animation configuration page 20 can be saved, run on different browsers, and the animation effect of the animation element 2011 is displayed on the animation playback page 201, so that the user can confirm whether the final animation effect meets the requirements.
  • the above-mentioned first CSS style and the second CSS style are added to the style description code corresponding to the animation element in the target page.
  • the specific process is shown in Figure 1. It is shown in step S104, and details are not repeated here.
  • FIG. 3 is a schematic diagram of a Web-side animation configuration device provided by an embodiment of the present application.
  • the Web-side animation configuration device can be used in the embodiment corresponding to FIG.
  • the terminal device specifically, the device may include: an interaction module 301, a processing module 302, a display module 303, and a confirmation module 304.
  • the interaction module 301 is configured to obtain the animation element imported by the user on the animation configuration page, and receive the animation effect identifier and animation configuration parameters input by the user for the animation element;
  • the processing module 302 is configured to generate a first CSS style and a second CSS style for the animation element according to the aforementioned animation effect identifier and animation configuration parameters;
  • the display module 303 loads the first CSS style and the second CSS style of the animation element in the animation configuration page, so that the animation effect of the animation element is previewed in the animation configuration page;
  • the confirmation module 304 is configured to, after receiving a confirmation instruction for the animation effect of the animation element, add the first CSS style and the second CSS style of the animation element to the style description code segment corresponding to the animation element in the target page .
  • processing module 302 is also used for:
  • the motion trajectory of the animation element is determined according to the animation effect identifier, and the element animation state of the animation element in each frame of the animation process duration is determined in combination with the animation configuration parameters.
  • processing module 302 is also used for:
  • the initial state in the motion track of the animation element and the above animation speed parameters determine the amount of state change of the animation element in each frame after the animation starts, thereby determining the element animation of each frame of the animation element in the above animation process duration status.
  • processing module 302 is also used for:
  • the above style description code includes multiple style description sentences with different compatible prefixes.
  • the basic animation attribute description and style description sentences of each compatible prefix are used to be recognized and executed by the browser kernel corresponding to the compatible prefix.
  • the above-mentioned display module 303 is also used for:
  • the above confirmation module 304 is also used for:
  • the aforementioned interaction module After receiving the animation configuration parameter modification instruction for the animation element, the aforementioned interaction module is called, so that the device continues to execute the steps in the embodiment shown in FIG. 1.
  • the above-mentioned device can execute the above-mentioned implementation provided in FIG. 1 through the above-mentioned modules to realize the functions implemented in the above-mentioned embodiments.
  • the above-mentioned device can execute the above-mentioned implementation provided in FIG. 1 through the above-mentioned modules to realize the functions implemented in the above-mentioned embodiments.
  • the embodiment of the application provides a web-side animation configuration device.
  • the above-mentioned device converts the obtained user input data corresponding to the animation element into the CSS style of the animation element, thereby directly obtaining the animation style description code of the animation element, wherein
  • the above-mentioned user input data is the animation effect identification and animation configuration parameters of the animation element input by the user.
  • the above-mentioned CSS style is added to the style description code segment corresponding to the animation element in the target page, thereby simplifying the animation configuration process and improving the animation configuration efficiency.
  • the configuration of CSS style descriptions with different compatible prefixes in the aforementioned CSS styles improves the compatibility of the CSS styles, so that the animation elements have the same animation effect in different browsers.
  • FIG. 4 is a schematic structural diagram of a terminal device according to an embodiment of the present application.
  • the terminal device in this embodiment may include: one or more processors 401, a memory 402, and an input/output interface 403.
  • the aforementioned processor 401, memory 402, and input/output interface 403 are connected via a bus 404.
  • the above-mentioned input and output interface is used for page interaction, and the above-mentioned memory 402 is used to store a computer program, and the computer program includes program instructions;
  • the processor 401 is used to execute the program instructions stored in the memory 402, and perform the following operations:
  • the first CSS style is used to define the basic animation properties of the animation element
  • the second CSS style includes defining the animation elements respectively.
  • the processor After receiving the confirmation instruction for the animation effect of the animation element, the processor adds the first CSS style and the second CSS style of the animation element to the style description code segment corresponding to the animation element in the target page.
  • the aforementioned processor 401 is configured to:
  • the motion trajectory of the animation element is determined according to the animation effect identifier, and the animation state of the animation element in each frame of the animation process duration is determined in combination with the animation configuration parameters.
  • the aforementioned processor 401 is configured to:
  • the initial state in the motion track of the animation element and the above animation speed parameters determine the amount of state change of the animation element in each frame after the animation starts, thereby determining the element animation of each frame of the animation element in the above animation process duration status.
  • the aforementioned processor 401 is further configured to:
  • the aforementioned processor 401 may be a central processing unit (central processing unit, CPU), and the processor may also be other general-purpose processors, digital signal processors (digital signal processors, DSP), and dedicated integrated Circuit (application specific integrated circuit, ASIC), ready-made programmable gate array (field-programmable gate array, FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components, etc.
  • the general-purpose processor may be a microprocessor or the processor may also be any conventional processor or the like.
  • the memory 402 may include a read-only memory and a random access memory, and provides instructions and data to the processor 401 and the input/output interface 403. A part of the memory 402 may also include a non-volatile random access memory. For example, the memory 402 may also store device type information.
  • the above-mentioned terminal device can execute the implementation manner provided in each step in the foregoing FIG. 1 through its built-in functional modules.
  • the implementation manner provided in each step in the foregoing FIG. 1 and will not be repeated here.
  • the embodiment of the present application provides a terminal device including a processor, a memory, and an input and output interface.
  • the processor obtains computer instructions in the memory and executes the steps of the method shown in FIG. 1 to perform Web-side animation configuration operations. .
  • the processor executes the animation configuration process of the animation element on the Web side, obtains the CSS style of the animation element, and adds the CSS style to the style description code segment corresponding to the animation element in the target page, thereby simplifying the animation
  • the configuration process improves the efficiency of animation configuration.
  • the obtained CSS style code snippets with different compatible prefixes realize the animation compatibility configuration for the animation element, so that the animation of the animation element has the same animation effect on different browsers, thus Unify the animation form.
  • the embodiment of the present application also provides a computer-readable storage medium, the computer-readable storage medium stores a computer program, the computer program includes program instructions, when the program instructions are executed by a processor, realize the Web provided by each step in FIG. 1
  • the terminal animation configuration method please refer to the implementation manners provided in the steps shown in FIG. 1 for details, which will not be repeated here.
  • the foregoing computer-readable storage medium may be the web-side animation configuration device provided in any of the foregoing embodiments or the internal storage unit of the foregoing terminal device, such as the hard disk or memory of an electronic device.
  • the computer-readable storage medium may also be an external storage device of the electronic device, such as a plug-in hard disk, a smart media card (SMC), or a secure digital (SD) card equipped on the electronic device. Flash card, etc.
  • the computer-readable storage medium may also include both an internal storage unit of the electronic device and an external storage device.
  • the computer-readable storage medium is used to store the computer program and other programs and data required by the electronic device.
  • the computer-readable storage medium can also be used to temporarily store data that has been output or will be output.
  • each process and/or structural schematic diagram of the method flowcharts and/or structural schematic diagrams can be implemented by computer program instructions. Or a block, and a combination of processes and/or blocks in a flowchart and/or block diagram.
  • These computer program instructions can be provided to the processors of general-purpose computers, special-purpose computers, embedded processors, or other programmable data processing equipment to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing equipment are generated for use.
  • These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing equipment to work in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture including the instruction device.
  • the device implements the functions specified in one process or multiple processes in the flowchart and/or one block or multiple blocks in the schematic structural diagram.
  • These computer program instructions can also be loaded on a computer or other programmable data processing equipment, so that a series of operation steps are executed on the computer or other programmable equipment to produce computer-implemented processing, so as to execute on the computer or other programmable equipment.
  • the instructions provide steps for implementing the functions specified in one block or multiple blocks in the flow chart or the flow chart and/or the structure.
  • the user After adopting the web-side animation configuration method and device, the user only needs to add the animation effect identification and animation configuration parameters for the animation element.
  • the device can directly search for and modify the predefined CSS style through the above animation effect identification and animation configuration parameters, thereby obtaining The CSS style of the animation element, and the animation effect after the animation element configuration is displayed, so that the user can intuitively view the animation effect of the animation element, and realize that the CSS style in the animation configuration is written once and used multiple times, thereby simplifying The animation configuration process is improved, and the efficiency of animation configuration is improved.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Software Systems (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了一种Web端动画配置方法和装置，所述方法包括：接收用户针对动画元素输入的动画效果标识和动画配置参数；根据所述动画效果标识和动画配置参数生成所述动画元素的第一CSS样式和第二CSS样式；在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。采用本申请，可通过获取用户输入的数据直接生成用于描述所述动画元素的运动过程的CSS样式，从而简化动画配置，提高了动画配置的效率。

Description

一种Web端动画配置方法及装置
本申请要求于2019年01月25日提交中国专利局、申请号为201910074532.2、申请名称为“一种Web端动画配置方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及计算机技术领域，尤其涉及一种Web端动画配置方法和装置。
背景技术
随着计算机和网络技术的飞速发展，网页成为人们获取信息的一个重要部分，而一个完整的网页往往包括文字、图片及动画效果等，而对于用户来说，丰富的页面内容和动态的页面效果更能吸引他们的眼光，因此，页面中动画的配置、生成就格外重要。现有技术中，在对文字、图片、音频和视频等动画元素进行动画处理时，通过脚本代码或程序语言等对上述动画元素进行处理，还可能出现重复编写的情况，使得动画配置的过程十分复杂。在实际的项目开发过程中，动画配置的代码往往会很长，动画配置会十分耗时耗力，从而影响Web端动画开发的进程。
发明内容
基于此，为解决上述提到的动画配置过程复杂，动画表现效果可能不同的技术问题，特提供了一种Web端动画配置方法，基于本方法可以通过获取用户针对动画元素输入的数据直接生成所述动画元素的CSS样式，从而实现对所述动画元素的动画样式描述，简化动画配置过程。
本申请实施例一方面提供了一种Web端动画配置的方法，其特征在于，包括：
获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；
根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；
在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；
在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。
本申请实施例另一方面提供了一种Web端动画配置装置，包括：
交互模块，用于获取用户在动画配置页面导入的动画元素，并接收所述用户针对所述动画元素输入的动画效果标识和动画配置参数；
处理模块，用于根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式；
显示模块，在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；
确认模块，用于在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。
本申请实施例另一方面提供了一种Web端动画配置装置，所述装置包括处理器、存储器、输入输出接口；
所述处理器分别与所述存储器和所述输入输出接口相连，其中，所述输入输出接口用于页面交互，所述存储器用于存储程序代码，所述处理器用于调用所述程序代码，以执行如本申请实施例中一方面中所述的方法。，
本申请实施例另一方面提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时，执行如本申请实施例中一方面中所述的方法。
通过本申请实施例可以简化动画配置过程，提高了动画配置的效率，同时实现对动画效果的兼容性配置，使得该动画元素可以在不同浏览器上显示相同的动画效果。
附图说明
图1是本申请实施例提供的一种Web端动画配置流程图；
图2a是本申请实施例提供的一种可选Web端动画配置方法的页面示意图；
图2b是本申请实施例提供的一种动画配置选择界面示意图；
图2c是本申请实施例提供的一种动画显示效果示意图；
图3是本申请实施例提供的一种Web端动画配置装置示意图；
图4是本申请实施例提供的一种终端设备的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
请参见图1，图1是本申请实施例提供的一种Web端动画配置流程图。如图1所示，上述方法包括如下步骤：
步骤S101，获取用户在动画配置页面导入的动画元素，并接收用户针对该动画元素输入的动画效果标识和动画配置参数。
在一些可行的实施方式中，为用户提供动画配置页面，当获取到该用户在上述动画配置页面导入的动画元素时，为所述用户提供该动画元素的动画配置选项，以便获取该用户针对上述动画元素输入的动画效果标识和动画配置参数。其中，上述动画效果标识为预定义的动画名称，该动画名称用于定义上述动画元素的名字，并用于规定该动画元素需要绑 定到keyframe选择器的名称；上述动画配置参数包括但不限于：动画过程时长、动画速度参数、动画开始延时、动画播放次数、循环时是否反向播放动画等，上述动画配置属性仅为部分例举出的配置属性，不表示其他动画animation的属性不在本申请实施例的动画配置范围内。
步骤S102，根据上述动画效果标识和动画配置参数生成针对上述动画元素的第一层叠样式表(Cascading Style Sheets，CSS)样式和第二CSS样式。
在一些可行的实施方式中，上述第一CSS样式用于定义上述动画元素的基础动画属性，上述第二CSS样式包括分别定义上述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码。具体的，上述第一CSS样式包括的一些可选的动画属性和一种可选的动画属性描述方式包括但不限于“animation:name duration timing-function delay iteration-count direction”，该动画属性描述方式依次表示“动画：动画名称动画播放时长动画速度曲线动画开始前延时动画播放次数循环时是否反向播放”，其中，上述动画名称与上述动画效果标识对应，其余动画属性则分别与上述动画配置参数一一对应。其中，上述动画属性的一种可选的动画属性描述方式的默认值为：“animation:none 0ease 0 1normal”，即可以认为预定义第一CSS样式为上述默认值。当获取到上述动画效果标识和动画配置参数后，将上述预定义第一CSS样式中name的值更新为上述动画效果标识，其余动画属性则分别更新为上述动画配置参数，进行一一对应，从而得到上述第一CSS样式。
可选的，根据上述动画效果标识确定该动画元素的运动轨迹，并结合上述动画配置参数确定该动画元素在上述动画过程时长中每一帧的元素动画状态。具体的，根据该动画元素的运动轨迹中的初始状态和上述动画速度参数确定该动画元素在动画开始后的每一帧的状态变化量，从而确定该动画元素在上述动画过程时长中每一帧的元素动画状态。具体的，以上述动画效果标识作为第二CSS样式中keyframe选择器的名称，通过上述动画效果标识从预定义第二CSS样式中选取对应的多个keyframe选择器，并确定该动画元素的运动轨迹，上述运动轨迹包括但不限于：从左至右、从上往下、从右往左、从下往上、旋转等，并根据上述动画配置参数中动画速度参数确定该动画元素在每一帧的元素动画状态。其中，上述动画属性中timing-function使用名为三次贝塞尔(Cubic Bezier)函数的数学函数生成速度曲线，用来定义动画从一套CSS样式变为另一套所用的时间。具体的，当获取到上述动画配置属性中动画速度参数时，根据上述动画速度参数选取上述多个keyframe选择器中符合上述动画速度参数对应的运动轨迹的keyframe选择器，该keyframe选择器即为上述第二CSS样式。
可选的，该动画元素的第一CSS样式包括多个不同兼容前缀的基础动画属性描述，其中每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。
可选的，该动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。
其中，上述兼容前缀包括：-webkit-、-moz-、-o-或-ms-，-webkit-对应的浏览器类型包括Google或Safari，-moz-对应的浏览器类型包括Firefox，-o-对应的浏览器类型包括Opera，-ms-对应的浏览器类型包括IE。
步骤S103，在上述动画配置页面中加载该动画元素的第一CSS样式和第二CSS样式，以使在上述动画配置页面中预览上述动画元素的动画效果。
在一些可行的实施方式中，切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。具体的，在任一浏览器中打开加载该动画元素的动画配置结果页面，检测打开上述动画配置结果页面的浏览器内核类型，运行上述第一CSS样式和第二CSS样式中上述浏览器内核类型对应的兼容前缀的样式描述语句，从而显示通过该动画元素的动画效果标识和动画配置参数确定该动画元素的动画配置结果，显示该动画配置结果对应的动画效果。可选的，通过在不同浏览器中显示该动画元素进行动画配置后的动画效果，从而确保该动画元素的动画兼容性配置成功，并确定上述动画效果为用户所需的动画效果。
步骤S104，在接收到针对上述动画元素的动画效果的确认指令后，将该动画元素的第一CSS样式和第二CSS样式添加至目标页面中该动画元素对应的样式描述代码中。
在一些可行的实施方式中，当接收到针对该动画元素的动画效果的确认指令，则将该动画元素的第一CSS样式和第二CSS样式导出，并将上述第一CSS样式和第二CSS样式加入目标页面代码中。具体的，用户在不同浏览器上查看了该动画元素的动画效果后，若达到该用户的动画效果要求，则该用户可以点击动画配置确认按钮，当检测到该动画配置确认按钮被点击，即接收到该动画元素的动画效果的确认指令，将最终得到的该动画元素的第一CSS样式和第二CSS样式导出，并将上述第一CSS样式和第二CSS样式添加到目标页面中该动画元素对应的样式描述代码中。
可选的，可以直接在目标页面的html标签元素内嵌入上述第一CSS样式和第二CSS样式，即直接在该动画元素的描述标签内的div中加入上述第一CSS样式和第二CSS样式，得到“<div>第一CSS样式</div><div>第二CSS样式</div>”，实现对该动画元素的动画配置。
可选的，可以对目标页面的html文档中头部head部分内的style声明进行处理，将上述第一CSS样式和第二CSS样式插入上述style声明中，对该动画元素进行动画样式描述，即通过对目标页面中的该动画元素设置选择器，在上述style声明中通过对该动画元素的选择器进行描述，从而实现对该动画元素的动画配置。其中，上述选择器可以包括：id选择器、class选择器、元素名称选择器、复合选择器、属性选择器和层次选择器等。具体的，假定该动画元素在目标页面中的选择器是使用id选择器，则假设该动画元素的id＝big-rotate，从而得到“<style type＝"text/css"><！--#big-rotate{第一CSS样式；第二CSS样式}--></style>”。
可选的，可以使用@import引用外部CSS文件，即将上述第一CSS样式和第二CSS样式导出，以.css文件存储，在目标页面的html文件中头部head内style声明部分引用，得到“<style type＝"text/css"><！--@import url(第一CSS样式.css)；@import url(第二CSS样式.css)；--></style>”。
可选的，在所述目标页面的html文档中头部head部分添加所述第一CSS样式的链接地址及所述第二CSS样式的链接地址。具体的，可以在目标页面的html描述的头部head中添加“<link rel＝"stylesheet"href＝"第一CSS样式.css"type＝"text/css"/><link rel＝"stylesheet" href＝"第二CSS样式.css"type＝"text/css"/>”，从而实现对该动画元素的动画配置描述。
上述可选的将该动画元素的第一CSS样式和第二CSS样式添加到目标页面中该动画元素对应的样式描述代码中的方法仅为列举的部分可选实施方式，也可以使用其他CSS样式的引用方式。
本申请实施例提供的Web端动画配置过程，是通过获取用户输入的针对动画元素的动画效果标识和动画配置参数，根据上述动画效果标识和动画配置参数生成该动画元素的CSS样式，在获取到该动画元素的动画效果确认指令后，将上述CSS样式加入目标页面中该动画元素的样式描述代码中，实现该动画元素的动画配置，简化动画配置过程，提高了动画配置效率。
本申请实施例提供的方法可基于上述图1所示的各个步骤所生成的CSS样式对动画元素进行动画配置，下面将结合图2a至2c对本申请实施例提供的方法进行说明。
可选的，在一种可能的动画配置方法中，参见图2a至2c，图2a至2c是本申请实施例提供的一种可选Web端动画配置方法的页面示意图。其中，如图2a所示，图2a是本申请实施例提供的一种可选Web端动画配置方法的页面示意图。具体的，如图2a所示，在动画配置页面20中包括动画播放页面201和动画样式描述页面202。当用户需要对某个动画元素进行动画配置时，在上述动画配置页面20中的动画播放页面201中上传动画元素2011。当获取到该用户在动画播放页面201中导入的动画元素2011后，可选的，可以在动画样式描述页面202中显示该动画元素2011的CSS样式描述代码，同时显示动画配置选择界面203。
具体参见图2b，图2b为本申请实施例提供的一种动画配置选择界面示意图。如图2b所示，在该动画配置选择界面203初始显示时为初始动画配置203a所示，经过配置后的动画配置选择界面203显示如生成动画配置203b所示。
具体的，该初始动画配置203a中，该动画元素2011的动画配置初始值包括：name初始值为none，duration初始值为0s，timing-function初始值为ease，delay初始值为0s，iteration-count初始值为1，direction初始值为normal，具体的可参见初始动画配置203a。其中，在本申请实施例中存储有预定义第一CSS样式和预定义第二CSS样式，可以参见图2a中动画样式描述页面202中所示，包括两部分：第一CSS样式2021和第二CSS样式2022。
具体的，上述预定义第一CSS样式中的各个动画属性的配置参数均为默认值，上述预定义第二CSS样式中包括多段CSS样式代码，每段CSS样式代码描述一种动画运动轨迹。其中，预定义第一CSS样式和预定义第二CSS样式通过加不同的兼容前缀来支持不同的浏览器内核，具体的实现过程如上述图1中的步骤S102中所示。
具体的，这里假定获取到该用户针对该动画元素2011输入的动画效果标识和动画配置参数为对name、duration、timing-function、delay、iteration-count、direction的配置，其中，name值对应的是动画效果标识。具体的，具体的，可参见生成动画配置203b，假定获取到该用户针对该动画元素输入的动画效果标识为big-rotate，该动画效果标识为预定义可选项，即name的值为预先定义好的一组预定义可选项，每个预定义可选项对应一种运动轨迹；动画配置参数包括：duration值为3s，为该动画元素的动画过程时长；timing-function的值为 linear，为该动画元素的动画速度参数，表示该动画匀速运动，可选的，也可以是其他CSS的animation中包括的timing-function函数值或自定义cubic-bezier(n,n,n,n)函数值；delay的值为1s，为该动画元素的动画开始延时；iteration-count的值为2，为该动画元素的动画播放次数；direction的值为normal，为该动画元素是否轮流反向播放，表示动画正常播放，可选的，还可以为alternate，表示该动画应该轮流反向播放。可选的，可以将上述duration、delay等的单位设置为毫秒ms。
当获取到该用户针对该动画元素输入的动画效果标识和动画配置参数后，若检测到该用户点击确认按钮，即若接收到该动画元素的动画配置确认请求，更新动画样式描述页面202中的CSS样式代码。对服务器中的预定义第一CSS样式和预定义第二CSS样式进行配置，通过将上述动画效果标识和动画配置参数添加至上述预定义第一CSS样式中生成第一CSS样式。具体的，将获取到的动画效果标识和动画配置参数替换上述预定义第一CSS样式中的对应动画属性的默认值，从而生成第一CSS样式，在第一CSS样式显示2021中进行显示。
根据上述动画效果标识从上述预定义第二CSS样式中选取对应的样式描述代码段，可知上述动画效果标识为big-rotate，则从第二CSS样式中选择keyframes选择器名称为big-rotate的多个样式描述代码段，再根据上述动画速度参数确定具体的第二CSS样式。具体的上述动画运动速度参数为linear，可知该动画元素的动画从头至尾的速度是相同的，则从上述keyframes选择器名称为big-rotate的多个样式描述代码段中查找符合linear运动速度变化规律的样式描述代码段，该样式描述代码段即为第二CSS样式，以每帧3度的角度进行旋转运动，得到符合linear运动速度变化规律的第二CSS样式，并在第二CSS样式显示2022中进行显示。
可选的，在上述动画播放页面201中加载上述第一CSS样式和第二CSS样式，并显示该动画元素的动画效果，具体可参见图2c所示，图2c是该动画元素的第一CSS样式和第二CSS样式对应的动画效果。具体的，由上述第一CSS样式可知，该动画元素将在打开目标页面1s后开始显示动画效果，于3s内匀速顺时针旋转一周，循环两次。具体的，如图2c所示，动画元素2011以左图所示顺时针匀速旋转，左图是该动画元素2011在每一帧的动画状态。具体过程如右图所示，动画元素2011以动画元素状态2011.0为初始状态；第一帧旋转3度得到动画元素状态2011.1；第二帧旋转7度，得到动画元素状态2011.2；第三帧旋转10度，得到动画元素状态2011.3；……；第25帧旋转90度，得到动画元素状态2011.25；……；第100帧旋转360度，得到动画元素状态2011.100。上述每一帧的动画元素状态是同一个中心点，如图2c中左图所示。重复上述顺时针匀速旋转过程，即播放两次上述顺时针匀速旋转过程，完成该动画元素2011的动画效果显示。可以保存该动画配置页面20，在不同浏览器上运行该动画配置页面20，在动画播放页面201中显示该动画元素2011的动画效果，以使用户可以确认最终的动画效果是否达到要求。
可选的，若接收到该动画元素的动画效果的确认指令后，将上述第一CSS样式和第二CSS样式添加至目标页面中该动画元素对应的样式描述代码中，具体过程如图1所示步骤S104所示，具体不再赘述。
可选的，若接收到该动画元素的动画配置更改指令，则重复如图2a至2c的过程，得 到更改后的第一CSS样式和第二CSS样式，具体不再赘述。
可选的，参见图3，图3是本申请实施例提供的一种Web端动画配置装置示意图，如图3所示，该Web端动画配置装置可以用于上述图1所对应实施例中的终端设备，具体的，该装置可以包括：交互模块301、处理模块302、显示模块303和确认模块304。
交互模块301，用于获取用户在动画配置页面导入的动画元素，并接收上述用户针对该动画元素输入的动画效果标识和动画配置参数；
处理模块302，用于根据上述动画效果标识和动画配置参数生成针对该动画元素的第一CSS样式和第二CSS样式；
显示模块303，在上述动画配置页面中加载该动画元素的第一CSS样式和第二CSS样式，以使在上述动画配置页面中预览该动画元素的动画效果；
确认模块304，用于在接收到针对该动画元素的动画效果的确认指令后，将该动画元素的第一CSS样式和第二CSS样式添加至目标页面中该动画元素对应的样式描述代码段中。
其中，上述处理模块302还用于：
根据上述动画效果标识确定该动画元素的运动轨迹，并结合上述动画配置参数确定该动画元素在上述动画过程时长中每一帧的元素动画状态。
其中，上述处理模块302还用于：
根据该动画元素的运动轨迹中的初始状态和上述动画速度参数确定该动画元素在动画开始后的每一帧的状态变化量，从而确定该动画元素在上述动画过程时长中每一帧的元素动画状态。
其中，上述处理模块302还用于：
根据上述动画效果标识和动画配置参数生成针对该动画元素的第一CSS样式中的基础动画属性和第二CSS样式中的样式描述代码，其中，上述基础动画属性包括多个不同兼容前缀的基础动画属性描述，上述样式描述代码包括多个不同兼容前缀的样式描述语句，具体的，每个兼容前缀的基础动画属性描述和样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。
其中，上述显示模块303还用于：
切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。
可选的，上述确认模块304还用于：
在接收到针对该动画元素的动画配置参数更改指令后，调用上述交互模块，从而使得该装置继续执行上述如图1所示实施例中步骤。
具体实现中，上述装置可通过上述各个模块执行上述图1所提供的实现方式，实现上述各实施例中所实现的功能，具体可参见上述图1所示的方法实施例中各个步骤提供的相应描述，在此不再赘述。
本申请实施例提供了一种Web端动画配置装置，上述装置通过将获取到的动画元素对应的用户输入数据转换成该动画元素的CSS样式，从而直接得到该动画元素的动画样式描 述代码，其中，上述用户输入数据为该用户输入的关于该动画元素的动画效果标识和动画配置参数。同时在接收到该动画元素的动画效果确认指令后，将上述CSS样式添加至目标页面中该动画元素对应的样式描述代码段中，从而简化了动画配置过程，提高动画配置效率。而对上述CSS样式中不同兼容前缀的CSS样式描述进行配置，提高了该CSS样式的兼容性，使得该动画元素在不同的浏览器中有相同的动画效果。
参见图4，图4是本申请实施例提供的一种终端设备的结构示意图。如图4所示，本实施例中的终端设备可以包括：一个或多个处理器401、存储器402和输入输出接口403。上述处理器401、存储器402和输入输出接口403通过总线404连接。其中，上述输入输出接口用于页面交互，上述存储器402用于存储计算机程序，该计算机程序包括程序指令；处理器401用于执行存储器402存储的程序指令，执行如下操作：
通过上述输入输出接口403获取用户在动画配置页面导入的动画元素，并接收用户针对该动画元素输入的动画效果标识和动画配置参数；
根据上述动画效果标识和动画配置参数生成针对该动画元素的第一CSS样式和第二CSS样式，上述第一CSS样式用于定义该动画元素的基础动画属性，上述第二CSS样式包括分别定义该动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；
在上述动画配置页面中加载该动画元素的第一CSS样式和第二CSS样式，以使在上述动画配置页面中预览该动画元素的动画效果；
在接收到针对该动画元素的动画效果的确认指令后，处理器将该动画元素的第一CSS样式和第二CSS样式添加至目标页面中该动画元素对应的样式描述代码段中。
在一些可行的实施方式中，上述处理器401用于：
根据上述动画效果标识确定所述动画元素的运动轨迹，并结合上述动画配置参数确定该动画元素在上述动画过程时长中每一帧的元素动画状态。
在一些可行的实施方式中，上述处理器401用于：
根据该动画元素的运动轨迹中的初始状态和上述动画速度参数确定该动画元素在动画开始后的每一帧的状态变化量，从而确定该动画元素在上述动画过程时长中每一帧的元素动画状态。
在一些可行的实施方式中，上述处理器401还用于：
切换不同浏览器内核打开加载了该动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在上述动画配置页面中预览该动画元素的动画效果。
在一些可行的实施方式中，上述处理器401可以是中央处理单元(central processing unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(digital signal processor，DSP)、专用集成电路(application specific integrated circuit，ASIC)、现成可编程门阵列(field-programmable gate array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
该存储器402可以包括只读存储器和随机存取存储器，并向处理器401和输入输出接 口403提供指令和数据。存储器402的一部分还可以包括非易失性随机存取存储器。例如，存储器402还可以存储设备类型的信息。
具体实现中，上述终端设备可通过其内置的各个功能模块执行如上述图1中各个步骤所提供的实现方式，具体可参见上述图1中各个步骤所提供的实现方式，在此不再赘述。
本申请实施例通过提供一种终端设备，包括：处理器、存储器、输入输出接口，通过处理器获取存储器中的计算机指令，执行上述图1中所示方法的各个步骤，进行Web端动画配置操作。通过存储器中的计算机指令，处理器执行Web端对动画元素的动画配置过程，得到该动画元素的CSS样式，将该CSS样式加入目标页面中该动画元素对应的样式描述代码段中，从而简化动画配置的过程，提高动画配置效率，同时得到的不同兼容前缀的CSS样式代码段实现了对于该动画元素的动画兼容性配置，使得该动画元素的动画在不同浏览器上有同样的动画效果，从而统一了动画表现形式。
本申请实施例还提供一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序包括程序指令，该程序指令被处理器执行时实现图1中各个步骤所提供的Web端动画配置方法，具体可参见上述图1所示各个步骤所提供的实现方式，在此不再赘述。
上述计算机可读存储介质可以是前述任一实施例提供的Web端动画配置装置或者上述终端设备的内部存储单元，例如电子设备的硬盘或内存。该计算机可读存储介质也可以是该电子设备的外部存储设备，例如该电子设备上配备的插接式硬盘，智能存储卡(smart media card,SMC)，安全数字(secure digital,SD)卡，闪存卡(flash card)等。进一步地，该计算机可读存储介质还可以既包括该电子设备的内部存储单元也包括外部存储设备。该计算机可读存储介质用于存储该计算机程序以及该电子设备所需的其他程序和数据。该计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。
本申请实施例的说明书和权利要求书及附图中的术语“第一”、“第二”等是用于区别不同对象，而非用于描述特定顺序。此外，术语“包括”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、装置、产品或设备没有限定于已列出的步骤或模块，而是可选地还包括没有列出的步骤或模块，或可选地还包括对于这些过程、方法、装置、产品或设备固有的其他步骤单元。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
本申请实施例提供的方法及相关装置是参照本申请实施例提供的方法流程图和/或结构示意图来描述的，具体可由计算机程序指令实现方法流程图和/或结构示意图的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。这些计算机程序指令可提供到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现 在流程图一个流程或多个流程和/或结构示意图一个方框或多个方框中指定的功能的装置。这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或结构示意图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或结构示意一个方框或多个方框中指定的功能的步骤。
实施本申请实施例，将具有如下有益效果：
采用了Web端动画配置方法和装置之后，用户只需要添加对于动画元素的动画效果标识和动画配置参数，该装置可以直接通过上述动画效果标识和动画配置参数查找并修改预定义CSS样式，从而得到该动画元素的CSS样式，并将该动画元素配置后的动画效果进行显示，从而让用户可以直观的查看该动画元素的动画效果，实现了动画配置中CSS样式一次编写，多次使用，从而简化了动画配置过程，提高动画配置效率。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (20)

  1. 一种Web端动画配置方法，其特征在于，包括：
    获取用户在动画配置页面导入的动画元素，并接收用户针对所述动画元素输入的动画效果标识和动画配置参数；
    根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式，所述第一CSS样式用于定义所述动画元素的基础动画属性，所述第二CSS样式包括分别定义所述动画元素的动画效果过程中各个元素运动状态的多个样式描述代码；
    在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；
    在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。
  2. 根据权利要求1所述的方法，其特征在于，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；
    所述根据所述动画效果标识和动画配置参数生成针对所述动画元素的第二CSS样式包括：
    根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。
  3. 根据权利要求2所述的方法，其特征在于，所述根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态包括：
    根据所述动画元素的运动轨迹中的初始状态和所述动画速度参数确定所述动画元素在动画开始后的每一帧的状态变化量，从而确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。
  4. 根据权利要求1所述的方法，其特征在于，所述动画元素的第二CSS样式中的样式描述代码包括多个不同兼容前缀的样式描述语句，其中每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。
  5. 根据权利要求1所述的方法，其特征在于，所述动画元素的第一CSS样式包括多个不同兼容前缀的基础动画属性描述，其中每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。
  6. 根据权利要求4或5所述的方法，其特征在于，所述兼容前缀包括：
    -webkit-、-moz-、-o-或-ms-。
  7. 根据权利要求4或5所述的方法，其特征在于，在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果包括：
    切换不同浏览器内核打开加载了所述动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在所述动画配置页面中预览所述动画元素的动画效果。
  8. 根据权利要求2所述的方法，其特征在于，所述根据所述动画效果标识确定所述动 画元素的运动轨迹，包括：
    根据所述动画效果标识从预定义第二CSS样式中选取所述动画效果标识对应的keyframe选择器，基于所述keyframe选择器确定所述动画元素的运动轨迹。
  9. 根据权利要求1所述的方法，其特征在于，所述将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中，包括：
    在所述目标页面的html标签元素内嵌入所述第一CSS样式和所述第二CSS样式；
    或者，将所述第一CSS样式和所述第二CSS样式插入所述目标页面的html文档中头部head部分内的style声明中；
    或者，将所述第一CSS样式和所述第二CSS样式导出得到外部CSS文件，在所述目标页面中所述动画元素对应的样式描述代码段中，通过@import引用所述外部CSS文件；
    或者，在所述目标页面的html文档中头部head部分添加所述第一CSS样式的链接地址及所述第二CSS样式的链接地址。
  10. 一种Web端动画配置装置，其特征在于，所述装置包括：
    交互模块，用于获取用户在动画配置页面导入的动画元素，并接收所述用户针对所述动画元素输入的动画效果标识和动画配置参数；
    处理模块，用于根据所述动画效果标识和动画配置参数生成针对所述动画元素的第一CSS样式和第二CSS样式；
    显示模块，在所述动画配置页面中加载所述动画元素的第一CSS样式和第二CSS样式，以使在所述动画配置页面中预览所述动画元素的动画效果；
    确认模块，用于在接收到针对所述动画元素的动画效果的确认指令后，将所述动画元素的第一CSS样式和第二CSS样式添加至目标页面中所述动画元素对应的样式描述代码段中。
  11. 根据权利要求10所述的装置，其特征在于，所述动画配置参数包括：动画过程时长、动画速度参数、动画开始延时以及动画播放次数；
    所述处理模块具体用于：
    根据所述动画效果标识确定所述动画元素的运动轨迹，并结合所述动画配置参数确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。
  12. 根据权利要求11所述的装置，其特征在于，所述处理模块具体用于：
    根据所述动画元素的运动轨迹中的初始状态和所述动画速度参数确定所述动画元素在动画开始后的每一帧的状态变化量，从而确定所述动画元素在所述动画过程时长中每一帧的元素动画状态。
  13. 根据权利要求10所述的装置，其特征在于，所述处理模块还用于：
    根据所述动画效果标识和所述动画配置参数生成针对所述动画元素的所述第二CSS样式中的所述样式描述代码，其中，所述样式描述代码包括多个不同兼容前缀的样式描述语句，其中，每个兼容前缀的样式描述语句用于被该兼容前缀对应的浏览器内核识别和执行。
  14. 根据权利要求10所述的装置，其特征在于，所述处理模块还用于：
    根据所述动画效果标识和所述动画配置参数生成针对所述动画元素的所述第一CSS样式中的所述基础动画属性，其中，所述基础动画属性包括多个不同兼容前缀的基础动画属 性描述，其中，每个兼容前缀的基础动画属性描述用于被该兼容前缀对应的浏览器内核识别和执行。
  15. 根据权利要求13或14任一项所述的方法，其特征在于，所述兼容前缀包括：
    -webkit-、-moz-、-o-或-ms-。
  16. 根据权利要求13或14任一项所述的装置，其特征在于，所述显示模块具体用于：
    切换不同浏览器内核打开加载了所述动画元素的第一CSS样式和第二CSS样式的动画配置页面，以使在所述动画配置页面中预览所述动画元素的动画效果。
  17. 根据权利要求10所述的装置，其特征在于，所述确认模块还用于：
    在接收到针对所述动画元素的动画配置参数更改指令后，调用所述交互模块，以执行所述获取用户在动画配置页面导入的动画元素的过程。
  18. 根据权利要求11所述的装置，其特征在于，所述处理模块还用于：
    根据所述动画效果标识从预定义第二CSS样式中选取所述动画效果标识对应的keyframe选择器，基于所述keyframe选择器确定所述动画元素的运动轨迹。
  19. 一种Web端动画配置装置，其特征在于，包括处理器、存储器、输入输出接口；
    所述处理器分别与所述存储器和所述输入输出接口相连，其中，所述输入输出接口用于页面交互，所述存储器用于存储程序代码，所述处理器用于调用所述程序代码，以执行如权利要求1-9任一项所述的方法。
  20. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，所述程序指令当被处理器执行时，执行如权利要求1-9任一项所述的方法。
PCT/CN2019/117544 2019-01-25 2019-11-12 一种Web端动画配置方法及装置 Ceased WO2020151316A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910074532.2A CN109885795A (zh) 2019-01-25 2019-01-25 一种Web端动画配置方法及装置
CN201910074532.2 2019-01-25

Publications (1)

Publication Number Publication Date
WO2020151316A1 true WO2020151316A1 (zh) 2020-07-30

Family

ID=66926949

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/117544 Ceased WO2020151316A1 (zh) 2019-01-25 2019-11-12 一种Web端动画配置方法及装置

Country Status (2)

Country Link
CN (1) CN109885795A (zh)
WO (1) WO2020151316A1 (zh)

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109885795A (zh) * 2019-01-25 2019-06-14 平安科技（深圳）有限公司 一种Web端动画配置方法及装置
CN110276031A (zh) * 2019-06-24 2019-09-24 北京向上一心科技有限公司 页面组件的动画展示方法、系统、设备及计算机可读存储介质
CN110658974B (zh) * 2019-08-01 2022-08-16 平安科技（深圳）有限公司 页面滑动方法、装置、电子设备和存储介质
CN110610535B (zh) * 2019-08-19 2023-05-09 吉奥时空信息技术股份有限公司 基于矢量数据的可配置前端纯js地图动画集实现方法
CN110662105A (zh) * 2019-10-16 2020-01-07 广州华多网络科技有限公司 动画文件的生成方法、装置及存储介质
CN111311715B (zh) * 2020-02-14 2023-07-21 北京三快在线科技有限公司 一种网页中添加动画效果的方法及装置
CN111857690A (zh) * 2020-07-29 2020-10-30 北京字节跳动网络技术有限公司 一种动画效果的调试方法、装置、计算机设备及存储介质
CN112817636B (zh) * 2021-02-07 2025-11-25 上海哔哩哔哩科技有限公司 弹出层的动画组件配置方法与展示方法
CN113157275B (zh) * 2021-05-25 2023-09-08 网易（杭州）网络有限公司 帧动画的渲染方法、装置、电子设备及存储介质
CN113835684B (zh) * 2021-09-16 2024-07-05 支付宝(杭州)信息技术有限公司 自动生成图片配置文件的方法及装置
CN116186440A (zh) * 2023-02-28 2023-05-30 中电云数智科技有限公司 基于css的前端数字滚动动画实现方法

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2013038274A2 (en) * 2011-09-13 2013-03-21 Apple Inc. Merging user interface behaviors
CN107767431A (zh) * 2017-09-28 2018-03-06 北京知道创宇信息技术有限公司 一种Web动画制作方法及计算设备
CN108665520A (zh) * 2018-04-24 2018-10-16 微梦创科网络科技（中国）有限公司 一种页面动画渲染的方法及装置
CN109002282A (zh) * 2018-07-26 2018-12-14 北京京东金融科技控股有限公司 一种在web页面开发中实现动画效果的方法和装置
CN109885795A (zh) * 2019-01-25 2019-06-14 平安科技（深圳）有限公司 一种Web端动画配置方法及装置

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10282401B2 (en) * 2013-03-13 2019-05-07 Usablenet Inc. Methods for processing cascading style sheets and devices thereof
CN105677654B (zh) * 2014-11-18 2020-07-03 阿里巴巴（中国）有限公司 广告过滤方法及装置
CN104933142B (zh) * 2015-06-18 2018-05-04 北京奇虎科技有限公司 动画展示方法和装置
CN106168978B (zh) * 2016-07-25 2020-12-15 腾讯科技（深圳）有限公司 一种网页中弹窗的处理方法和装置

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2013038274A2 (en) * 2011-09-13 2013-03-21 Apple Inc. Merging user interface behaviors
CN107767431A (zh) * 2017-09-28 2018-03-06 北京知道创宇信息技术有限公司 一种Web动画制作方法及计算设备
CN108665520A (zh) * 2018-04-24 2018-10-16 微梦创科网络科技（中国）有限公司 一种页面动画渲染的方法及装置
CN109002282A (zh) * 2018-07-26 2018-12-14 北京京东金融科技控股有限公司 一种在web页面开发中实现动画效果的方法和装置
CN109885795A (zh) * 2019-01-25 2019-06-14 平安科技（深圳）有限公司 一种Web端动画配置方法及装置

Also Published As

Publication number Publication date
CN109885795A (zh) 2019-06-14

Similar Documents

Publication Publication Date Title
WO2020151316A1 (zh) 一种Web端动画配置方法及装置
CN105094804A (zh) 在页面中添加动画的方法和装置
US20130346851A1 (en) Declarative show and hide animations in html5
US10108437B2 (en) Rendition of a content editor
CN104933142A (zh) 动画展示方法和装置
CN109254773A (zh) 骨架页面生成方法、装置、设备和存储介质
CA3040568A1 (en) System and method for generating websites from predefined templates
US9996512B2 (en) Customized processing of DOM objects
US20220383381A1 (en) Video generation method, apparatus, terminal and storage medium
CN111158687B (zh) Java插件的界面生成方法、装置、计算机设备和存储介质
CN102929599A (zh) 移动终端浏览器界面的修改方法及装置、移动终端
CN110968314A (zh) 一种页面生成方法及装置
CN113655999A (zh) 一种页面控件的渲染方法、装置、设备及存储介质
US7783967B1 (en) Packaging web content for reuse
CN105824873A (zh) 一种推荐音乐的方法及终端
CN113050921A (zh) 一种网页转换方法、装置、存储介质和计算机设备
CN112817595B (zh) 界面渲染方法、装置、存储介质及电子设备
CN114860238A (zh) 页面生成方法、装置及电子设备
US11350185B2 (en) Text-to-audio for interactive videos using a markup language
CN117032666A (zh) 基于编辑器的页面编辑方法、装置、终端设备及存储介质
CN112102446A (zh) 一种动画处理方法、设备及计算机可读存储介质
US10628505B2 (en) Using gesture selection to obtain contextually relevant information
CN111367519B (zh) 页面零件化使用方法、装置、计算设备及计算机存储介质
US11526578B2 (en) System and method for producing transferable, modular web pages
CN117336554A (zh) 一种视频剪辑方法、装置、设备及存储介质

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19912092

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19912092

Country of ref document: EP

Kind code of ref document: A1