Virtual control display method and device, equipment, medium and product
By using CSS animation files in the browser to control the movement of virtual product controls, the problem of insufficient interactive performance and reusability of virtual controls in the prior art is solved, and an efficient and compatible virtual control display effect is achieved.
Patent Information
- Application Number
- CN202411873851.7
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-19
- Publication Date
- 2025-04-29
AI Technical Summary
In the prior art, canvas is used to perform motion animation of virtual controls, and there is a problem of weak interactive performance and poor reusability.
By using CSS animation files in the browser, the virtual product controls can automatically control the preset motion trajectory to realize the motion animation display of the virtual controls.
It improves the interactive performance and reusability of virtual controls, reduces the amount of code, strong compatibility, does not require third-party dependencies, and has low performance requirements for hardware equipment.
Smart Images
Figure CN119903260A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of Internet technology, and in particular, relates to a virtual control display method, device, equipment, medium and product. Background Art
[0002] With the development and popularization of Internet technology, online shopping has become the main way of shopping due to its advantages of extensiveness, convenience and no space restrictions. In the shopping pages of trading platforms, canvas is usually used for painting to realize the motion animation of related virtual controls. However, canvas painting requires writing motion trajectory equations in JS, which requires a relatively large amount of code; canvas compatibility is relatively poor, and some functions are not supported by some browsers; interactive performance is weak and reusability is poor. Summary of the invention
[0003] The embodiments of the present application provide a virtual control display method, device, equipment, medium and product, which are used to at least solve the problem of weak interactive performance and poor reusability of motion animation of related virtual controls achieved by using canvas for painting in the related art.
[0004] In a first aspect, an embodiment of the present application provides a virtual control display method, which is applied to a browser, wherein the browser includes a product list interface, and the product list interface includes at least a virtual shopping cart control, multiple product information, and a purchase identifier corresponding to each product;
[0005] The method comprises:
[0006] receiving a first input of a purchase identifier of any one of a plurality of commodities by a user;
[0007] In response to the first input, displaying a virtual commodity control on the commodity list interface;
[0008] Determine a CSS animation file for the movement of the virtual commodity control to the virtual shopping cart control according to a preset motion track type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface;
[0009] Display the virtual product animation corresponding to the CSS animation file.
[0010] In a second aspect, an embodiment of the present application provides a virtual control display device, which is applied to a browser, wherein the browser includes a product list interface, and the product list interface includes at least a virtual shopping cart control, multiple product information, and a purchase identifier corresponding to each product;
[0011] The device comprises:
[0012] A receiving module, used for receiving a first input of a purchase identification of any target commodity among a plurality of commodities by a user;
[0013] A display module, configured to display a virtual commodity control on the commodity list interface in response to the first input;
[0014] a determination module, configured to determine a CSS animation file for moving the virtual commodity control to the virtual shopping cart control according to a preset motion trajectory type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface;
[0015] The display module is used to display the virtual product animation corresponding to the CSS animation file.
[0016] In a third aspect, an embodiment of the present application provides an electronic device, comprising: a processor and a memory storing computer program instructions; when the processor executes the computer program instructions, the steps of the virtual control display method as described in any one of the embodiments of the first aspect are implemented.
[0017] In a fourth aspect, an embodiment of the present application provides a computer-readable storage medium, on which computer program instructions are stored. When the computer program instructions are executed by a processor, the steps of the virtual control display method described in any embodiment of the first aspect are implemented.
[0018] In a fifth aspect, an embodiment of the present application provides a computer program product, which is stored in a storage medium and is executed by at least one processor to implement the steps of the virtual control display method provided in the first aspect of the embodiment of the present application.
[0019] The virtual control display method, device, equipment, medium and product of the embodiment of the present application, in the commodity list interface, after clicking the purchase mark corresponding to the target commodity, the virtual commodity control is displayed and the virtual commodity control is automatically controlled to perform movement through the CSS code. The virtual commodity control starts from its initial position, and through pre-set movement parameters, it performs the movement corresponding to the preset movement trajectory type and reaches the end point, that is, the location of the virtual shopping cart control. The CSS language content used can be compatible and run in modern browsers, and can run in the browser without any third-party dependence; the solution of using CSS to achieve movement has low requirements on hardware device performance; CSS directly acts on the target element (i.e., the virtual commodity control), with better interactivity and strong code reusability. BRIEF DESCRIPTION OF THE DRAWINGS
[0020] In order to more clearly illustrate the technical solution of the embodiments of the present application, the following is a brief introduction to the drawings required for use in the embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.
[0021] Figure 1 It is a flowchart of a virtual control display method provided in an embodiment of the present application;
[0022] Figure 2 It is a structural schematic diagram of a virtual control display device provided in an embodiment of the present application;
[0023] Figure 3 It is a structural schematic diagram of an electronic device provided in an embodiment of the present application.
[0024] Reference numerals:
[0025] Virtual control display device 200, receiving module 201, display module 202, determination module 203, display module 204,
[0026] Electronic device 300 , processor 301 , memory 302 , communication interface 303 , bus 310 . DETAILED DESCRIPTION
[0027] The features and exemplary embodiments of various aspects of the present application will be described in detail below. 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 and specific embodiments. It should be understood that the specific embodiments described herein are only intended to explain the present application, rather than to limit the present application. For those skilled in the art, the present application can be implemented without the need for some of these specific details. The following description of the embodiments is only to provide a better understanding of the present application by illustrating the examples of the present application.
[0028] It should be noted that, in this article, relational terms such as first and second, etc. are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the statement "include..." do not exclude the presence of other identical elements in the process, method, article or device including the elements.
[0029] With the development and popularization of Internet technology, online shopping has become the main way of shopping due to its advantages of extensiveness, convenience and no space restrictions. In the shopping pages of trading platforms, canvas is usually used for painting to realize the motion animation of related virtual controls. However, canvas painting requires writing motion trajectory equations in JS, which requires a relatively large amount of code; canvas compatibility is relatively poor, and some functions are not supported by some browsers; the interactive performance is weak and the reusability is poor, and it needs to be redeveloped for different scenarios.
[0030] In order to solve the problems of the related art, the embodiments of the present application provide a virtual control display method, device, equipment, medium and product.
[0031] The virtual control display method provided in the embodiment of the present application is described in detail below through specific embodiments and application scenarios in conjunction with the accompanying drawings.
[0032] Figure 1 The flowchart of the virtual control display method 100 of the embodiment of the present application is shown. It should be noted that the virtual control display method 100 of the embodiment of the present application is applied to a browser, specifically, the browser includes a product list interface, and the product list interface includes at least a virtual shopping cart control, multiple product information and purchase identifiers corresponding to each product.
[0033] CSS is a computer language used to express the styles of documents such as HTML or XML.
[0034] DOM is used to represent the document object model defined by W3C, and generally represents front-end page elements.
[0035] like Figure 1 As shown, the virtual control display method 100 may specifically include the following steps:
[0036] S101, receiving a first input of a purchase identifier of any one of a plurality of commodities by a user;
[0037] S102: In response to the first input, display a virtual commodity control on the commodity list interface;
[0038] S103, determining a CSS animation file for the movement of the virtual commodity control to the virtual shopping cart control according to a preset motion trajectory type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface;
[0039] S104: Display the virtual commodity animation corresponding to the CSS animation file.
[0040] Therefore, in the product list interface, after clicking the purchase logo corresponding to the target product, the virtual product control is displayed and the CSS code is used to automatically control the virtual product control to perform movement. The virtual product control starts from its initial position, and through pre-set movement parameters, it performs the movement corresponding to the preset movement trajectory type and reaches the end point, that is, the location of the virtual shopping cart control. The CSS language content used is compatible and can run in modern browsers, and can run in the browser without any third-party dependencies; the solution of using CSS to achieve movement has low requirements on hardware device performance; CSS directly acts on the target element (i.e., the virtual product control), with better interactivity and strong code reusability.
[0041] The specific implementation methods of the above steps are introduced below.
[0042] Optionally, the first input in S101 includes a click-to-buy mark, and the entire parabolic motion process may be triggered by a click event.
[0043] In some embodiments, in S102, third position information of a purchase mark of a target commodity is obtained; in response to the first input, a virtual commodity control is created; and according to the third position information, the virtual commodity control is displayed within a preset area of the purchase mark.
[0044] Optionally, the preset motion trajectory type includes a parabola curve. Then, the preset motion trajectory parameters corresponding to the parabola curve include at least: a throwing angle, a throwing height, a preset motion duration, and preset motion speed change curvatures corresponding to the horizontal direction and the vertical direction, respectively.
[0045] In some embodiments, in S103, the product list interface is determined as the animation display area; the horizontal coordinate in the first position information is determined as the horizontal landing point, and the vertical coordinate in the first position information is determined as the vertical landing point; according to the preset motion trajectory parameters, horizontal landing point, vertical landing point and second position information, Bezier curve processing is performed using the cubic-bezier function of CSS animation to obtain CSS animation.
[0046] When implementing it, create animations in two directions (ani-x for horizontal direction and ani-y for vertical direction), set the final landing point in the horizontal direction (taking right:25px; as an example), and set the final landing point in the vertical direction (taking top:50%; as an example).
[0047] Optional, the corresponding code snippets include:
[0048] @keyframes ani-x{
[0049] 100%{right:25px;}
[0050] }
[0051] @keyframes ani-y{
[0052] 100%{top:50%;}
[0053] }
[0054] When implementing it, create a style (taking .ani-item as an example) and set the movement in two directions. After the DOM with class ani-item is created, two animations will be executed simultaneously, one time in the forward direction, which takes one second.
[0055] Optional, the corresponding code snippets include:
[0056] :deep(.ani-item){ / / If the motion DOM is dynamically generated, you need to add: deep()
[0057] position:fixed;
[0058] animation:ani-x 1s 1forwards ease-in-out,
[0059] ani-y 1s forwards 1 cubic-bezier(.3,1.5,.7,1.5); / / Default curve
[0060] / / ani-y 1s forwards 1 cubic-bezier(v-bind(bezierIndex)); / / Dynamic binding curve parameters (taking Vue 3's binding method as an example)
[0061] }
[0062] In this way, based on the Bezier curve, the preset motion speed change curvatures corresponding to the horizontal direction and the vertical direction are set.
[0063] In specific implementation, in response to the first input, that is, when a click event is triggered, a movement target DOM is created and the ani-item class is assigned to it.
[0064] Optional, the corresponding code snippets include:
[0065] function clickHandler(e){
[0066] const[x,y]=[e.clientX,e.clientY] / / Get the trigger position of the click event
[0067] const aniItem = document.createElement('div') / / Create the target DOM
[0068] const innerWidth = window.innerWidth / / Get the page window width
[0069] const innerHeight = window.innerHeight / / window width
[0070] aniItem.setAttribute('class','ani-item') / / Set the class for the motion target
[0071] document.body.appendChild(aniItem) / / Add the sports target to the page
[0072] aniItem.style.cssText+=ˋright:${innerWidth-x}px;top:${y}px;ˋ / / Set the initial position of the moving target
[0073] const diffHeight=y-Math.floor(window.innerHeight*.5) / / Height difference between the beginning and the end
[0074] bezierIndex.value = [ / / Set the parabola
[0075] .3, / / Set the initial angle of the parabola
[0076] (300+diffHeight) / diffHeight, / / Set the height of the parabola
[0077] .7, / / and the first parameter sum to 1
[0078] (300)+diffHeight) / diffHeight / / same as the second parameter ]
[0080] setTimeout(()=>{ / / Remove the motion target after the animation is completed
[0081] document.body.removeChild(aniItem)
[0082] },1000) / / Set the time here to be the same as the animation duration
[0083] }
[0084] Thus, when the purchase mark corresponding to the target product is clicked, a moving target of the virtual product control is created and displayed at the location of the purchase mark or within its preset area. Thus, the click event is mounted on the page to control the virtual product control to move to the virtual shopping cart control (right: 25px; top: 50%) of the target landing point in a parabolic trajectory through CSS, so as to realize the display of the virtual product animation corresponding to the CSS animation file, that is, to execute S104.
[0085] Specifically, the corresponding code snippets include:
[0086] window.addEventListener('click',e=>clickHandler(e))
[0087] In addition, in some embodiments, when the user clicks on the purchase logos corresponding to the multiple product information in sequence, multiple virtual product controls are displayed in sequence on the product list interface and move independently to the virtual shopping cart control in sequence. That is, multiple clicks will cause multiple DOMs to appear and move independently in sequence.
[0088] As an optional embodiment, the drop point position may be bound in the CSS to achieve control of the target drop point position.
[0089] In another embodiment, when the product list interface also includes virtual product controls corresponding to each product, a second input from a user to a virtual product control of any target product among the multiple products is received; in response to the second input, a CSS animation file of the virtual product control moving to the virtual shopping cart control is determined based on a preset motion trajectory type and parameters, the first position information of the virtual shopping cart control in the product list interface, and the second position information of the virtual product control in the product list interface; and the virtual product animation corresponding to the CSS animation file is displayed.
[0090] In this way, after clicking the target DOM (virtual product control), the clicked target DOM can be directly controlled by CSS to move in a curve, so that it moves toward the target landing point in a parabolic trajectory.
[0091] In a specific implementation, the second input includes clicking on a virtual commodity control, and when an event of clicking on the virtual commodity control (target DOM) is triggered, an ani-item is added to the target DOM.
[0092] Optional, the corresponding code snippets include:
[0093] function clickHandler(e){
[0094] const[x,y]=[e.clientX,e.clientY] / / Get the trigger position of the click event
[0095] const aniItem = e.target / / Get the target DOM
[0096] const innerWidth = window.innerWidth / / Get the page window width
[0097] aniItem.classList.add('ani-item') / / Set the class for the sports target
[0098] aniItem.style.cssText+=ˋright:${innerWidth-x}px;top:${y}px;ˋ / / Set the initial position of the moving target
[0099] const diffHeight=y-Math.floor(window.innerHeight*.5) / / Height difference between the beginning and the end
[0100] bezierIndex.value = [ / / Set the parabola
[0101] .3,
[0102] (300+diffHeight) / diffHeight,
[0103] .7,
[0104] (300)+diffHeight) / diffHeight ]
[0106] setTimeout(()=>{ / / Remove the ani-item of the moving target after the animation is completed
[0107] aniItem.classList.remove('ani-item')
[0108] },1000) / / Set the time here to be the same as the animation duration
[0109] }
[0110] Furthermore, the click event is mounted on the page. The corresponding code snippets include:
[0111] DOM.addEventListener('click',e=>clickHandler(e)) / / DOM is the target of movement
[0112] Therefore, the DOM parabolic motion solution based on CSS has strong compatibility, and the CSS language content used can be compatible and run in modern browsers; it has few dependencies, and the combination of HTML+CSS+JS language is very convenient, and it can run in the browser without any third-party dependencies; the solution using CSS to achieve motion has low requirements on hardware device performance; it has strong interactive capabilities, and CSS directly acts on DOM elements, which has a natural advantage in interactivity; and the code is highly reusable.
[0113] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
[0114] Based on the same technical concept, corresponding to any of the above-mentioned embodiment methods, the present application also provides a virtual control display device 200.
[0115] It should be noted that the virtual control display device 200 is applied to a browser, and the browser includes a product list interface, and the product list interface at least includes a virtual shopping cart control, multiple product information and purchase identifiers corresponding to each product.
[0116] like Figure 2 As shown, the virtual control display device 200 includes:
[0117] The receiving module 201 is used to receive a first input of a purchase identification of any one of a plurality of commodities by a user;
[0118] A display module 202, configured to display a virtual commodity control on the commodity list interface in response to the first input;
[0119] A determination module 203 is used to determine a CSS animation file for the movement of the virtual commodity control to the virtual shopping cart control according to a preset motion track type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface;
[0120] The display module 204 is used to display the virtual commodity animation corresponding to the CSS animation file.
[0121] Optionally, the first input includes a click-to-buy logo.
[0122] In some embodiments, the display module 202 is specifically used to obtain the third position information of the purchase mark of the target product; create a virtual product control in response to the first input; and display the virtual product control within a preset area of the purchase mark according to the third position information.
[0123] Optionally, the preset motion trajectory type includes a parabola; the preset motion trajectory parameters corresponding to the parabola include at least: a throwing angle, a throwing height, a preset motion duration, and preset motion speed change curvatures corresponding to the horizontal and vertical directions.
[0124] In some embodiments, the determination module 203 is specifically used to determine the product list interface as the animation display area; determine the horizontal coordinate in the first position information as the horizontal landing point, and determine the vertical coordinate in the first position information as the vertical landing point; according to the preset motion trajectory parameters, horizontal landing point, vertical landing point and second position information, use the cubic-bezier function of CSS animation to perform Bezier curve processing to obtain CSS animation.
[0125] In some embodiments, the display module 204 is specifically configured to control the virtual commodity control to move to the virtual shopping cart control in a parabolic trajectory through CSS.
[0126] In some optional embodiments, when the user clicks on the purchase icons corresponding to the multiple product information in sequence, multiple virtual product controls are displayed in sequence on the product list interface and move independently to the virtual shopping cart control in sequence.
[0127] It should be noted that, for the convenience of description, the above device is described in various modules according to their functions. Of course, when implementing this application, the functions of each module can be implemented in the same or multiple software and / or hardware.
[0128] The device of the above embodiment is used to implement the corresponding virtual control display method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be repeated here.
[0129] Based on the same technical concept, corresponding to any of the above-mentioned embodiment methods, the present application also provides an electronic device.
[0130] Figure 3 A more specific schematic diagram of the hardware structure of an electronic device provided by this embodiment is shown.
[0131] The electronic device 300 may include a processor 301 and a memory 302 storing computer program instructions.
[0132] Specifically, the processor 301 may include a central processing unit (CPU), or an application specific integrated circuit (ASIC), or may be configured to implement one or more integrated circuits of the embodiments of the present application.
[0133] The memory 302 may include a large capacity memory for data or instructions. By way of example and not limitation, the memory 302 may include a hard disk drive (HDD), a floppy disk drive, a flash memory, an optical disk, a magneto-optical disk, a magnetic tape, or a universal serial bus (USB) drive or a combination of two or more of these. In appropriate cases, the memory 302 may include a removable or non-removable (or fixed) medium. In appropriate cases, the memory 302 may be inside or outside the integrated gateway disaster recovery device. In a specific embodiment, the memory 302 is a non-volatile solid-state memory.
[0134] In certain embodiments, the memory may include a read-only memory (ROM), a random access memory (RAM), a magnetic disk storage medium device, an optical storage medium device, a flash memory device, an electrical, optical or other physical / tangible memory storage device. Thus, typically, the memory includes one or more tangible (non-transitory) computer-readable storage media (e.g., a memory device) encoded with software including computer-executable instructions, and when the software is executed (e.g., by one or more processors), it is operable to perform the operations described with reference to the method according to one aspect of the present application.
[0135] The processor 301 implements any one of the virtual control display methods in the above embodiments by reading and executing computer program instructions stored in the memory 302 .
[0136] In some examples, the electronic device 300 may further include a communication interface 303 and a bus 310. Figure 3 As shown, the processor 301, the memory 302, and the communication interface 303 are connected via a bus 310 and communicate with each other.
[0137] The communication interface 303 is mainly used to implement communication between various modules, devices, units and / or equipment in the embodiments of the present application.
[0138] Bus 310 includes hardware, software or both, and the components of online data flow billing equipment are coupled to each other. For example, but not limitation, bus 310 may include accelerated graphics port (AGP) or other graphics bus, enhanced industrial standard architecture (EISA) bus, front-end bus (FSB), hypertransport (HT) interconnection, industrial standard architecture (ISA) bus, infinite bandwidth interconnection, low pin count (LPC) bus, memory bus, micro channel architecture (MCA) bus, peripheral component interconnection (PCI) bus, PCI-Express (PCI-X) bus, serial advanced technology attachment (SATA) bus, video electronics standard association local (VLB) bus or other suitable bus or two or more of these combinations. In appropriate cases, bus 310 may include one or more buses. Although the present application embodiment describes and shows a specific bus, the present application considers any suitable bus or interconnection.
[0139] Exemplarily, the electronic device 300 may be a mobile phone, a tablet computer, a laptop computer, a PDA, an in-vehicle electronic device, an ultra-mobile personal computer (UMPC), a netbook, or a personal digital assistant (PDA).
[0140] Based on the same technical concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium. Computer program instructions are stored on the computer-readable storage medium; when the computer program instructions are executed by the processor, any of the virtual control display methods in the above-mentioned embodiments is implemented. Examples of computer-readable storage media include non-transitory computer-readable storage media, such as portable disks, hard disks, random access memories (RAM), read-only memories (ROM), erasable programmable read-only memories (EPROM or flash memory), portable compact disk read-only memories (CD-ROM), optical storage devices, magnetic storage devices, etc.
[0141] Based on the same technical concept, corresponding to any of the above-mentioned embodiments, the present application also provides a computer program product, which includes computer program instructions. In some embodiments, the computer program instructions can be executed by one or more processors of a computer so that the computer and / or the processor execute the virtual control display method. Corresponding to the execution subject corresponding to each step in each embodiment of the virtual control display method, the processor that executes the corresponding step may belong to the corresponding execution subject.
[0142] It should be clear that the present application is not limited to the specific configuration and processing described above and shown in the figures. For the sake of simplicity, a detailed description of the known method is omitted here. In the above embodiments, several specific steps are described and shown as examples. However, the method process of the present application is not limited to the specific steps described and shown, and those skilled in the art can make various changes, modifications and additions, or change the order between the steps after understanding the spirit of the present application.
[0143] The functional blocks shown in the above-described block diagram can be implemented as hardware, software, firmware or a combination thereof. When implemented in hardware, it can be, for example, an electronic circuit, an application specific integrated circuit (ASIC), appropriate firmware, a plug-in, a function card, etc. When implemented in software, the elements of the present application are programs or code segments that are used to perform the required tasks. The program or code segment can be stored in a machine-readable medium, or transmitted on a transmission medium or a communication link by a data signal carried in a carrier wave. "Machine-readable medium" can include any medium capable of storing or transmitting information. Examples of machine-readable media include electronic circuits, semiconductor memory devices, ROM, flash memory, erasable ROM (EROM), floppy disks, CD-ROMs, optical disks, hard disks, optical fiber media, radio frequency (RF) links, etc. The code segment can be downloaded via a computer network such as the Internet, an intranet, etc.
[0144] It should also be noted that the exemplary embodiments mentioned in this application describe some methods or systems based on a series of steps or devices. However, this application is not limited to the order of the above steps, that is, the steps can be performed in the order mentioned in the embodiment, or in a different order from the embodiment, or several steps can be performed simultaneously.
[0145] The above reference is according to the method of the embodiment of the present application, the flow chart of the device (system) and the computer program product and / or the block diagram described various aspects of the present application.It should be understood that each square box in the flow chart and / or the block diagram and the combination of each square box in the flow chart and / or the block diagram can be realized by computer program instructions.These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer or other programmable data processing device to produce a machine so that these instructions executed by the processor of the computer or other programmable data processing device enable the realization of the function / action specified in one or more square boxes of the flow chart and / or the block diagram.Such a processor can be but is not limited to a general-purpose processor, a special-purpose processor, a special application processor or a field programmable logic circuit.It can also be understood that each square box in the block diagram and / or the flow chart and the combination of the square boxes in the block diagram and / or the flow chart can also be realized by the dedicated hardware that performs the specified function or action, or can be realized by the combination of dedicated hardware and computer instructions.
[0146] The above is only a specific implementation of the present application. Those skilled in the art can clearly understand that for the convenience and simplicity of description, the specific working processes of the systems, modules and units described above can refer to the corresponding processes in the aforementioned method embodiments, and will not be repeated here. It should be understood that the protection scope of the present application is not limited to this. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in this application, and these modifications or replacements should be included in the protection scope of this application.
Claims
1. A virtual control display method, characterized in that: Applied to a browser, the browser includes a product list interface, the product list interface includes at least a virtual shopping cart control, multiple product information and a purchase identifier corresponding to each product; The method comprises: receiving a first input of a purchase identifier of any one of a plurality of commodities by a user; In response to the first input, displaying a virtual commodity control on the commodity list interface; Determine a CSS animation file for the movement of the virtual commodity control to the virtual shopping cart control according to a preset motion track type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface; Display the virtual product animation corresponding to the CSS animation file.
2. The method according to claim 1, characterized in that The first input includes a click-to-buy indicator; The step of displaying a virtual commodity control on the commodity list interface in response to the first input includes: Acquire the third location information of the purchase mark of the target product; In response to the first input, creating a virtual commodity control; The virtual commodity control is displayed within a preset area of the purchase mark according to the third position information.
3. The method according to claim 1, characterized in that The preset motion trajectory type includes a parabola curve; The preset motion trajectory parameters corresponding to the parabola curve include at least: a throwing angle, a throwing height, a preset motion duration, and preset motion speed change curvatures corresponding to the horizontal direction and the vertical direction respectively.
4. The method according to claim 3, characterized in that The step of determining the CSS animation file for the movement of the virtual commodity control to the virtual shopping cart control according to the preset motion trajectory type and parameters, the first position information of the virtual shopping cart control in the commodity list interface, and the second position information of the virtual commodity control in the commodity list interface includes: Determine the product list interface as the animation display area; Determine the abscissa in the first position information as the horizontal landing point, and determine the ordinate in the first position information as the vertical landing point; According to the preset motion trajectory parameters, the horizontal landing point, the vertical landing point and the second position information, Bezier curve processing is performed using the cubic-bezier function of the CSS animation to obtain the CSS animation.
5. The method according to claim 4, characterized in that The displaying of the virtual product animation corresponding to the CSS animation file includes: The virtual commodity control is controlled by CSS to move to the virtual shopping cart control in a parabolic trajectory.
6. The method according to claim 2, characterized in that The method further comprises: When the user clicks on the purchase logos corresponding to the plurality of commodity information in sequence, a plurality of virtual commodity controls are displayed in sequence on the commodity list interface and independently move to the virtual shopping cart control in sequence.
7. A virtual control display device, characterized in that: Applied to a browser, the browser includes a product list interface, the product list interface includes at least a virtual shopping cart control, multiple product information and a purchase identifier corresponding to each product; The device comprises: A receiving module, used for receiving a first input of a purchase identification of any target commodity among a plurality of commodities by a user; A display module, configured to display a virtual commodity control on the commodity list interface in response to the first input; a determination module, configured to determine a CSS animation file for moving the virtual commodity control to the virtual shopping cart control according to a preset motion trajectory type and parameters, first position information of the virtual shopping cart control in the commodity list interface, and second position information of the virtual commodity control in the commodity list interface; The display module is used to display the virtual product animation corresponding to the CSS animation file.
8. An electronic device, characterized in that: The device comprises: a processor and a memory storing computer program instructions; when the processor calls the computer program instructions, the virtual control display method as described in any one of claims 1-6 is implemented.
9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer program instructions, and when the computer program instructions are called by the processor, the virtual control display method according to any one of claims 1 to 6 is implemented.
10. A computer program product, characterized in that When the instructions in the computer program product are executed by a processor of an electronic device, the electronic device executes the virtual control display method as described in any one of claims 1-6.