Method and device for realizing shopping cart animation based on Vue

Abstract

The invention discloses a method and device for achieving shopping cart animation based on Vue, and relates to the technical field of computers.The method comprises the steps that a shopping cart animation assembly is packaged based on a Vue framework, control parameters of the shopping cart animation assembly are configured according to different user requirements, and when any animation triggering condition is met, the control parameters of the shopping cart animation assembly are set; and the configured shopping cart animation component constructs the motion path of the animation element corresponding to the animation according to the slow motion function and the animation duration, and controls the corresponding animation element to move along the respective motion path, so that the purpose of customizing the shopping cart animation according to the requirements of different users is achieved. Only the control parameters need to be changed and the shopping cart animation component does not need to be reconstructed when the shopping cart animation is self-defined, so that the development efficiency is greatly improved.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method and device for implementing a shopping cart animation based on Vue. Background Art

[0002] With the rapid development of the Internet, online shopping has penetrated into every aspect of people's daily life. In recent years, with the continuous emergence of online shopping platforms, competition has become increasingly fierce. In many scenarios, shopping cart animations are needed to enhance users' shopping experience.

[0003] In the related art, two methods are generally used to implement shopping cart animation. The first is to use JavaScript combined with a specific animation algorithm to implement shopping cart animation. This method can directly process the animation logic on the client, but the complexity of implementing shopping cart animation is high and the development efficiency is low. The second is to combine CSS (Cascading Style Sheets) and JavaScript to implement shopping cart animation. This method mainly uses the CSS animation library to achieve the shopping cart animation effect, combined with JavaScript to control the triggering and interaction of the shopping cart animation, but compared to relying on the fixed templates provided by the CSS animation library, it is difficult to customize the shopping cart animation according to the needs of different users. Summary of the invention

[0004] The present application provides a method and device for implementing shopping cart animation based on Vue, which can customize shopping cart animation according to the needs of different users and improve development efficiency.

[0005] In a first aspect, an embodiment of the present application provides a method for implementing a shopping cart animation based on Vue, the method comprising:

[0006] Encapsulate shopping cart animation components based on Vue framework;

[0007] According to user needs, configure control parameters of the shopping cart animation component; the control parameters include animation duration, easing function and at least one animation element;

[0008] Initialize the configured shopping cart animation component and set the triggering conditions for each animation;

[0009] When the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation element to move along its own motion path.

[0010] In combination with the first aspect, in one implementation, configuring the control parameters of the shopping cart animation component according to user needs includes:

[0011] The shopping cart animation component includes a configuration interface for various control parameters;

[0012] According to user needs, obtain the required values ​​of each control parameter;

[0013] The required values ​​of each control parameter are respectively passed into the configuration interface corresponding to each control parameter.

[0014] In combination with the first aspect, in one implementation, after obtaining the required value of each control parameter according to user requirements, the method further includes:

[0015] If any required value is not within the preset value range, it will be prompted that the required value is invalid and the valid value range will be displayed.

[0016] In combination with the first aspect, in one implementation, when the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, including:

[0017] The configured shopping cart animation component includes the shopping cart icon element and the interfaces corresponding to each trigger condition;

[0018] When the triggering condition of any animation is met, the configured shopping cart animation component obtains the document element through the interface corresponding to the triggering condition of the animation, reads the position of the document element as the starting point coordinate, and reads the position of the shopping cart icon element as the end point coordinate;

[0019] A motion path of a corresponding animation element is constructed according to the easing function, the animation duration, the starting point coordinates and the end point coordinates.

[0020] In combination with the first aspect, in one implementation, after constructing the motion path of the corresponding animation element, the method further includes:

[0021] If the motion path is blocked by a document element, the motion path is reconstructed according to the position of the blocked document element.

[0022] In combination with the first aspect, in one implementation, the triggering condition of the animation is that the user triggers a click event bound to a document element, and after the click event is triggered, the corresponding interface of the configured shopping cart animation component is called.

[0023] In combination with the first aspect, in one implementation, when the screen size of the device used by the user changes, the method further includes:

[0024] Adjust the size of each animated element based on the scaling factor of the changed screen size.

[0025] In combination with the first aspect, in one implementation, the control parameter further includes:

[0026] The number of animation elements and their hierarchy in the document.

[0027] In a second aspect, an embodiment of the present application provides a device for implementing a shopping cart animation based on Vue, characterized in that the device comprises:

[0028] Encapsulation module, used to encapsulate shopping cart animation components based on Vue framework;

[0029] A configuration module, used to configure the control parameters of the shopping cart animation component according to user needs;

[0030] The initialization module is used to initialize the configured shopping cart animation components and set the triggering conditions of each animation;

[0031] The control module is used for, when the triggering condition of any animation is met, the configured shopping cart animation component constructs the motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation element to move along its respective motion path.

[0032] In conjunction with the second aspect, in one implementation, the control module includes:

[0033] A starting point coordinate reading unit, used to read the starting point coordinates of the motion path of the animation element;

[0034] The end point coordinate reading unit is used to read the end point coordinates of the motion path of the animation element.

[0035] The beneficial effects brought by the technical solution provided in the embodiments of the present application include:

[0036] The shopping cart animation component is encapsulated based on the Vue framework, and the control parameters of the shopping cart animation component are configured according to different user needs. When any animation triggering condition is met, the configured shopping cart animation component constructs the motion path of the animation element corresponding to the animation according to the easing function and animation duration, and controls the corresponding animation elements to move along their respective motion paths, so as to achieve the purpose of customizing the shopping cart animation according to the needs of different users. Since only the control parameters need to be changed when customizing the shopping cart animation without rebuilding the shopping cart animation component, the development efficiency is greatly improved. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] Figure 1 This is a flowchart of a method for implementing a shopping cart animation based on Vue in an embodiment of the present application;

[0038] Figure 2 This is a schematic diagram of the structure of a device for implementing a shopping cart animation based on Vue in an embodiment of the present application. DETAILED DESCRIPTION

[0039] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0040] First, some technical terms in the present application are explained to facilitate those skilled in the art to understand the present application.

[0041] Vue: Vue is a popular front-end JavaScript framework for building user interfaces and single-page applications. Its core goal is to achieve responsive data binding and componentized view organization through the simplest API (Application Programming Interface).

[0042] Transition component: The transition component is a built-in component provided by Vue for implementing transition effects and animations in Vue applications. It can easily apply CSS transitions and animations when elements are inserted or removed. The transition component implements transition effects by automatically applying class names when elements enter and leave, allowing developers to simply define the animation effects when elements enter and leave.

[0043] CSS transition property: The CSS transition property allows an element to change smoothly from one style state to another. This change is usually completed over a period of time rather than taking effect immediately. CSS transition can be applied to most CSS properties, including but not limited to color, size, position, etc.

[0044] Slot: A placeholder provided by a child component to a parent component. The parent component can fill this placeholder with any template code, such as HTML (HyperText Markup Language) and components. The filled content will replace the slot tag of the child component.

[0045] In order to make the objectives, technical solutions and advantages of the present application clearer, the implementation methods of the present application will be further described in detail below with reference to the accompanying drawings.

[0046] First, please refer to Figure 1 , Figure 1 This is a flow chart of a method for implementing a shopping cart animation based on Vue in an embodiment of the present application. The method for implementing a shopping cart animation based on Vue provided in this embodiment includes the following steps:

[0047] Step S1: Encapsulate the shopping cart animation component based on the Vue framework.

[0048] Step S2: According to user needs, configure control parameters of the shopping cart animation component, the control parameters including animation duration, easing function and at least one animation element.

[0049] Step S3: Initialize the configured shopping cart animation component and set the triggering conditions of each animation.

[0050] Step S4: When the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation element to move along its own motion path.

[0051] This method encapsulates the shopping cart animation component based on the Vue framework, and configures the control parameters of the shopping cart animation component according to different user needs. When any animation triggering condition is met, the configured shopping cart animation component constructs the motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation elements to move along their respective motion paths, so as to achieve the purpose of customizing the shopping cart animation according to the needs of different users. Since only the control parameters need to be changed when customizing the shopping cart animation without rebuilding the shopping cart animation component, the development efficiency is greatly improved.

[0052] In some embodiments, in the above step S2, the control parameters further include the number of animation elements and the level of each animation element in the document.

[0053] In a more specific embodiment, the control parameters of the method are:

[0054] The number of animation elements ballNums, the default value is 1; the level zIndex of the animation element in the document, the default value is 9999; the animation duration duration, the default value is 1000 milliseconds; the easing function easing, the default value is cubic-bezier (0.49, -0.35, 0.75, 0.41); the animation element slot v-slot:icon, used to display the text content or other elements in the animation element; the shopping cart icon slot v-slot:default, used to display the shopping cart icon.

[0055] It should be noted that by defining the content and style of the shopping cart icon and animation element through the animation element slot and the shopping cart icon slot, it is possible to avoid modifying the code of the shopping cart animation component when replacing the animation element or the shopping cart icon, thereby increasing the flexibility and reusability of the shopping cart animation component.

[0056] In some embodiments, the easing function may also be set to other preset values ​​to meet different animation requirements. These preset values ​​include but are not limited to linear, ease, ease-in, ease-out, and ease-in-out.

[0057] When the easing function is set to linear, the animation speed remains unchanged; when the easing function is set to ease, the animation starts slowly, speeds up rapidly when it reaches the preset time point, and then slows down again; when the easing function is set to ease-in, the animation starts slowly and then gradually speeds up; when the easing function is set to ease-out, the animation starts quickly and then gradually slows down; when the easing function is set to ease-in-out, the animation starts slowly, speeds up evenly when it reaches the preset time point, and then slows down again.

[0058] In some embodiments, in the above step S2, the control parameters of the shopping cart animation component are configured according to user needs, and the specific steps are as follows:

[0059] According to user requirements, the required values ​​of each control parameter are obtained, and the required values ​​of each control parameter are respectively transmitted to the configuration interface corresponding to each control parameter. The above-mentioned shopping cart animation component includes the configuration interface of each control parameter.

[0060] It should be noted that developers can adjust the shopping cart animation effect by adjusting the control parameters of the shopping cart animation component without modifying the internal code of the shopping cart animation component. When the shopping cart animation effect needs to be adjusted frequently, the development efficiency can be greatly improved.

[0061] In some embodiments, after obtaining the required values ​​of each control parameter according to user requirements, the following steps are also included:

[0062] If any required value is not within the preset value range, it will be prompted that the required value is invalid and the valid value range will be displayed.

[0063] Specifically, when the required values ​​of each control parameter are input according to user requirements, the shopping cart animation component will first check whether these required values ​​are within the preset value range. This step can be achieved by writing corresponding validation logic statements, which will check each required value one by one and compare it with the preset value range. If any required value is found not within the preset value range, the shopping cart animation component will immediately trigger a prompt to inform the developer that the required value is invalid and display the valid value range. This prompt can be a text message, a pop-up prompt, a color highlight or other forms of visual or auditory feedback.

[0064] In some embodiments, in the above step S3, initializing the configured shopping cart animation component specifically includes the following steps:

[0065] S31: Call the _appendToBody method in the mounted life cycle of Vue to add the animation elements in the configured shopping cart animation component to the document.body document. When calling the _appendToBody method, you need to pass in the control parameters ballNums, zIndex, duration, easing, and v-slot:icon.

[0066] S32: After the configured shopping cart animation component is initialized, the _appendToBody method returns the instance of each animation element in the configured shopping cart animation component, and then adds each instance to the document.body document through DOM (Document Object Model) operation.

[0067] In some embodiments, in the above step S4, when the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, including the following steps:

[0068] S41: When the triggering condition of any animation is met, the configured shopping cart animation component obtains the document element through the interface corresponding to the triggering condition of the animation, reads the position of the document element as the starting point coordinate, and reads the position of the shopping cart icon element as the end point coordinate.

[0069] S42: constructing a motion path of a corresponding animation element according to the easing function, the animation duration, the starting point coordinates and the end point coordinates.

[0070] It should be noted that the configured shopping cart animation component includes a shopping cart icon element and interfaces corresponding to each trigger condition.

[0071] Specifically, in the above step S41, the position of the document element is read as the starting point coordinates through the getBoundingClientRect method, and the position of the shopping cart icon element is read as the end point coordinates.

[0072] In some embodiments, in the above step S41, the triggering condition of the animation is that the user triggers a click event bound to the document element, and after the click event is triggered, the corresponding interface of the configured shopping cart animation component is called.

[0073] In some embodiments, the triggering conditions of the animation may also be: mouse hovering, page scrolling, or shaking the phone. Mouse hovering means that when the user hovers the mouse pointer over a document element (such as a product image or button), the shopping cart animation is triggered; page scrolling means that when the user scrolls the page to a specific position, the shopping cart animation is triggered; and shaking the phone means that when the user shakes the phone, the shopping cart animation is triggered.

[0074] In some embodiments, after constructing the motion path of the corresponding animation element, the method further includes:

[0075] If the motion path is blocked by a document element, the motion path is reconstructed according to the position of the blocked document element.

[0076] It should be noted that if the motion path of the animation element is blocked by other document elements, the user may not be able to clearly see the animation effect. By reconstructing the motion path, it can ensure that the animation effect is always within the user's visible range, improving the user experience.

[0077] In some embodiments, in the above step S42, after constructing the motion path of the corresponding animation element, the CSS properties and transition components are combined to realize the animation effect of the shopping cart. The CSS properties used include transition and transform.

[0078] In some embodiments, when the screen size of the device used by the user changes, the method further includes:

[0079] Adjust the size of each animated element based on the scaling factor of the changed screen size.

[0080] It should be noted that by adjusting the size of the animation elements, you can ensure that the shopping cart animation maintains consistent animation effects and user experience on different devices and browsers.

[0081] Second, please refer to Figure 2 , Figure 2 The schematic diagram of the structure of the device for implementing the shopping cart animation based on Vue in the embodiment of the present application is as follows. The device for implementing the shopping cart animation based on Vue provided in the embodiment includes an encapsulation module, a configuration module, an initialization module and a control module.

[0082] Encapsulation module, used to encapsulate shopping cart animation components based on Vue framework.

[0083] The configuration module is used to configure the control parameters of the shopping cart animation component according to user needs.

[0084] The initialization module is used to initialize the configured shopping cart animation components and set the triggering conditions for each animation.

[0085] The control module is used to construct the motion path of the animation element corresponding to the animation according to the easing function and the animation duration when the triggering condition of any animation is met, and control the corresponding animation element to move along its own motion path.

[0086] The device encapsulates the shopping cart animation component through the encapsulation module, configures the control parameters of the shopping cart animation component according to different user needs through the configuration module, initializes the configured shopping cart animation component through the initialization module, and sets the trigger conditions of each animation. When the trigger condition of any animation is met, the control module controls the configured shopping cart animation component to construct the motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation elements to move along their respective motion paths, so as to achieve the purpose of customizing the shopping cart animation according to the needs of different users. Since only the control parameters need to be changed when customizing the shopping cart animation without rebuilding the shopping cart animation component, the development efficiency is greatly improved.

[0087] In some embodiments, the control module includes a start point coordinate reading unit and an end point coordinate reading unit.

[0088] The starting point coordinate reading unit is used to read the starting point coordinates of the motion path of the animation element.

[0089] The end point coordinate reading unit is used to read the end point coordinates of the motion path of the animation element.

[0090] It should be noted that the serial numbers of the above-mentioned embodiments of the present application are only for description and do not represent the advantages or disadvantages of the embodiments.

[0091] The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices. The terms "first", "second" and "third" are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit "first", "second" and "third" to different types.

[0092] In the description of the embodiments of the present application, "exemplary", "for example" or "for example" are used to indicate examples, illustrations or descriptions. Any embodiment or design described as "exemplary", "for example" or "for example" in the embodiments of the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example" or "for example" is intended to present related concepts in a specific way.

[0093] In the description of the embodiments of the present application, unless otherwise specified, “ / ” means or, for example, A / B can mean A or B; the “and / or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, “multiple” refers to two or more than two.

[0094] In some processes described in the embodiments of the present application, multiple operations or steps that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present application or in parallel, and the sequence number of the operation is only used to distinguish the different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed in sequence or in parallel, and these operations or steps may be combined.

[0095] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application is essentially or the part that contributes to the prior art can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, disk, CD) as described above, and includes a number of instructions for a terminal device to execute the methods described in each embodiment of the present application.

[0096] The above are only preferred embodiments of the present application, and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A method for implementing shopping cart animation based on Vue, characterized in that: The method comprises: Encapsulate shopping cart animation components based on Vue framework; According to user needs, configure control parameters of the shopping cart animation component; the control parameters include animation duration, easing function and at least one animation element; Initialize the configured shopping cart animation component and set the triggering conditions for each animation; When the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation element to move along its own motion path.

2. The method for implementing shopping cart animation based on Vue as claimed in claim 1, characterized in that: The control parameters of the shopping cart animation component are configured according to user needs, including: The shopping cart animation component includes a configuration interface for various control parameters; According to user needs, obtain the required values ​​of each control parameter; The required values ​​of each control parameter are respectively passed into the configuration interface corresponding to each control parameter.

3. The method for implementing shopping cart animation based on Vue as claimed in claim 2, characterized in that: According to user needs, after obtaining the required values ​​of each control parameter, it also includes: If any required value is not within the preset value range, it will be prompted that the required value is invalid and the valid value range will be displayed.

4. The method for implementing shopping cart animation based on Vue as claimed in claim 1, characterized in that: When the triggering condition of any animation is met, the configured shopping cart animation component constructs a motion path of the animation element corresponding to the animation according to the easing function and the animation duration, including: The configured shopping cart animation component includes the shopping cart icon element and the interfaces corresponding to each trigger condition; When the triggering condition of any animation is met, the configured shopping cart animation component obtains the document element through the interface corresponding to the triggering condition of the animation, reads the position of the document element as the starting point coordinate, and reads the position of the shopping cart icon element as the end point coordinate; A motion path of a corresponding animation element is constructed according to the easing function, the animation duration, the starting point coordinates and the end point coordinates.

5. The method for implementing shopping cart animation based on Vue as claimed in claim 4, characterized in that: After constructing the motion path of the corresponding animation element, it also includes: If the motion path is blocked by a document element, the motion path is reconstructed according to the position of the blocked document element.

6. The method for implementing shopping cart animation based on Vue as claimed in claim 4, characterized in that: The triggering condition of the animation is that the user triggers a click event bound to a document element. After the click event is triggered, the corresponding interface of the configured shopping cart animation component is called.

7. The method for implementing shopping cart animation based on Vue as claimed in claim 1, characterized in that: When the screen size of the device used by the user changes, it also includes: Adjust the size of each animated element based on the scaling factor of the changed screen size.

8. The method for implementing shopping cart animation based on Vue as claimed in claim 1, characterized in that: The control parameters also include: The number of animation elements and their hierarchy in the document.

9. A device for implementing shopping cart animation based on Vue based on the method according to any one of claims 1 to 8, characterized in that: The device comprises: Encapsulation module, used to encapsulate shopping cart animation components based on Vue framework; A configuration module, used to configure the control parameters of the shopping cart animation component according to user needs; The initialization module is used to initialize the configured shopping cart animation components and set the triggering conditions of each animation; The control module is used for, when the triggering condition of any animation is met, the configured shopping cart animation component constructs the motion path of the animation element corresponding to the animation according to the easing function and the animation duration, and controls the corresponding animation element to move along its respective motion path.

10. The device for implementing shopping cart animation based on Vue as claimed in claim 9, characterized in that: The control module comprises: A starting point coordinate reading unit, used to read the starting point coordinates of the motion path of the animation element; The end point coordinate reading unit is used to read the end point coordinates of the motion path of the animation element.

Images