CN117472482A

CN117472482A - Interface switching display method and electronic equipment

Info

Publication number: CN117472482A
Application number: CN202210867784.2A
Authority: CN
Inventors: 卞超
Original assignee: Huawei Technologies Co Ltd
Current assignee: Huawei Technologies Co Ltd
Priority date: 2022-07-22
Filing date: 2022-07-22
Publication date: 2024-01-30
Also published as: WO2024017183A1

Abstract

The application provides a display method for interface switching, which comprises the following steps: the electronic equipment displays a first interface, wherein the first interface comprises M interface elements, and M is more than or equal to 1 and is an integer; the electronic equipment detects operation of switching a second interface by a user, wherein the second interface comprises N interface elements, and N is more than or equal to 1 and is an integer; the electronic equipment responds to the operation, and a first linkage switching animation effect is determined according to M interface elements and N interface elements; and the electronic equipment switches the first interface to the second interface according to the first linkage switching animation effect. Through the method and the device, when the electronic equipment switches the interface, a plurality of interface elements in the interface and the interfaces before and after switching can be combined, the animation effect of linkage is realized, the animation effect accords with the natural rule, the user experience and the user's look and feel are improved, and the user's operation is more similar to the real world experience.

Description

Interface switching display method and electronic equipment

Technical Field

The present disclosure relates to the field of electronic devices, and more particularly, to a display method for interface switching and an electronic device.

Background

As technology advances, various types of electronic devices are configured with various types of screens, wherein the display effect of various interface elements in an interface is an important factor affecting the user experience. At present, the interface switching effect is fixed when the interface is switched, the effect is very single, and the user lacks real feeling.

Disclosure of Invention

The embodiment of the application provides a display method for interface switching and electronic equipment, so that when the electronic equipment switches interfaces, a plurality of interface elements in the interfaces can be combined and the interfaces before and after switching are combined, and the animation effect of linkage is realized.

In a first aspect, a display method for interface switching is provided, which is characterized in that the method includes: the electronic equipment displays a first interface, wherein the first interface comprises M interface elements, and M is more than or equal to 1 and is an integer; the electronic equipment detects operation of switching a second interface by a user, wherein the second interface comprises N interface elements, and N is more than or equal to 1 and is an integer; the electronic equipment responds to the operation, and a first linkage switching animation effect is determined according to the M interface elements and the N interface elements; the electronic equipment switches the first interface to the second interface according to the first linkage switching animation effect.

In the embodiment of the application, when the electronic equipment switches the interfaces, a plurality of interface elements in the interfaces can be combined with the interfaces before and after switching, so that the combined animation effect is realized, the animation effect accords with the natural rule, the user experience and the user's look and feel are improved, and the user operation is more similar to the real world experience.

With reference to the first aspect, in some implementations of the first aspect, in response to the operation, the electronic device determines a first coordinated switching animation effect according to the M interface elements and the N interface elements, including: the electronic equipment determines a first main interface element and the position of the first main interface element according to the M interface elements; the electronic equipment determines a second main interface element, the position of the second main interface element and N-1 secondary interface elements according to the N interface elements; the electronic equipment determines the animation effect of the second main interface element according to the position of the first main interface element and the position of the second main interface element; the electronic device determines an animation effect of each of the N-1 secondary interface elements according to the second primary interface element and each of the N-1 secondary interface elements.

With reference to the first aspect, in certain implementation manners of the first aspect, the determining, by the electronic device, an animation effect of each of the N-1 secondary interface elements according to the second primary interface element and each of the N-1 secondary interface elements includes: the electronic device determines an animation effect of each secondary interface element according to a first interface switching parameter, wherein the first interface switching parameter comprises at least one of the following: the size of the second main interface element, the size of each secondary interface element, the distance between the second main interface element and each secondary interface element, the limiting parameter of each secondary interface element, and the animation effect of the second main interface element.

With reference to the first aspect, in certain implementation manners of the first aspect, the determining, by the electronic device, a first main interface element and a position of the first main interface element according to the M interface elements includes: the electronic equipment determines the first main interface element and the position of the first main interface element according to the visual center of the first interface; the electronic device determining a second main interface element and a position of the second main interface element according to the N interface elements, including: the electronic device determines the second main interface element and the position of the second main interface element according to the visual center of the second interface.

With reference to the first aspect, in certain implementations of the first aspect, the animation effect of each secondary interface element includes a movement track of the each secondary interface element and/or a movement speed of the each secondary interface element, wherein the movement track of the each secondary interface element is curved.

With reference to the first aspect, in certain implementation manners of the first aspect, the determining, by the electronic device, an animation effect of a second main interface element according to a position of the first main interface element and a position of the second main interface element includes: the electronic equipment determines the moving track of the second main interface element and the moving speed of the second main interface according to the position of the first main interface element and the position of the second main interface element.

With reference to the first aspect, in certain implementations of the first aspect, the method further includes: the electronic equipment determines M-1 secondary interface elements according to the M interface elements; the electronic device determines an animation effect of each of the N-1 secondary interface elements according to the second primary interface element and each of the N-1 secondary interface elements, including: the electronic device determines the animation effect of each secondary interface element in the N-1 secondary interface elements according to the second main interface element, each secondary interface element in the N-1 secondary interface elements and each secondary interface element in the M-1 secondary interface elements.

With reference to the first aspect, in some implementations of the first aspect, in response to the operation, the electronic device determines a first coordinated switching animation effect according to the M interface elements and the N interface elements, including: the electronic equipment divides the M interface elements and the N interface elements into L types of interface elements, wherein L is more than or equal to 1 and is an integer; the electronic device determining a position of each type of interface element of the L types of interface elements at the first interface and the second interface; the electronic device determining a first set of locations in the second interface, the first set of locations including any one or more locations in the second interface; the electronic device determines animation effects of the N interface elements according to the first position set, the position of each type of interface element on the first interface and the position of each type of interface element on the second interface.

With reference to the first aspect, in some implementations of the first aspect, the one or more positions included in the first set of positions are positions corresponding to one or more interface elements of the N interface elements at the second interface.

With reference to the first aspect, in some implementations of the first aspect, the determining, by the electronic device, an animation effect of the N interface elements according to the first position set, the position of each type of interface element at the first interface, and the position of each type of interface element at the second interface includes: the electronic device determines animation effects of the N interface elements according to a second interface switching parameter, wherein the second interface switching parameter comprises at least one of the following: the size of the one or more interface elements, the size of each type of interface element, the distance between one or more locations in the first set of locations and each type of interface element, the constraint parameter of each type of interface element, the animation effect of the first interface element.

With reference to the first aspect, in certain implementation manners of the first aspect, the electronic device divides the M interface elements and the N interface elements into L types of interface elements, including: the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the similarity.

With reference to the first aspect, in certain implementations of the first aspect, the similarity includes a color similarity, a size similarity, a shape similarity.

With reference to the first aspect, in certain implementation manners of the first aspect, the electronic device divides the M interface elements and the N interface elements into L types of interface elements, including: the electronic equipment determines the positions of the M interface elements on the first interface and the positions of the N interface elements on the second interface; the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the positions of the M interface elements on the first interface and the positions of the N interface elements on the second interface.

With reference to the first aspect, in certain implementation manners of the first aspect, the electronic device divides the M interface elements and the N interface elements into L types of interface elements, including: the electronic device determines labels of the M interface elements and the N interface elements; the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the labels of the M interface elements and the N interface elements.

With reference to the first aspect, in certain implementations of the first aspect, the displacement time curves of the N interface elements are bezier curves or elastic force curves.

With reference to the first aspect, in certain implementations of the first aspect, the method is implemented by at least one of an AAR format file, a JAR format file, or a system interface of the electronic device.

With reference to the first aspect, in certain implementations of the first aspect, the method further includes: if the type of the electronic equipment is detected to be changed from the first type to the second type, switching the first linkage switching effect to a second linkage switching effect; the electronic device switching the first interface to the second interface according to the first linkage switching animation effect, including: and the electronic equipment switches the first interface to the second interface according to the second linkage switching animation effect.

A second aspect is an electronic device according to an embodiment of the present application, where the electronic device includes a module/unit that performs the method of the above aspect or any one of the possible designs of the above aspect; these modules/units may be implemented by hardware, or may be implemented by hardware executing corresponding software.

In a third aspect, a chip of an embodiment of the present application is coupled to a memory in an electronic device, and configured to invoke a computer program stored in the memory and execute the foregoing aspects of the embodiment of the present application and any possible technical solutions of the foregoing aspects; "coupled" in embodiments of the present application means that the two components are directly or indirectly joined to each other.

In a fourth aspect, a computer readable storage medium according to an embodiment of the present application includes a computer program, where the computer program when executed on an electronic device causes the electronic device to perform the above aspect and any possible technical solution of the above aspect.

In a fifth aspect, a computer program according to an embodiment of the present application includes instructions that when executed on a computer, cause the computer to perform the above aspects and any possible technical solutions of the above aspects.

In a sixth aspect, the present application provides a graphical user interface on an electronic device with a display, one or more memories, and one or more processors configured to execute one or more computer programs stored in the one or more memories, where the graphical user interface includes a graphical user interface displayed when the electronic device performs any of the above aspects and possible technical solutions of any of the above aspects.

In a seventh aspect, an electronic device according to an embodiment of the present application includes one or more processors; one or more memories; the one or more memories store one or more computer programs comprising instructions that, when executed by the one or more processors, cause the electronic device to perform aspects as described above and any of the possible designs of the aspects described above.

The advantages of the second to seventh aspects are referred to above, and the description thereof is not repeated.

Drawings

Fig. 1 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Fig. 2 is a software architecture block diagram of an example electronic device according to an embodiment of the present application.

FIG. 3 is a schematic diagram of the direction of "attraction" when an interface element of an embodiment of the present application is affected by "attraction".

FIG. 4 is a schematic diagram of movement of an interface element affected by "attraction" as provided by an embodiment of the present application.

FIG. 5 is a schematic diagram of dividing interface elements into primary and secondary interface elements provided by an embodiment of the present application.

FIG. 6 is a schematic diagram of types of interface elements according to their locations in an interface provided by an embodiment of the present application.

Fig. 7 is a schematic diagram of types of interface elements according to labels of the interface elements provided in an embodiment of the present application.

Fig. 8 is a schematic diagram of an animation effect at the time of interface switching according to an embodiment of the present application.

Fig. 9 is a schematic diagram of an animation effect at the time of interface switching according to an embodiment of the present application.

FIG. 10 is a schematic diagram of determining a distance between interface elements provided by an embodiment of the present application.

FIG. 11 is a schematic diagram of an animation effect when interface switching of interface elements with different distances according to an embodiment of the present application.

Fig. 12 is a schematic diagram of animation effects when interface switching of interface elements with different sizes according to an embodiment of the present application.

Fig. 13 is a schematic diagram of a displacement time curve provided in an embodiment of the present application.

Fig. 14 is a schematic diagram of an animation effect at the time of interface switching according to an embodiment of the present application.

Fig. 15 is a schematic diagram of an animation effect at the time of interface switching according to an embodiment of the present application.

Fig. 16 is a schematic diagram of an interface switching mode provided in an embodiment of the present application.

Fig. 17 is a schematic diagram of another interface switching form provided in an embodiment of the present application.

Fig. 18 is a schematic diagram of another interface switching form provided in an embodiment of the present application.

FIG. 19 is a set of GUIs provided in an embodiment of the present application.

FIG. 20 is a set of GUIs provided in an embodiment of the present application.

FIG. 21 is a set of GUIs provided in an embodiment of the present application.

FIG. 22 is a set of GUIs provided in an embodiment of the present application.

Fig. 23 is a schematic diagram of an animation process and associated control logic for an animation effect of interface switching in an embodiment of the present application.

Fig. 24 is a schematic diagram of a displacement time curve provided in an embodiment of the present application.

Fig. 25 is a schematic diagram of a relationship between an interface switching frame and an application side associated with an animation effect of interface switching in the embodiment of the present application.

FIG. 26 is a schematic diagram of a system framework for implementing animation effect capabilities or functions of an embodiment of the present application.

FIG. 27 is a schematic diagram of a specific illustration of three ways of animation effect capability or function implementation of interface switching in an embodiment of the present application.

Fig. 28 is a schematic flowchart of a display method of interface switching provided in an embodiment of the present application.

Detailed Description

The terminology used in the following embodiments is for the purpose of describing particular embodiments only and is not intended to be limiting of the application. As used in the specification and the appended claims, the singular forms "a," "an," "the," and "the" are intended to include, for example, "one or more" such forms of expression, unless the context clearly indicates to the contrary. It should also be understood that in the various embodiments herein below, "at least one", "one or more" means one, two or more than two. The term "and/or" is used to describe an association relationship of associated objects, meaning that there may be three relationships; for example, a and/or B may represent: a alone, a and B together, and B alone, wherein A, B may be singular or plural. The character "/" generally indicates that the context-dependent object is an "or" relationship.

Reference in the specification to "one embodiment" or "some embodiments" or the like means that a particular feature, structure, or characteristic described in connection with the embodiment is included in one or more embodiments of the application. Thus, appearances of the phrases "in one embodiment," "in some embodiments," "in other embodiments," and the like in the specification are not necessarily all referring to the same embodiment, but mean "one or more but not all embodiments" unless expressly specified otherwise. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless expressly specified otherwise.

Embodiments of an electronic device, a user interface for such an electronic device, and for using such an electronic device are described below. In some embodiments, the electronic device may be a portable electronic device such as a cell phone, tablet computer, wearable electronic device (e.g., smart watch) with wireless communication capabilities, etc., that also includes other functionality such as personal digital assistant and/or music player functionality. Portable electronic device Exemplary embodiments of the device include, but are not limited to, piggybacking Or other operating system. The portable electronic device may also be other portable electronic devices such as a Laptop computer (Laptop) or the like. It should also be appreciated that in other embodiments, the electronic device described above may not be a portable electronic device, but rather a desktop computer.

By way of example, fig. 1 shows a schematic diagram of an electronic device 100. The electronic device 100 may include a processor 110, an external memory interface 120, an internal memory 121, a universal serial bus (universal serial bus, USB) interface 130, a charge management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a compass 190, a motor 191, an indicator 192, a camera 193, a display 194, and a subscriber identity module (subscriber identification module, SIM) card interface 195, etc.

It is to be understood that the structure illustrated in the embodiments of the present application does not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, electronic device 100 may include more or fewer components than shown, or certain components may be combined, or certain components may be split, or different arrangements of components. The illustrated components may be implemented in hardware, software, or a combination of software and hardware.

The processor 110 may include one or more processing units, such as: the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processor (graphics processing unit, GPU), an image signal processor (image signal processor, ISP), a controller, a video codec, a digital signal processor (digital signal processor, DSP), a baseband processor, and/or a neural network processor (neural-network processing unit, NPU), etc. Wherein the different processing units may be separate components or may be integrated in one or more processors. In some embodiments, the electronic device 100 may also include one or more processors 110. The controller can generate operation control signals according to the instruction operation codes and the time sequence signals to finish the control of instruction fetching and instruction execution. In other embodiments, memory may also be provided in the processor 110 for storing instructions and data. Illustratively, the memory in the processor 110 may be a cache memory. The memory may hold instructions or data that the processor 110 has just used or recycled. If the processor 110 needs to reuse the instruction or data, it can be called directly from the memory. This avoids repeated accesses and reduces the latency of the processor 110, thereby improving the efficiency of the electronic device 100 in processing data or executing instructions.

In some embodiments, the processor 110 may include one or more interfaces. The interfaces may include inter-integrated circuit (inter-integrated circuit, I2C) interfaces, inter-integrated circuit audio (inter-integrated circuit sound, I2S) interfaces, pulse code modulation (pulse code modulation, PCM) interfaces, universal asynchronous receiver transmitter (universal asynchronous receiver/transmitter, UART) interfaces, mobile industry processor interfaces (mobile industry processor interface, MIPI), general-purpose input/output (GPIO) interfaces, SIM card interfaces, and/or USB interfaces, among others. The USB interface 130 is an interface conforming to the USB standard, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, or the like. The USB interface 130 may be used to connect a charger to charge the electronic device 100, and may also be used to transfer data between the electronic device 100 and a peripheral device. The USB interface 130 may also be used to connect headphones through which audio is played.

It should be understood that the interfacing relationship between the modules illustrated in the embodiments of the present application is only illustrative, and does not limit the structure of the electronic device 100. In other embodiments of the present application, the electronic device 100 may also use different interfacing manners, or a combination of multiple interfacing manners in the foregoing embodiments.

The charge management module 140 is configured to receive a charge input from a charger. The charger can be a wireless charger or a wired charger. In some wired charging embodiments, the charge management module 140 may receive a charging input of a wired charger through the USB interface 130. In some wireless charging embodiments, the charge management module 140 may receive wireless charging input through a wireless charging coil of the electronic device 100. The charging management module 140 may also supply power to the electronic device through the power management module 141 while charging the battery 142.

The power management module 141 is used for connecting the battery 142, and the charge management module 140 and the processor 110. The power management module 141 receives input from the battery 142 and/or the charge management module 140 and provides power to the processor 110, the internal memory 121, the external memory, the display 194, the camera 193, the wireless communication module 160, and the like. The power management module 141 may also be configured to monitor battery capacity, battery cycle number, battery health (leakage, impedance) and other parameters. In other embodiments, the power management module 141 may also be provided in the processor 110. In other embodiments, the power management module 141 and the charge management module 140 may be disposed in the same device.

The wireless communication function of the electronic device 100 may be implemented by the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, a modem processor, a baseband processor, and the like.

The antennas 1 and 2 are used for transmitting and receiving electromagnetic wave signals. Each antenna in the electronic device 100 may be used to cover a single or multiple communication bands. Different antennas may also be multiplexed to improve the utilization of the antennas. For example: the antenna 1 may be multiplexed into a diversity antenna of a wireless local area network. In other embodiments, the antenna may be used in conjunction with a tuning switch.

The mobile communication module 150 may provide a solution for wireless communication including 2G/3G/4G/5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (low noise amplifier, LNA), etc. The mobile communication module 150 may receive electromagnetic waves from the antenna 1, perform processes such as filtering, amplifying, and the like on the received electromagnetic waves, and transmit the processed electromagnetic waves to the modem processor for demodulation. The mobile communication module 150 can amplify the signal modulated by the modem processor, and convert the signal into electromagnetic waves through the antenna 1 to radiate. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be disposed in the processor 110. In some embodiments, at least some of the functional modules of the mobile communication module 150 may be provided in the same device as at least some of the modules of the processor 110.

The wireless communication module 160 may provide solutions for wireless communication including wireless local area network (wireless local area networks, WLAN) (e.g., wireless fidelity (wireless fidelity, wiFi) network), bluetooth (BT), global navigation satellite system (global navigation satellite system, GNSS), frequency modulation (frequency modulation, FM), near field wireless communication technology (near field communication, NFC), infrared technology (IR), etc., as applied on the electronic device 100. The wireless communication module 160 may be one or more devices that integrate at least one communication processing module. The wireless communication module 160 receives electromagnetic waves via the antenna 2, modulates the electromagnetic wave signals, filters the electromagnetic wave signals, and transmits the processed signals to the processor 110. The wireless communication module 160 may also receive a signal to be transmitted from the processor 110, frequency modulate it, amplify it, and convert it to electromagnetic waves for radiation via the antenna 2.

The electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like. The GPU is a microprocessor for image processing, and is connected to the display 194 and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. Processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

The display screen 194 is used to display images, videos, and the like. The display 194 includes a display panel. The display panel may employ a liquid crystal display (liquid crystal display, LCD), an organic light-emitting diode (OLED), an active-matrix organic light emitting diode (AMOLED), a flexible light-emitting diode (FLED), miniled, microLed, micro-OLED, a quantum dot light-emitting diode (quantum dot light emitting diodes, QLED), or the like. In some embodiments, the electronic device 100 may include 1 or more display screens 194.

In some embodiments of the present application, the display screen 194 in fig. 1 may be bent when the display panel is made of OLED, AMOLED, FLED or the like. Here, the display 194 may be bent, which means that the display 194 may be bent at any position to any angle and may be held at the angle, for example, the display 194 may be folded in half from the middle. Or folded up and down from the middle.

The display 194 of the electronic device 100 may be a flexible screen that is currently of great interest due to its unique characteristics and great potential. Compared with the traditional screen, the flexible screen has the characteristics of strong flexibility and bending property, can provide a new interaction mode based on the bending property for a user, and can meet more requirements of the user on electronic equipment. For electronic devices equipped with foldable display screens, the foldable display screen on the electronic device can be switched between a small screen in a folded configuration and a large screen in an unfolded configuration at any time. Accordingly, users use split screen functions on electronic devices configured with foldable display screens, as well as more and more frequently.

The electronic device 100 may implement a photographing function through an ISP, a camera 193, a video codec, a GPU, a display screen 194, an application processor, and the like.

The ISP is used to process data fed back by the camera 193. For example, when photographing, the shutter is opened, light is transmitted to the camera photosensitive element through the lens, the optical signal is converted into an electric signal, and the camera photosensitive element transmits the electric signal to the ISP for processing and is converted into an image visible to naked eyes. ISP can also perform algorithm optimization on noise, brightness and skin color of the image. The ISP can also optimize parameters such as exposure, color temperature, etc. of the photographed scene. In some embodiments, the ISP may be provided in the camera 193.

The camera 193 is used to capture still images or video. The object generates an optical image through the lens and projects the optical image onto the photosensitive element. The photosensitive element may be a charge coupled device (charge coupled device, CCD) or a Complementary Metal Oxide Semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, which is then transferred to the ISP to be converted into a digital image signal. The ISP outputs the digital image signal to the DSP for processing. The DSP converts the digital image signal into an image signal in a standard RGB, YUV, or the like format. In some embodiments, electronic device 100 may include 1 or more cameras 193.

The digital signal processor is used for processing digital signals, and can process other digital signals besides digital image signals. For example, when the electronic device 100 selects a frequency bin, the digital signal processor is used to fourier transform the frequency bin energy, or the like.

Video codecs are used to compress or decompress digital video. The electronic device 100 may support one or more video codecs. In this way, the electronic device 100 may play or record video in a variety of encoding formats, such as: moving picture experts group (moving picture experts group, MPEG) 1, MPEG2, MPEG3, MPEG4, etc.

The NPU is a neural-network (NN) computing processor, and can rapidly process input information by referencing a biological neural network structure, for example, referencing a transmission mode between human brain neurons, and can also continuously perform self-learning. Applications such as intelligent awareness of the electronic device 100 may be implemented through the NPU, for example: image recognition, face recognition, speech recognition, text understanding, etc.

The external memory interface 120 may be used to connect an external memory card, such as a Micro SD card, to enable expansion of the memory capabilities of the electronic device 100. The external memory card communicates with the processor 110 through an external memory interface 120 to implement data storage functions. For example, files such as music, video, etc. are stored in an external memory card.

The internal memory 121 may be used to store one or more computer programs, including instructions. The processor 110 may cause the electronic device 100 to perform the methods provided in some embodiments of the present application, as well as various applications, data processing, and the like, by executing the above-described instructions stored in the internal memory 121. The internal memory 121 may include a storage program area and a storage data area. The storage program area can store an operating system; the storage program area may also store one or more applications (such as gallery, contacts, etc.), etc. The storage data area may store data created during use of the electronic device 100 (e.g., photos, contacts, etc.), and so on. In addition, the internal memory 121 may include high-speed random access memory, and may also include nonvolatile memory, such as one or more disk storage units, flash memory units, universal flash memory (universal flash storage, UFS), and the like. In some embodiments, processor 110 may cause electronic device 100 to perform the methods provided in the embodiments of the present application, as well as other applications and data processing, by executing instructions stored in internal memory 121, and/or instructions stored in a memory provided in processor 110. The electronic device 100 may implement audio functions through an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, an application processor, and the like. Such as music playing, recording, etc.

The sensor module 180 may include a pressure sensor 180A, a gyroscope sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, an ambient light sensor 180L, a bone conduction sensor 180M, and the like.

The pressure sensor 180A is used for sensing a pressure signal, and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor 180A may be disposed on the display screen 194. The pressure sensor 180A is of various types, such as a resistive pressure sensor, an inductive pressure sensor, a capacitive pressure sensor, and the like. The capacitive pressure sensor may be a capacitive pressure sensor comprising at least two parallel plates with conductive material. The capacitance between the electrodes changes when a force is applied to the pressure sensor 180A. The electronic device 100 determines the strength of the pressure from the change in capacitance. When a touch operation is applied to the display screen 194, the electronic apparatus 100 detects the touch operation intensity according to the pressure sensor 180A. The electronic device 100 may also calculate the location of the touch based on the detection signal of the pressure sensor 180A. In some embodiments, touch operations that act on the same touch location, but at different touch operation strengths, may correspond to different operation instructions. For example: and executing an instruction for checking the short message when the touch operation with the touch operation intensity smaller than the first pressure threshold acts on the short message application icon. And executing an instruction for newly creating the short message when the touch operation with the touch operation intensity being greater than or equal to the first pressure threshold acts on the short message application icon.

The gyro sensor 180B may be used to determine a motion gesture of the electronic device 100. In some embodiments, the angular velocity of electronic device 100 about three axes (i.e., X, Y and Z axis) may be determined by gyro sensor 180B. The gyro sensor 180B may be used for photographing anti-shake. For example, when the shutter is pressed, the gyro sensor 180B detects the shake angle of the electronic device 100, calculates the distance to be compensated by the lens module according to the angle, and makes the lens counteract the shake of the electronic device 100 through the reverse motion, so as to realize anti-shake. The gyro sensor 180B may also be used for navigating, somatosensory game scenes.

The acceleration sensor 180E may detect the magnitude of acceleration of the electronic device 100 in various directions (typically three axes). The magnitude and direction of gravity may be detected when the electronic device 100 is stationary. The electronic equipment gesture recognition method can also be used for recognizing the gesture of the electronic equipment, and is applied to horizontal and vertical screen switching, pedometers and other applications.

The ambient light sensor 180L is used to sense ambient light level. The electronic device 100 may adaptively adjust the brightness of the display 194 based on the perceived ambient light level. The ambient light sensor 180L may also be used to automatically adjust white balance when taking a photograph. Ambient light sensor 180L may also cooperate with proximity light sensor 180G to detect whether electronic device 100 is in a pocket to prevent false touches.

The fingerprint sensor 180H is used to collect a fingerprint. The electronic device 100 may utilize the collected fingerprint feature to unlock the fingerprint, access the application lock, photograph the fingerprint, answer the incoming call, etc.

The temperature sensor 180J is for detecting temperature. In some embodiments, the electronic device 100 performs a temperature processing strategy using the temperature detected by the temperature sensor 180J. For example, when the temperature reported by temperature sensor 180J exceeds a threshold, electronic device 100 performs a reduction in the performance of a processor located in the vicinity of temperature sensor 180J in order to reduce power consumption to implement thermal protection. In other embodiments, when the temperature is below another threshold, the electronic device 100 heats the battery 142 to avoid the low temperature causing the electronic device 100 to be abnormally shut down. In other embodiments, when the temperature is below a further threshold, the electronic device 100 performs boosting of the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperatures.

The touch sensor 180K, also referred to as a "touch panel". The touch sensor 180K may be disposed on the display screen 194, and the touch sensor 180K and the display screen 194 form a touch screen, which is also called a "touch screen". The touch sensor 180K is for detecting a touch operation acting thereon or thereabout. The touch sensor may communicate the detected touch operation to the application processor to determine the touch event type. Visual output related to touch operations may be provided through the display 194. In other embodiments, the touch sensor 180K may also be disposed on the surface of the electronic device 100 at a different location than the display 194.

Fig. 2 is a software configuration block diagram of the electronic device 100 according to the embodiment of the present application. The layered architecture divides the software into several layers, each with distinct roles and branches. The layers communicate with each other through a software interface. In some embodiments, the Android system is divided into four layers, from top to bottom, an application layer, an application framework layer, an Zhuoyun row (Android run) and system libraries, and a kernel layer, respectively. The application layer may include a series of application packages.

As shown in fig. 2, the application layer may include cameras, gallery, calendar, phone calls, maps, navigation, WLAN, bluetooth, music, video, short messages, advertisement modules, management modules, and the like.

The advertisement module is used for carrying out advertisement interaction with the user. The advertisement module may be an operating system preset module, and the advertisement module and the electronic device may be provided by the same manufacturer.

And the management module is used for generating the OPENID according to the advertiser ID and the equipment ID, can be a module preset by an operating system, and can be provided by the same manufacturer.

The application framework layer provides an application programming interface (application programming interface, API) and programming framework for the application of the application layer, which includes some predefined functions.

As shown in fig. 2, the application framework layer may include a window manager, a content provider, a view system, a phone manager, a resource manager, a notification manager, and the like.

The window manager is used for managing window programs, and can acquire the size of a display screen and judge whether a status bar, a locking screen, an intercepting screen and the like exist.

The content provider is used to store and retrieve data and make such data accessible to applications. The data may include video, images, audio, calls made and received, browsing history and bookmarks, phonebooks, etc.

The view system includes visual controls, such as controls to display text, controls to display pictures, and the like. The view system may be used to build applications. The display interface may be composed of one or more views. For example, a display interface including a text message notification icon may include a view displaying text and a view displaying a picture.

The telephony manager is used to provide the communication functions of the electronic device 100. Such as the management of call status (including on, hung-up, etc.).

The resource manager provides various resources for the application program, such as localization strings, icons, pictures, layout files, video files, and the like.

The notification manager allows the application to display notification information in a status bar, can be used to communicate notification type messages, can automatically disappear after a short dwell, and does not require user interaction. Such as notification manager is used to inform that the download is complete, message alerts, etc. The notification manager may also be a notification in the form of a chart or scroll bar text that appears on the system top status bar, such as a notification of a background running application, or a notification that appears on the screen in the form of a dialog window. Such as prompting text messages in status bars, sounding prompts, vibrating electronic devices, flashing indicator lights, etc.

The system library may include a plurality of functional modules. For example: surface manager (surface manager), media library (media library), three-dimensional graphics processing library (e.g., openGL ES), 2D graphics engine (e.g., SGL), etc.

The surface manager is used to manage the display subsystem and provides a fusion of 2D and 3D layers for multiple applications.

Media libraries support a variety of commonly used audio, video format playback and recording, still image files, and the like. The media library may support a variety of audio and video encoding formats such as MPEG4, h.264, MP3, AAC, AMR, JPG, PNG, etc.

The three-dimensional graphic processing library is used for realizing three-dimensional graphic drawing, image rendering, synthesis, layer processing and the like.

The 2D graphics engine is a drawing engine for 2D drawing.

The kernel layer is a layer between hardware and software. The inner core layer at least comprises a display driver, a camera driver, an audio driver and a sensor driver.

In mobile operating systems (e.g., android, hong-mong, iOS, etc.), the nature of animation is to display interfaces or interface elements in real-time based on refresh rates. The user perceives the picture as moving due to the principle of human persistence of vision. However, the animation of the current interface when switching is only a combination of simple animation effects, the animation effect is single, the physical rule is not met, and the actual use scene and the use habit of the user are not considered.

Based on this, the embodiment of the application provides a display method and a device for interface switching, when the interface switching is performed, an animation effect can be determined according to the relationship between interface elements of the interface elements before and after the switching, so that the relationship between the interface elements is enhanced, the animation effect is more in line with the physical rule, and the real use scene and a system of a user are considered, so that the user experience can be improved.

Several concepts to which embodiments of the present application relate will first be described below.

"attraction": in the embodiment of the application, the concept of attraction in the nature is introduced into the interface element. In the embodiment of the application, an "attractive force" can exist between interface elements, and when one interface element in the interface moves due to the existence of the "attractive force", one or more other interface elements in the interface can move due to the influence of the "attractive force". The application of "attraction" to interface elements in embodiments of the present application is described in detail below. In this embodiment of the present application, the "attractive force" is not limited to the same interface, and when the interfaces are switched, the "attractive force" may exist between the interfaces and between the interface elements, and for details, please refer to the following.

FIG. 3 illustrates a schematic diagram of the direction of "attractive force" when an interface element is affected by the force of "attractive force" in accordance with an embodiment of the present application. Fig. 3 (a) shows an example scenario in which "attractive force" of a moving interface element acts as "attractive force". As shown in (a) of fig. 3, the lower right cross schematically represents an enlarged "gravitational" center point of the moving interface element. In addition, in (a) of fig. 3, the upper left cross graph schematically represents a point of enlargement of another interface element affected by the "attraction force" of the moving interface element. In the case where the "attractive force" animation effect is set to the "attractive force", the direction of the interface element subjected to the "attractive force" is such that the element center point of each of the interface elements subjected to the influence is directed in the vector direction of the occurrence center point of the moving interface element under the action of the "attractive force". Similarly, (b) in fig. 3 shows an example scenario in which the "attractive force" of the moving interface element acts as a "repulsive force". As shown in (b) of fig. 3, the lower right cross schematically represents the occurrence center point, and the upper left cross schematically represents the element center point. In the case where the "attractive force" animation effect is set to the "repulsive force", the direction of the "attractive force" of the interface element is the vector direction in which the center point of the moving interface element points to the center point of each affected interface element under the action of the "repulsive force". In the embodiment of the present application, the selection of the occurrence center point and the element center point is not limited, for example, the occurrence center point and the element center point may be the geometric center of the interface element, or may be any point in the interface element. Similar to the above description, since the "attractive force" in the embodiments of the present application is not limited to the same interface, in some embodiments, the occurrence center of the "attractive force" may be a geometric center of an interface element before the interface is switched, and the element center may be a geometric center of the interface element after the interface is switched, for details, see later.

FIG. 4 illustrates a schematic diagram of movement of interface elements affected by "attractive force" provided by embodiments of the present application.

As shown in fig. 4 (a), an interface element 401 and an interface element 402 are displayed on the same interface. The electronic device may cause interface element 401 to move to the right, and interface element 401 may also move to the right when interface element 402 is moved to the right due to the "gravitational force".

As shown in fig. 4 (b), the electronic device may cause the interface element 401 to move to the left, and when the interface element 401 moves to the left, the interface element 402 may also move to the left due to the influence of "attractive force".

In the above example, the "attractive force" of the interface element 401 acts as the "repulsive force" on the interface element 402 when the interface element 401 moves in the direction approaching the interface element 402, and the "attractive force" of the interface element 401 acts as the "attractive force" on the interface element 402 when the interface element 401 moves in the direction separating from the interface element 402, but the embodiment of the present application is not limited thereto, and for example, the "attractive force" of the interface element 401 acts as the "attractive force" on the interface element 402 when the interface element 401 moves in the direction approaching the interface element 402, and the "attractive force" of the interface element 401 acts as the "repulsive force" on the interface element 402 when the interface element 401 moves in the direction separating from the interface element 402.

For another example, when the interface element 401 moves in a direction approaching the interface element 402 or in a direction moving away from the interface element 402, the "attractive force" of the interface element 401 acts as a "repulsive force" on the interface element 402. In other words, when the interface element 401 moves, its "attractive force" acts as a "repulsive force" on the interface element 402, irrespective of the moving direction of the interface element 401.

For another example, when the interface element 401 moves in a direction approaching the interface element 402 or in a direction moving away from the interface element 402, the "attractive force" of the interface element 401 acts as an "attractive force" on the interface element 402. In other words, when the interface element 401 moves, its "attractive force" acts as an "attractive force" on the interface element 402, irrespective of the direction of movement of the interface element 401.

According to the display method for interface switching provided by the embodiment of the application, in the interface switching process, the electronic equipment can determine the animation effect in the interface switching process according to the attractive force between the interface elements, so that the interface switching is more natural, and the classification of the interface elements and the animation effect in the interface switching process are introduced.

According to the interface switching display method provided by the embodiment of the invention, different interface elements in the interface can be divided into different types, and it can be understood that the different interfaces can comprise the same type of interface element, so that when the electronic device performs interface switching, the animation effect during interface switching can be determined according to the relative movement positions of the same type of interface elements in 2 interfaces and the attractive force between the interface elements, and if one or more types of interface elements are newly added after the interface switching, the one or more types of interface elements can not be influenced by the attractive force or can also be influenced by the attractive force, and specific description is given below.

In the embodiment of the application, the types of interface elements of different interfaces can be divided in the following ways.

One possible implementation divides the interface elements into primary and secondary interface elements to determine the same type of interface element in different interfaces. In other words, the interface elements are divided into two types, a primary interface element and a secondary interface element.

For example, fig. 5 shows a schematic diagram of dividing interface elements into primary interface elements and secondary interface elements provided in the embodiments of the present application, where, as shown in (a) in fig. 5, an electronic device displays an interface 501, and the electronic device may display an interface element 502, an interface element 503, an interface element 504, an interface element 505, and an interface element 506 on the interface 501, where the electronic device may set the interface element 505 as the primary interface element, and set the interface element 502, the interface element 503, the interface element 504, and the interface element 506 as the secondary interface element.

Similarly, as shown in fig. 5 (b), the electronic device displays an interface 507, the interface 507 and the interface 501 are not the same interface, and the electronic device may display an interface element 508, an interface element 509, an interface element 510, an interface element 511, and an interface element 512 at the interface 507, where the electronic device may set the interface element 508 as a primary interface element, and the interface element 509, the interface element 510, the interface element 511, and the interface element 512 as secondary interface elements.

The electronic device may determine the primary interface element and the secondary interface element according to a first preset rule, where the first preset rule in the embodiment of the present application is not limited, and a user or a developer may customize the first preset rule.

For example, the electronic device may determine the interface element with the largest size in one interface as the main interface element. The size of the interface element may be characterized using the area or perimeter of the interface element.

For example, the electronic device may determine an interface element located at the golden section point in one interface as a master interface element.

For example, the electronic device may determine the interface element located in the preset area as the main interface element. The preset area of the interface may be user or developer customized. If the preset area includes a plurality of interface elements, the electronic device may randomly determine that one interface element is a main interface element.

One possible implementation divides the types of interface elements according to their locations in the interface to determine the same type of interface element in different interfaces.

Specifically, the electronic device may determine interface elements located at the same position or the same area of different interfaces as the same type of interface element.

For example, fig. 6 shows a schematic diagram of dividing types of interface elements according to positions of the interface elements in an interface, where as shown in (a) in fig. 6, an electronic device displays an interface 601, and the electronic device may divide the interface 601 into upper, middle and lower 3 areas, where the electronic device displays an interface element 602, an interface element 603 and an interface element 604 in an upper area of the interface 601, displays an interface element 605 in a middle area of the interface 601, and displays an interface element 606 in a lower area of the interface 601. As shown in fig. 6 (b), the electronic device displays an interface 607, and similarly, the electronic device may divide the interface 607 into upper, middle and lower 3 areas, wherein the electronic device displays an interface element 608 and an interface element 609 in the upper area of the interface 607, an interface element 610 and an interface element 611 in the middle area of the interface 607, and an interface element 612 in the lower area of the interface 607. Since interface element 602, interface element 603, and interface element 604 are located in the upper region of interface 601, and interface element 608 and interface element 609 are located in the upper region of interface 607, the electronic device may determine interface element 602, interface element 603, interface element 604, interface element 608, and interface element 609 as the same type of interface element. Similarly, the electronic device may determine interface element 605, interface element 610, and interface element 611 as the same type of interface element, and interface element 606 and interface element 612 as the same type of interface element.

In the above description, the interface is divided into the upper, middle, and lower regions, but the embodiment of the present application is not limited thereto, and for example, the interface may be divided into the left, middle, and right regions.

As another example, as shown in (c) of fig. 6, the electronic device displays an interface 613, and the electronic device may display an interface element 614, an interface element 615, an interface element 616, an interface element 617, an interface element 618, an interface element 619, an interface element 620, an interface element 621, an interface element 622, an interface element 623, an interface element 624, and an interface element 625 on the interface 613. As shown in (d) of fig. 6, the electronic device displays an interface 626, the interface 613 and the interface 626 may be different interfaces of a desktop, and the electronic device may display an interface element 627, an interface element 628, an interface element 629, an interface element 630, an interface element 631, an interface element 632, an interface element 633, an interface element 634, an interface element 635, an interface element 636, an interface element 637, an interface element 638 at the interface 626. Because interface element 614 is located at interface 613 at the same location as interface element 627 is located at interface 626, the electronic device may determine that interface element 614 and interface element 627 are the same type of interface element. Similarly, the electronic device may determine that interface element 615 and interface element 628 are the same type of interface element, determine that interface element 616 and interface element 629 are the same type of interface element, determine that interface element 617 and interface element 630 are the same type of interface element, determine that interface element 618 and interface element 631 are the same type of interface element, determine that interface element 619 and interface element 632 are the same type of interface element, determine that interface element 620 and interface element 633 are the same type of interface element, determine that interface element 621 and interface element 634 are the same type of interface element, determine that interface element 622 and interface element 635 are the same type of interface element, determine that interface element 623 and interface element 636 are the same type of interface element, determine that interface element 624 and interface element 637 are the same type of interface element, and determine that interface element 625 and interface element 638 are the same type of interface element.

One possible implementation determines the labels of each interface element, and then classifies the types of interface elements according to the labels of the interface elements to determine the same type of interface element in different interfaces.

Specifically, the electronic device may determine the label of each interface element, and then the electronic device may determine the interface elements with the same label in different interfaces as the same type of interface element.

For example, fig. 7 shows a schematic diagram of types of interface elements according to label division of interface elements provided in the embodiments of the present application, as shown in (a) in fig. 7, an electronic device displays an interface 701, and the electronic device may display an interface element 702, an interface element 703, an interface element 704, an interface element 705, and an interface element 706 on the interface 701, where the electronic device may determine that labels of the interface element 702 and the interface element 706 are label #1, labels of the interface element 703 and the interface element 704 are label #2, and labels of the interface element 705 are label #3. Similarly, as shown in (b) of fig. 7, the electronic device displays an interface 707, and the electronic device may display an interface element 708, an interface element 709, an interface element 710, an interface element 711, and an interface element 712 on the interface 707, where the electronic device may determine that the labels of the interface element 709, the interface element 711, and the interface element 712 are label #1, the label of the interface element 710 is label #2, and the label of the interface element 708 is label #3. Because the labels of interface element 702, interface element 706, interface element 709, interface element 711, and interface element 712 are the same, the electronic device may determine that interface element 702, interface element 706, interface element 709, interface element 711, and interface element 712 are the same type of interface element, and similarly, may also determine that interface element 703, interface element 704, and interface element 710 are the same type of interface element, and interface element 705 and interface element 708 are the same type of interface element.

The method for determining the label of the interface element is not limited in the embodiment of the application. For example, the interface is an interface of an application program, and a developer may define a label for each interface element when developing.

For another example, the user may customize the labels of the interface elements.

For another example, the electronic device is preset with a second preset rule for determining the label of the interface element.

In one possible implementation, the electronic device may determine, as the same type of interface element, interface elements having similarities exceeding a first threshold according to the similarities of the interface elements of the different interfaces.

For example, the electronic device may calculate the color similarity of the interface elements of different interfaces, and determine the interface elements with the color similarity exceeding the first threshold as the same type of interface element.

For example, the electronic device may display the interface element #1, the interface element #2, and the interface element #3 on the first interface, and display the interface element #4, the interface element #5, and the interface element #6 on the second interface, and the electronic device may calculate that the color similarity between the interface element #1 and the interface element #4 is 40%, the color similarity between the interface element #1 and the interface element #5 is 60%, and the color similarity between the interface element #1 and the interface element #6 is 60%, and then the electronic device may determine the interface element #1, the interface element #5, and the interface element #6 as the same type of interface element.

For example, the electronic device may calculate the size similarity of the interface elements of different interfaces, and determine the interface elements with the size similarity exceeding the first threshold as the same type of interface element.

For example, the electronic device may calculate the shape similarity of the interface elements of different interfaces, and determine the interface elements with the shape similarity exceeding the first threshold as the same type of interface element.

It should be understood that, for the description of the same type of interface element for determining different interfaces by size similarity or shape similarity for the electronic device, reference may be made to the description of the same type of interface element for determining different interfaces by color similarity for the electronic device, which is not repeated herein for brevity.

It should be noted that, in the embodiment of the present application, the algorithm for calculating the similarity is not limited, and for example, the algorithm for calculating the similarity may be euclidean distance (eucledian distance) algorithm, manhattan distance (manhattan distance) algorithm, markov distance (minkowski distance) algorithm, cosine similarity (cosine similarity) algorithm, jaccard similarity coefficient (jaccard similarity coefficient) algorithm, pearson correlation coefficient (pearson correlation coefficient) algorithm, and the like.

In one possible implementation, the electronic device may determine a hierarchy of interface elements for different interfaces, with interface elements of the same hierarchy being determined to be the same type of interface element.

The electronic device may determine a hierarchy of each interface element in the interface when the interface elements are displayed, so that the electronic device may determine the same hierarchy of interface elements in different interfaces as the same type of interface element.

The above describes the division of interface elements of different interfaces into interface elements of the same type, and the following describes the animation effect during interface switching provided by the embodiment of the present application.

Fig. 8 shows a schematic diagram of an animation effect at the time of interface switching provided in an embodiment of the present application.

As shown in (a) of fig. 8, the electronic device displays an interface 801, and the electronic device displays an interface element 802, an interface element 803, an interface element 804, an interface element 805, on the interface 801, wherein the interface 801 is an interface before switching.

As shown in (b) of fig. 8, the electronic device displays an interface 806, and the electronic device displays an interface element 807, an interface element 808, an interface element 809, and an interface element 810 on the interface 806, wherein the interface 806 is a switched interface.

As shown in fig. 8 (a) and (b), interface element 802 and interface element 809 are the same type of interface element, i.e., type #1, interface element 803 and interface element 810 are the same type of interface element, i.e., type #2, interface element 804 and interface element 808 are the same type of interface element, i.e., type #3, and interface element 805 and interface element 807 are the same type of interface element, i.e., type #4.

The process of the electronic device switching the interface from interface 801 to interface 806 may be understood as the electronic device moving the same type of interface element from its position at interface 801 to its position at interface 806. For example, as shown in (c) of fig. 8, where the interface element of the dotted line represents the position of the interface element of the different type on the interface 801, and the interface element of the solid line represents the position of the interface element of the different type on the interface 806, the electronic device switches the interface from the interface 801 to the interface 806 by moving the interface element of the different type represented by the dotted line to the position of the interface element of the different type represented by the solid line in (c) of fig. 8.

The electronic device, when moving the interface element, may determine one or more "gravitational" occurrence center points, taking the center point of the interface element of type #3 at the location of interface 806 as the "gravitational" occurrence center point as an example in the example shown in fig. 8, i.e., the "gravitational" center point may be the geometric center point of interface element 808.

As shown in (d) - (e) of fig. 8, the interface element of type #3 can move from the dotted line position to the solid line position with the geometric center point of the interface element 808 as the "gravitational" occurrence center point, and the movement locus is a straight line due to the influence of the "gravitational". For the interface element of the type #1, when the interface element of the type #1 moves from the dotted line position to the solid line position, if there is no influence of "attraction force", as shown in (d) of fig. 8, the movement locus of the interface element of the type #1 may be a straight line, but due to the influence of "attraction force", as shown in (e) of fig. 8, the movement locus of the interface element of the type #1 may be changed from a straight line to a curved line. For the interface element of the type #2, when the interface element of the type #2 moves from the dotted line position to the solid line position, if there is no influence of "attraction force", as shown in (d) of fig. 8, the movement locus of the interface element of the type #2 may be a straight line, and as influenced by "attraction force", as shown in (e) of fig. 8, the movement locus of the interface element of the type #2 may be a curved line. For the interface element of the type #4, when the interface element of the type #4 moves from the dotted line position to the solid line position, if there is no influence of "attraction force", as shown in (d) of fig. 8, the movement locus of the interface element of the type #4 may be a straight line, and as influenced by "attraction force", as shown in (e) of fig. 8, the movement locus of the interface element of the type #4 may be a curved line.

In summary, the movement track of the interface elements of the type #1, the type #2, and the type #4 may be affected by the "attractive force" to bend during the movement process.

In the above example, the interface 801 and the interface 806 include the interface elements of the type #1, the type #2, the type #3, and the type #4, but the embodiment of the present application is not limited thereto, for example, as shown in (a) and (h) in fig. 8, if the interface 806 further includes the interface element 811 of the type #5, as shown in (h) in fig. 8, the interface element of the type #5 shown in the dashed line in the drawing represents the position of the interface element when the user triggers the interface switching, and the interface element of the type #5 shown in the solid line in the drawing represents the position of the interface element when the interface switching is finally completed, since the interface element of the type #5 is a newly added interface element, it may not be affected by "attraction force", and thus the movement track of the interface element of the type #5 may be a straight line. In other embodiments, the interface element of type #5 may also be affected by "attraction," and its trajectory may be a curve.

In some embodiments, the electronic device may set the curvature of the movement track of the interface element affected by the "gravitational" effect to the same curvature. In this way, the processing of the electronic device for realizing the animation effect at the time of interface switching can be simplified.

In other embodiments, the electronic device may determine the movement trajectory of the interface element to be affected by the "gravitational" effect based on a variety of influencing factors. For example, the bending direction and curvature of the movement trajectories of different interface elements may be different. For a description of the influence of the influencing factors on the movement locus of the interface element influenced by the "gravitational" effect, reference is made to the following description, which will not be described here.

It can be understood that, during the movement of the interface elements of the type #1, the type #2, and the type #4, the bending direction of the movement track is related to the received "attractive force", if the received "attractive force" acts as the "attractive force", the bending direction of the movement track may be toward the center point of occurrence of the "attractive force", and if the received "attractive force" acts as the "repulsive force", the bending direction of the movement track may be away from the center point of occurrence of the "attractive force".

For example, as shown in (e) of fig. 8, the occurrence center point of the "attractive force" is the geometric center point of the interface element 808, and the "attractive force" to which the interface elements of the type #1, the type #2, and the type #4 are subjected acts as the "attractive force", and the bending direction of the movement track of the interface element of the type #1, the type #2, and the type #4 is directed toward the geometric center point of the interface element 808.

As another example, as shown in (f) of fig. 8, the occurrence center point of the "attractive force" is the geometric center point of the interface element 808, and the "attractive force" to which the type #1, the type #2, the type #4 are subjected acts as the "repulsive force", and the bending direction of the movement track of the interface element of the type #1, the type #2, the type #4 is away from the geometric center point of the interface element 808.

It will be appreciated that if the interface elements of type #1, type #2, and type #4 are subjected to both "attractive force" and "repulsive force" during movement, the movement trajectories of the interface elements of type #1, type #2, and type #4 may be curved multiple times. For example, as shown in fig. 8 (g), the interface element of type #1 is first subjected to "attractive force" and then "repulsive force" during movement, and then the bending direction of its movement trajectory may be directed toward the geometric center point of the interface element 808 and then away from the geometric center point of the interface element 808.

In this embodiment of the present application, not only the movement track of the interface element of type #1, type #2, type #4 may be affected by "attraction", but also the movement speed of the interface element of type #1, type #2, type #4 may be affected by "attraction".

In some embodiments, the electronic device may set the speed of movement of the interface element affected by the "gravitational" effect to the same speed. In this way, the processing of the electronic device for realizing the animation effect at the time of interface switching can be simplified.

In some embodiments, the electronic device may determine the speed of movement of the interface elements from the "attractive force" between the interface elements.

For example, taking the interface element of the type #1 as an example, as can be seen from the movement track of the interface element of the type #1 shown in (e) of fig. 8, the distance between the interface element of the type #1 and the center point of the "gravitational force" during movement may be reduced and then increased.

In some embodiments, the "attractive force" of the center point occurs to act as an "attractive force" and then as a "repulsive force" on the interface element of type # 1. The interface element of the type #1 can move towards the direction of the occurrence center point according to the movement track shown in the figure under the action of the attractive force, so that the movement track of the interface element of the type #1 is bent, the attractive force can be increased along with the decrease of the distance between the interface element of the type #1 and the occurrence center point, the movement speed of the interface element of the type #1 can be increased, and the acceleration can be increased. When the interface element of the type #1 moves to the preset position, the electronic device may enable the "attractive force" of the occurrence center point to act as a "repulsive force" on the interface element of the type #1, and then the interface element of the type #1 may move in a direction away from the occurrence center point, and at this time, the movement speed of the interface element of the type #1 may increase due to the influence of the "repulsive force". As the distance between the interface element of type #1 and the occurrence center point increases, the "repulsive force" may decrease, the acceleration of the interface element of type #1 may decrease, and the movement speed continues to increase until it moves to the solid line position.

For the above-mentioned movement process of the interface element, fig. 8 (i) shows a velocity-time curve of the interface element of type #1, and as shown in fig. 8 (i), the velocity and acceleration of the interface element of type #1 may be continuously increased during the movement process, but since the acceleration may be reduced and the velocity may be continuously increased as the interface element of type #1 is gradually moved away from the "gravitational" occurrence center point.

In other embodiments, the "attractive force" at the center point acts as an "attractive force" on the interface element of type # 1. The interface element of the type #1 may move in a direction of the occurrence center point according to the movement track shown in the drawing under the action of the "attractive force", so that the movement track of the interface element of the type #1 is curved, and as the distance between the interface element of the type #1 and the occurrence center point decreases, the "attractive force" may increase, and then the movement speed of the interface element of the type #1 may increase, and the acceleration increases. As the interface element of the type #1 moves to the solid line position shown in (e) of fig. 8, since the interface element of the type #1 is hindered from moving by the "attractive force", the moving speed of the interface element of the type #1 may gradually decrease until moving to the solid line position shown in (e) of fig. 8. In the process of reducing the moving speed of the interface element of the type #1, as the distance between the interface element of the type #1 and the occurrence center point increases, the "attractive force" to which the interface element of the type #1 is subjected decreases, and the interface element of the type #1 can move in a variable and deceleration manner.

For the above-described movement process of the interface element, fig. 8 (j) shows a speed-time curve of the interface element of the type #1, as shown in fig. 8 (j), the speed and acceleration of the interface element of the type #1 may be continuously increased during the movement, but when the "attractive force" hinders the movement of the interface element of the type #1, the movement speed and acceleration of the interface element of the type #1 may be reduced, and as the interface element of the type #1 gradually moves away from the "attractive force" occurrence center point, the reduction speed of the movement speed of the interface element of the type #1 may be retarded.

For another example, taking the interface element of the type #2 as an example, as can be seen from the movement track of the interface element of the type #1 shown in (e) of fig. 8, the distance between the interface element of the type #2 and the center point of the "gravitational force" during the movement may be reduced and then increased.

In some embodiments, the "attractive force" of the center point occurs acting as an "attractive force" and then as a "repulsive force" to the interface element of type # 2. The interface element of the type #2 can move towards the direction of the occurrence center point according to the movement track shown in the figure under the action of the attractive force, so that the movement track of the interface element of the type #2 is bent, the attractive force can be increased along with the decrease of the distance between the interface element of the type #2 and the occurrence center point, the movement speed of the interface element of the type #2 can be increased, and the acceleration can be increased. When the interface element of the type #2 moves to the preset position, the electronic device may enable the "attractive force" of the occurrence center point to act as a "repulsive force" on the interface element of the type #2, and then the interface element of the type #2 may move in a direction away from the occurrence center point, and at this time, the movement speed of the interface element of the type #2 may increase due to the influence of the "repulsive force". As the distance between the interface element of type #2 and the occurrence center point increases, the "repulsive force" may decrease, the acceleration of the interface element of type #2 may decrease, and the movement speed continues to increase until it moves to the solid line position.

In other embodiments, the "attractive force" at the center point acts as an "attractive force" on the interface element of type # 2. The interface element of the type #2 may move in a direction of the occurrence center point according to the movement track shown in the drawing under the action of the "attractive force", so that the movement track of the interface element of the type #2 is curved, and as the distance between the interface element of the type #2 and the occurrence center point decreases, the "attractive force" may increase, and the movement speed of the interface element of the type #2 may increase. As the interface element of the type #2 moves to the solid line position shown in (e) of fig. 8, the movement speed of the interface element of the type #2 may gradually decrease until it moves to the solid line position shown in (e) of fig. 8, since the interface element of the type #2 is hindered from moving by the "attractive force". In the process of reducing the moving speed of the interface element of the type #2, as the distance between the interface element of the type #2 and the occurrence center point increases, the "attractive force" to which the interface element of the type #2 is subjected decreases, and the interface element of the type #2 can move in a variable and deceleration manner.

It is understood that the speed time curve of the interface element of the type #2 is similar to that of the interface element of the type #1, and will not be described herein for brevity.

For another example, taking the interface element of the type #4 as an example, as shown in (e) of fig. 8, since the interface element of the type #4 is subjected to the "attractive force" of the occurrence center point during the movement, and the "attractive force" may act as the "attractive force", the interface element of the type #4 may move toward the occurrence center point according to the movement trajectory shown in the drawing, and as the distance between the interface element of the type #4 and the occurrence center point decreases, the "attractive force" may increase, and the movement speed of the interface element of the type #4 may increase. As the interface element of type #4 moves toward the solid line position shown in fig. 8 (d), the "attractive force" it receives may hinder its movement, and the movement speed of the interface element of type #4 may slow down until it moves to the solid line position shown in fig. 8 (e). In the process of reducing the moving speed of the interface element of the type #4, as the distance between the interface element of the type #4 and the occurrence center point increases, the "attractive force" to which the interface element of the type #4 is subjected decreases, and the interface element of the type #4 can move at varying speed and speed.

It will be appreciated that the velocity-time curve of the interface element of type #4 is similar to the curve shown in fig. 8 (j), and will not be described again here for brevity.

For the above-mentioned movement process of the interface element, fig. 8 (k) shows a velocity-time curve of the interface element of type #3, and as shown in fig. 8 (k), the interface element of type #3 may be understood to be attracted to the "attraction force" generation center point to move during the movement process, and as the interface element of type #3 gradually approaches the "attraction force" generation center point, the "attraction force" to which the interface element of type #3 is subjected increases, and the velocity and acceleration of the interface element of type #3 may be continuously increased during the movement process. For the above-described movement process of the interface element, fig. 8 (i) - (k) show velocity time curves of the interface element, fig. 8 (l) shows a displacement time curve of the interface element of type #1, wherein the first curve is a displacement time curve of the interface element of type #1 which is not affected by "attraction force", the second curve is a displacement time curve of the interface element of type #1 which is affected by "attraction force", and as shown in fig. 8 (l), the displacement of the interface element of type #1 which is affected by "attraction force" at the same time may be larger than the displacement of the interface element of type #1 which is not affected by "attraction force" at the same time at the initial stage of the movement, and as the movement thereof is hindered by "attraction force" to which the interface element of type #1 is affected by "attraction force", the displacement of the interface element of type #1 which is not affected by "attraction force" at the same time is larger than the displacement of the interface element of type #1 which is affected by "attraction force".

It should be noted that, in the above example, the occurrence center point of the "attractive force" is a fixed position, that is, the geometric center point of the interface element 808, but the position of the occurrence center point of the "attractive force" in the embodiment of the present application is movable. For example, the moving interface element of type #3 may be set as the occurrence center point of "attraction force". In the above example, the number of occurrence center points of the "attraction force" is taken as 1 as an example, but the embodiment of the present application is not limited thereto, and the number of occurrence center points of the "attraction force" may be plural.

It should be noted that, in the above example, the electronic device may determine the linkage switching animation effect according to the same type of interface element in different interfaces, and the animation effect of interface switching when the interface element is divided into the primary interface element and the secondary interface element will be described below.

Fig. 9 shows a schematic diagram of an animation effect at the time of interface switching provided in an embodiment of the present application.

As shown in (a) of fig. 9, the electronic device displays an interface 901, and the electronic device may display an interface element 902, an interface element 903, an interface element 904, an interface element 905, and an interface element 906 at the interface 901, where the electronic device may set the interface element 905 as a primary interface element, and set the interface element 902, the interface element 903, the interface element 904, and the interface element 906 as secondary interface elements.

As shown in fig. 9 (b), the electronic device displays an interface 907, the interface 907 and the interface 901 are not the same interface, and the electronic device may display an interface element 908, an interface element 909, an interface element 910, an interface element 911, and an interface element 912 at the interface 907, wherein the electronic device may set the interface element 908 as a primary interface element and the interface element 909, the interface element 910, the interface element 911, and the interface element 912 as secondary interface elements.

When the electronic device switches from the interface 901 to the interface 908, the electronic device displays the interface 907, and may take the center point of the position of the main interface element in the interface 907 as the "gravitational force" to generate the center point, move the main interface element from the position of the interface 901 to the position of the interface 907, and move other secondary interface elements due to the influence of the "gravitational force".

As shown in (b) in fig. 9, in switching the interface 901 to the interface 907, the electronic device gradually changes the interface element 905 to the interface element 908, and gradually moves from the position of the interface element 905 in the interface 901 to the position of the interface 908 in the interface 907. The movement track of the main interface element may be a straight line or a curve, which is not limited in the embodiment of the present application.

The secondary interface element in the interface starts to move due to the influence of "attraction force", taking the interface element 910 as an example, when the electronic device switches the interface to the interface 907, the interface element 910 can move from the position indicated by the dashed line in the figure to the final position due to the influence of "attraction force", and the initial position can be any position in the interface 907, and the position can be defined by a developer. Since the interface element 910 is affected by "attractive force", the movement track thereof may be curved, and the direction of the curve may be toward the interface element 908 or away from the interface element 908, and the detailed description may be referred to the description of fig. 8, which is not repeated herein for brevity.

It should be appreciated that for a description of interface element 909, interface element 911, and interface element 912 movement, reference may be made to a description of interface element 910.

The above describes that the movement of the interface element is associated with the existence of the "attraction force" when the electronic device performs the interface switching, and the factors affecting the display animation effect of the interface switching will be described below.

(1) Distance.

First, several possible ways of determining the distance according to the embodiments of the present application will be described.

In one possible implementation, the reference points of the interface elements are determined, and the distance of the interface elements is determined according to the distance between the reference points of the interface elements.

For example, as shown in (a) of fig. 10, the interface displays an interface element 1001 and an interface element 1002, and the electronic device may select a geometric center point of the interface element 1001 and a geometric center point of the interface element 1002 as reference points, and the distance between the interface element 1001 and the interface element 1002 may be a distance between the geometric center point of the interface element 1001 and the geometric center point of the interface element 1002.

In the example shown in fig. 10 (a), when determining the distance between two interface elements, the electronic device uses the geometric center point of the two interface elements as the calculated reference point, but the embodiment of the application is not limited thereto, and in the embodiment of the application, when calculating the distance between two interface elements, any point of the two interface elements may be selected as the reference point. For example, when the electronic device calculates the distance between two interface elements, two points with the shortest distance in the two interface elements may be selected as the reference points. Taking interface element 1001 and interface element 1002 as examples, the intersection point of the lower boundary and the right boundary of interface element 1001 and the intersection point of the left boundary and the upper boundary of interface element 1002 may be selected as reference points.

For another example, when the electronic device calculates the distance between the two interface elements, two points with the longest distance in the two interface elements may be selected as the reference points. Taking interface element 1001 and interface element 1002 shown in the figure as an example, an intersection point of the left boundary and the upper boundary of interface element 1001 and an intersection point of the lower boundary and the right boundary of interface element 1002 may be selected as reference points.

One possible implementation determines a lateral distance between interface elements, and determines the lateral distance between interface elements as the distance between interface elements.

For example, as shown in (b) of fig. 10, the interface is displayed with an interface element 1001 and an interface element 1002, and the lateral distance of the interface element 1001 and the interface element 1002 is d2, the electronic device may determine d2 as the distance between the interface elements.

One possible implementation determines a longitudinal distance between interface elements, and determines the longitudinal distance between interface elements as the distance between interface elements.

For example, as shown in (c) of fig. 10, the interface is displayed with an interface element 1001 and an interface element 1002, and the longitudinal distance of the interface element 1001 and the interface element 1002 is d3, the electronic device may determine d3 as the distance between the interface elements.

One possible implementation determines the lateral and longitudinal distances between the interface elements, and then determines the distance between the interface elements based on the lateral and longitudinal distances.

As shown in (d) of fig. 10, the lateral distance of the interface element 1001 and the interface element 1002 is d4, and the longitudinal distance of the interface element 1001 and the interface element 1002 is d5. As an example, as shown in (e) of fig. 10, based on the magnitudes of the lateral distance d4 and the longitudinal distance d5, the electronic device may determine a right triangle having two right-angle sides of the lateral distance d4 and the longitudinal distance d5, the right triangle having hypotenuses. Then, based on the connection between the geometric center points of the interface element 1001 and the interface element 1002, the electronic device may determine a line segment within the right triangle, and then the electronic device may determine the length of the line segment to be d6, that is, the distance d6 between the interface element 1001 and the interface element 1002 according to the trigonometric function principle.

The effect of distance on the animation effect of interface switching will be described below.

In the embodiment of the application, a universal gravitation model is introduced, and can be expressed by a formula 1:

as can be derived from equation (1), the "attractive force" between two interface elements is related to the "mass" and distance of the two interface elements. Since the embodiments herein are directed to interface elements, equation (2) or equation (3) may be used to replace the "quality" of an interface element with the size of the interface element.

M＝K×R (2)

M＝K×r (3)

Where k is a constant parameter, M is the "mass" of the interface element, R is the size of the interface element, and R is the distance between two interface elements.

By combining the formulas (1) - (3), the formula (1) can be simplified to the formula (4),

as can be derived from equation (4), the "attraction" between interface elements is proportional to the size of the interface elements and inversely proportional to the distance between the interface elements. FIG. 11 is a schematic diagram showing an animation effect when an interface of an interface element with different distances is switched according to an embodiment of the present application.

As shown in fig. 11, the interface 1101 and the interface 1104 have an interface element of type #1 and an interface element of type #2, wherein the dotted line indicates the positions of the interface element of type #1 and the interface element of type #2 on the interface 1101, and the solid line indicates the positions of the interface element of type #1 and the interface element of type #2 on the interface 1104.

The electronic device may determine one or more "gravitational" occurrence center points as the interface element is moved, taking the center point of the interface element of type #1 at the location of interface 1101 as the "gravitational" occurrence center point in the example shown in fig. 11.

As shown in (a) and (b) in fig. 11, the interface element of type #1 is set to the geometric center point of the interface 1101 as the "attractive force" occurrence center point, and it is assumed that in the interface 1101, the distance between the interface element of type #2 and the occurrence center is d1, and the interface element of type #1 and the interface element of type #2 are the same in size, and the "attractive force" between the two interface elements is f1. For the interface element of type #2, when the interface element of type #2 moves from the dotted line position to the solid line position, if there is no influence of "attraction force", the movement track of the interface element of type #2 may be a straight line, but the movement track thereof may be a curve due to the influence of "attraction force".

The curvature of the movement trajectory of the interface element of type #2 is related to the "attractive force" to which the interface element of type #2 is subjected. If the "attractive force" to which the interface element of type #2 is subjected increases, the curvature of the movement locus thereof increases, and if the "attractive force" to which the interface element of type #2 is subjected decreases, the curvature of the movement locus thereof decreases.

As shown in fig. 11 (b), if the "attractive force" to which the interface element of type #2 is subjected acts as an "attractive force", the bending direction of the movement trajectory of the interface element of type #2 is directed toward the occurrence center point.

As shown in (c) and (d) in fig. 11, in the interface 1101, the distance between the interface element of the type #2 and the occurrence center point becomes d2, d2 > d1, as can be obtained from the formula (2), the "attractive force" between the two interface elements becomes f2, and f2 < f1, if the "attractive force" to which the interface element of the type #2 is subjected acts as "attractive force", the bending direction of the movement locus of the interface element of the type #2 is toward the occurrence center point, but the curvature of the movement locus is smaller than that of the movement locus of the interface element of the type #2 shown in (b) in fig. 11.

As shown in (b) and (d) of fig. 11, the curvature of the movement locus of the interface element of the type #2 shown in (d) of fig. 11 is smaller than the curvature of the movement locus of the interface element of the type #2 shown in (b) of fig. 11.

In the above example, the "attractive force" applied to the interface element of type #2 is taken as an example, but the embodiment of the present application is not limited thereto. For example, the "attractive force" applied to the interface element of type #2 acts as a "repulsive force", or the "attractive force" applied to the interface element of type #2 acts as a "repulsive force" and then as an "attractive force", or the "attractive force" applied to the interface element of type #2 acts as an "attractive force" and then as a "repulsive force", and the curvature of the movement track is changed by the change of the magnitude of the "attractive force".

The curvature of the movement trajectory of the interface element of type #2 is described above due to the change in distance, and the influence of the distance on the movement speed will be described below.

As shown in (b) and (d) of fig. 11, the interface element of type #2 may be smaller and larger from the center point where the "attraction force" occurs during movement.

In some embodiments, if an "attractive force" of the center point occurs, the interface element of type #2 is acted as an "attractive force". The interface element of type #2 in (b) and (d) of fig. 11 can be moved in the direction of the occurrence center point according to the movement trajectories shown in (b) and (d) of fig. 11, respectively, under the action of the "attractive force", so that the movement trajectories of the interface element of type #2 are curved. However, the "attractive force" to which the interface element of type #2 in fig. 11 (b) is subjected is greater than the "attractive force" to which the interface element of type #2 in fig. 11 (d), and the movement speed of the interface element of type #2 in fig. 11 (b) is faster than the movement speed of the interface element of type #2 in fig. 11 (d).

As the distance between the interface element of type #2 in (b) and (d) in fig. 11 and the occurrence center point decreases, the "attractive force" may increase, and the moving speed of the interface element of type #2 in (b) and (d) in fig. 11 may increase. However, the acceleration of the interface element of type #2 in fig. 11 (b) may be greater than the acceleration of the interface element of type #2 in fig. 11 (d). It is understood that since the acceleration of the interface element of the type #2 in fig. 11 (b) may be larger than the acceleration of the interface element of the type #2 in fig. 11 (d), the difference in moving speed between the two may also be increased.

As the interface element of the type #2 moves toward the solid line position shown in (d) and (b) in fig. 11, the distance between the interface element of the type #2 and the occurrence center point increases, and the interface element of the type #2 is subjected to "attractive force" to hinder movement thereof, so that the acceleration of the interface element of the type #2 takes a negative value, and the movement speed decreases until moving to the solid line position. However, since the "attractive force" to which the interface element of the type #2 in fig. 11 is subjected is greater than the "attractive force" to which the interface element of the type #2 in fig. 11 (d), the acceleration of the interface element of the type #2 in fig. 11 (b) is smaller than the acceleration of the interface element of the type #2 in fig. 11 (d), in other words, the magnitude of decrease in the moving speed of the interface element of the type #2 in fig. 11 (b) is greater than the magnitude of decrease in the moving speed of the interface element of the type #2 in fig. 11 (d).

During the movement of the interface element of type #2 and the occurrence of the decrease in the distance between the center points, the movement speed of the interface element of type #2 in fig. 11 is faster than the movement speed of the interface element of type #2 in fig. 11, and the decrease in the movement speed of the interface element of type #2 in fig. 11 is greater than the decrease in the movement speed of the interface element of type #2 in fig. 11, then in some cases the interface element of type #2 in fig. 11 and the interface element of type #2 in fig. 11 may reach the solid line position at the same time, or in other cases the interface element of type #2 in fig. 11 may reach the solid line position earlier than the interface element of type #2 in fig. 11, or in other cases the interface element of type #2 in fig. 11 may reach the solid line position later than the interface element of type #2 in fig. 11.

In other embodiments, if "attractive" of the center point occurs, the interface element of type #2 acts as an "attractive" and then as a "repulsive" force. The interface element of type #2 in (b) and (d) of fig. 11 can be moved in the direction of the occurrence center point according to the movement trajectories shown in (b) and (d) of fig. 11, respectively, under the action of the "attractive force", so that the movement trajectories of the interface element of type #2 are curved. However, the "attractive force" to which the interface element of type #2 in fig. 11 (b) is subjected is greater than the "attractive force" to which the interface element of type #2 in fig. 11 (d), and the movement speed of the interface element of type #2 in fig. 11 (b) is faster than the movement speed of the interface element of type #2 in fig. 11 (d).

Similar to the above description, as the interface element of the type #2 moves to the preset position, the electronic device may cause the "attractive force" at which the center point occurs to act as the "repulsive force" on the interface element of the type #2, and the interface element of the type #2 may move away from the center point at which the movement speed may increase due to the influence of the "repulsive force". As the distance between the interface element of type #2 and the occurrence center point increases, the "repulsive force" may decrease, the acceleration of the interface element of type #2 may decrease, and the movement speed continues to increase until it moves to the solid line position. Since the interface element of the type #2 in fig. 11 receives a "repulsive force" greater than the interface element of the type #2 in fig. 11, the acceleration of the interface element of the type #2 in fig. 11 is greater than the acceleration of the interface element of the type #2 in fig. 11, the time for the interface element of the type #2 in fig. 11 to reach the solid line position may be earlier than the time for the interface element of the type #2 in fig. 11 to reach the solid line position.

The "attractive force" experienced by the interface element during movement in the above examples may act as an "attractive force" or a "repulsive force", and in some embodiments, the electronic device may determine the effect of the "attractive force" experienced based on the distance between the interface element during movement and the occurrence center point. For example, in the interface before switching, the distance between the interface element and the occurrence center point is d, and if the distance between the interface element and the occurrence center point is smaller than d in the moving process of the interface element, the "attractive force" applied to the interface element acts as "repulsive force"; if the distance between the interface element and the occurrence center point is greater than d in the moving process of the interface element, the attractive force applied to the interface element acts as attractive force.

(2) The size of the interface element.

As can be derived from equation (2), the "attractive force" between two interface elements may be proportional to the size of the interface elements and inversely proportional to the distance between the interface elements.

The dimensions of the interface element may be characterized in embodiments of the present application using the area of the interface element, the perimeter of the interface element, and the like.

Fig. 12 is a schematic diagram showing animation effects when interface elements of different sizes are switched according to an embodiment of the present application.

As shown in fig. 12, the interface 1201 and the interface 1204 have an interface element of type #1 and an interface element of type #2, wherein the dotted line indicates the positions of the interface element of type #1 and the interface element of type #2 at the interface 1201, and the solid line indicates the positions of the interface element of type #1 and the interface element of type #2 at the interface 1204.

The electronic device may determine one or more "gravitational" occurrence center points as the interface element is moved, taking the center point of the interface element of type #1 at the location of interface 1201 as the "gravitational" occurrence center point in the example shown in fig. 12.

As shown in (a) and (b) of fig. 12, the geometric center point of the interface element of type #1 is taken as the "attractive force" generation center point, and it is assumed that in the interface 1201, the distance between the interface element of type #2 and the generation center is d1, the dimensions of the interface element of type #1 and the interface element of type #2 are the same, both are R1, the distance between the two interface elements is d1, and when the dimension is R1, the "attractive force" between the two interface elements is f1. For the interface element of type #2, when the interface element of type #2 moves from the dotted line position to the solid line position, if there is no influence of "attraction force", the movement track of the interface element of type #2 may be a straight line, but the movement track thereof may be a curve due to the influence of "attraction force".

As shown in (c) and (d) of fig. 12, if the size of the interface element of the type #1 is increased from R1 to R2, the size of the interface element of the type #2 and the size between the two interface elements are unchanged, as can be obtained by the formula (2), the "attractive force" between the two interface elements may be increased to f2, and if the "attractive force" received by the interface element of the type #2 acts as an "attractive force", the bending direction of the movement locus of the interface element of the type #2 is directed toward the occurrence center point, but the curvature of the movement locus is larger than that of the movement locus of the interface element of the type #2 shown in (b) of fig. 11.

It should also be noted that, in the above example, the "attractive force" between the interface element of the type #1 and the interface element of the type #2 is calculated by using the sizes of the interface element of the type #1 and the interface element of the type #2 in the interface 1201, but the embodiment of the present application is not limited thereto, for example, the sizes of the interface element of the type #1 and the interface element of the type #2 in the interface 1204 may be used, or the sizes of the interface element of the type #1 in the interface 1201 and the interface element of the type #2 in the interface 1204 may be used, or the sizes of the interface element of the type #1 in the interface 1204 and the interface element of the type #2 in the interface 1201 may be used.

The curvature of the movement trajectory of the interface element of type #2 is described above as being changed due to the change in the size of the interface element, and the influence of the size of the interface element on the movement speed will be described below.

As shown in (b) and (d) of fig. 12, the interface element of type #2 may be smaller and larger from the center point where "attraction" occurs during movement.

In some embodiments, if an "attractive force" of the center point occurs, the interface element of type #2 is acted as an "attractive force". The interface element of type #2 in (b) and (d) of fig. 12 can be moved in the direction of the occurrence center point according to the movement trajectories shown in (b) and (d) of fig. 12, respectively, under the action of the "attractive force", so that the movement trajectories of the interface element of type #2 are curved. However, the "attractive force" to which the interface element of type #2 in fig. 12 (b) is subjected is smaller than the "attractive force" to which the interface element of type #2 in fig. 12 (d), and the movement speed of the interface element of type #2 in fig. 12 (b) is slower than the movement speed of the interface element of type #2 in fig. 12 (d).

As the distance between the interface element of type #2 in (b) and (d) in fig. 12 and the occurrence center point decreases, the "attractive force" may increase, and the movement speed of the interface element of type #2 in (b) and (d) in fig. 12 may increase. However, the acceleration of the interface element of type #2 in fig. 12 (b) may be smaller than the acceleration of the interface element of type #2 in fig. 12 (d). It is understood that since the acceleration of the interface element of the type #2 in fig. 12 (b) may be smaller than the acceleration of the interface element of the type #2 in fig. 12 (d), the difference in moving speed between the two may also be increased.

As the interface element of the type #2 moves toward the solid line position shown in (d) and (b) in fig. 12, the distance between the interface element of the type #2 and the occurrence center increases, and the interface element of the type #2 is subjected to "attractive force" to hinder movement thereof, so that the acceleration of the interface element of the type #2 takes a negative value, and the movement speed decreases until moving to the solid line position. However, since the "attractive force" to which the interface element of the type #2 in fig. 12 is subjected is smaller than the "attractive force" to which the interface element of the type #2 in fig. 11 is subjected, the acceleration of the interface element of the type #2 in fig. 12 is larger than the acceleration of the interface element of the type #2 in fig. 12, in other words, the magnitude of decrease in the moving speed of the interface element of the type #2 in fig. 12 is smaller than the magnitude of decrease in the moving speed of the interface element of the type #2 in fig. 12.

During the movement of the interface element of type #2 and the occurrence of the decrease in the distance between the center points, the movement speed of the interface element of type #2 in fig. 12 is slower than the movement speed of the interface element of type #2 in fig. 12, and the decrease in the movement speed of the interface element of type #2 in fig. 12 is smaller than the decrease in the movement speed of the interface element of type #2 in fig. 12, then in some cases the interface element of type #2 in fig. 12 and the interface element of type #2 in fig. 12 may reach the solid line position at the same time, or in other cases the interface element of type #2 in fig. 12 may reach the solid line position earlier than the interface element of type #2 in fig. 12, or in other cases the interface element of type #2 in fig. 12 may reach the solid line position later than the interface element of type #2 in fig. 12.

In other embodiments, if "attractive" of the center point occurs, the interface element of type #2 acts as an "attractive" and then as a "repulsive" force. The interface element of type #2 in (b) and (d) of fig. 12 can be moved in the direction of the occurrence center point according to the movement trajectories shown in (b) and (d) of fig. 12, respectively, under the action of the "attractive force", so that the movement trajectories of the interface element of type #2 are curved. However, the "attractive force" to which the interface element of type #2 in fig. 12 (b) is subjected is smaller than the "attractive force" to which the interface element of type #2 in fig. 12 (d), and the movement speed of the interface element of type #2 in fig. 12 (b) is slower than the movement speed of the interface element of type #2 in fig. 12 (d).

Similar to the above description, as the interface element of the type #2 moves to the preset position, the electronic device may cause the "attractive force" at which the center point occurs to act as the "repulsive force" on the interface element of the type #2, and the interface element of the type #2 may move away from the center point at which the movement speed may increase due to the influence of the "repulsive force". As the distance between the interface element of type #2 and the occurrence center point increases, the "repulsive force" may decrease, the acceleration of the interface element of type #2 may decrease, and the movement speed continues to increase until it moves to the solid line position. Since the interface element of type #2 in fig. 12 receives a smaller "repulsive force" than the interface element of type #2 in fig. 12, and the acceleration of the interface element of type #2 in fig. 12 is smaller than the acceleration of the interface element of type #2 in fig. 12, the time for the interface element of type #2 in fig. 12 to reach the solid line position may be later than the time for the interface element of type #2 in fig. 12 to reach the solid line position.

(3) The direction in which the interface element moves.

The "attractive force" in the above example may act as an "attractive force" or a "repulsive force". Whether the interface element is subjected to an "attractive" force or a "repulsive" force may be related to the direction in which it moves.

Referring to (c) and (d) in fig. 8, it is assumed that the interface element of the type #3 in motion is taken as the occurrence center point of the "attraction force". For the interface element of type #1, the interface element of type #3 moves leftward in the process of switching from the interface 801 to the interface 806, and the interface element of type #1 moves rightward and downward in the process of switching from the interface 801 to the interface 806. As can be seen from the movement tracks of the interface element of type #3 and the interface element of type #1, the distance between the two elements can be reduced and then increased in the movement process. The process in which the distance between the interface element of the type #3 and the interface element of the type #1 becomes smaller may be understood as a process in which the "attractive force" to which the interface element of the type #1 is subjected acts as an "attractive force", so that the distance between the interface element of the type #1 and the interface element of the type #3 becomes smaller, and as the distance decreases, the moving speed of the interface element of the type #1 may be increased. When the critical point is reached (for example, the critical point may be a point corresponding to the interface element of type #1 being located directly above the interface element of type # 3), the "attractive force" to which the interface element of type #1 is subjected may act as a "repulsive force", the distance between the interface element of type #1 and the interface element of type #3 may increase, and as the distance increases, the movement speed of the interface element of type #1 may slow down until moving to the solid line position. It is understood that the description of the interface element for type #2 may be referred to the description of the interface element for type # 1.

With continued reference to (c) and (d) in fig. 8, assume that the interface element of type #3 in motion is taken as the center point of occurrence of "attraction force". For the interface element of type #4, the interface element of type #3 moves to the left during the transition from interface 801 to interface 806, and the interface element of type #4 moves to the upper left during the transition from interface 801 to interface 806. The movement directions of the interface element of type #3 and the interface element of type #4 are similar. Movement of the interface element of type #4 up to the left may be understood as an attractive force to which the interface element of type #4 is subjected.

(4) Friction force

In the embodiment of the application, the friction force in the nature is introduced into the interface element, so that the animation effect is closer to the natural effect.

The "friction force" in the embodiment of the application may be "sliding friction force" which may be understood as a "friction force" applied to the interface element during the movement process, where the "sliding friction force" may hinder the movement of the interface element, so that the movement speed of the interface element is changed.

Several ways of determining the "friction" in the embodiments of the present application will be described first.

In one possible implementation, the electronic device may randomly determine the "friction" of the interface element. For example, the "friction force" of interface element #1 is defined as f#1, and the "friction force" of interface element #2 is defined as f#2.

In one possible implementation, the electronic device may define a "friction" of the interface element according to a hierarchy of interface elements. The hierarchy of interface elements may be different, and the electronic device may determine a "friction" of the interface elements based on the hierarchy of interface elements.

In one possible implementation, the electronic device may determine the "friction" of the interface element based on the color of the interface element. The color of the interface element may be an RGB color and the electronic device may calculate the "friction" of the interface element from the RGB components of the color of the interface element. For example, interface element #1 includes color #1, where R component of color #1 is 131, G component is 134, and B component is 13, then the electronic device may determine the sum 278 of the 3 components as the magnitude of the "friction" of interface element # 1. For another example, the electronic device may determine the "friction force" of the interface element according to a preset rule according to the dispersion of the RGB components of the color of the interface element, and for example, if the dispersion of the RGB components of the color of the interface element is higher, the "friction force" thereof is greater; illustratively, the higher the dispersion of the RGB components of the color of the interface element, the greater the "dynamic friction factor" of the interface element, the greater the "friction force" thereof.

It should be appreciated that if the interface element includes a plurality of colors, the "friction force" corresponding to each color may be calculated separately, and then summed according to each corresponding "friction force" to obtain the "friction force" of the interface element.

It should also be appreciated that the above-described manner of determining the "friction force" of the interface element based on the color of the interface element is merely an example, and the correspondence between the color of the interface element and the "friction force" of the interface element may be characterized by any suitable functional relationship in the practice of the present application.

In one possible implementation, the electronic device may determine the "friction" of the interface element based on the size of the interface element. For example, different dimensions may correspond to different "friction forces", which may be greater for larger interface elements.

It will be appreciated that the direction of the "friction" experienced by the interface element is opposite to the direction of movement, and thus the "friction" may affect the speed of movement of the interface element.

Referring to the movement of the interface element of type #2 in fig. 12, if the "friction force" of the interface element of type #2 is not defined, the displacement time curve thereof may be the curve #1 shown in fig. 13, and if the "friction force" of the interface element of type #2 is defined, the movement speed of the interface element of type #2 is slowed down due to the influence of the "friction force", the time to reach the realization position increases, and the displacement time curve thereof may be the curve #2 shown in fig. 13.

(5) Gravity force

In the embodiment of the application, the gravity in the nature is introduced into the interface element, so that the animation effect is closer to the natural effect.

In the introduction to (4), the electronic device defines the "friction" of the interface element. In order to better conform to the physical law, in the embodiment of the application, besides defining the "friction force" of the interface element, the "gravity" and the dynamic friction factor of the interface element can be defined, so that the "friction force" when the interface element moves can be determined according to the "gravity" and the dynamic friction factor of the interface element. After determining the "friction force" of the interface element, the electronic device may determine the speed change of the interface element during movement according to the "friction force" of the interface element and the "attractive force" received by the interface element, which may be referred to above for a detailed description and will not be repeated herein.

In the embodiment of the application, when determining the "friction force" of the interface element, the "gravity" of the interface element may be determined in several ways.

In one possible implementation, the electronic device may randomly determine the "gravity" of the interface element. For example, "gravity" of interface element #1 is defined as g#1, and "gravity" of interface element #2 is defined as g#2.

In one possible implementation, the electronic device may define the "gravity" of the interface element according to the hierarchy of the interface element. The hierarchy of interface elements for the same interface may be different, and the electronic device may determine the "gravity" of the interface elements based on the hierarchy of interface elements.

In one possible implementation, the electronic device may determine the "gravity" of the interface element based on the color of the interface element. The color of the interface element may be an RGB color and the electronic device may calculate the "gravity" of the interface element from the RGB components of the color of the interface element. For example, interface element #1 includes color #1, where R component of color #1 is 131, g component is 134, and b component is 13, then the electronic device may determine the sum 278 of the 3 components as the magnitude of the "maximum stiction" of interface element # 1. For another example, the electronic device may determine the "gravity" of the interface element according to a preset rule based on the dispersion of the RGB components of the color of the interface element, and for example, if the dispersion of the RGB components of the color of the interface element is higher, the "gravity" thereof is greater.

It should be appreciated that if the interface element includes multiple colors, the "gravity" corresponding to each color may be calculated separately, and then summed according to each corresponding "gravity" to obtain the "gravity" of the interface element.

It should also be appreciated that the above-described manner of determining the "gravity" of the interface element based on the color of the interface element is merely an example, and that the correspondence of the color of the interface element to the "friction" of the interface element may be characterized by any suitable functional relationship in the practice of the present application.

In one possible implementation, the electronic device may determine the "gravity" of the interface element based on the size of the interface element. For example, different dimensions may correspond to different "gravities", which may be greater for larger interface elements.

It should be noted that, if the interface element is a folder, and the folder includes a plurality of interface elements, the "gravity" of the folder may be obtained by adding the "gravity" of the plurality of interface elements.

(5) The manner in which the types of interface elements are partitioned.

In the embodiment of the application, the interface elements can be divided into different types, and the animation effect of interface switching can be different according to different modes of dividing the interface element types.

For example, if the interface element is divided into a primary interface element and a secondary interface element, the primary interface element may be an "attractive force" occurrence center point, and the secondary interface element moves due to the influence of the "attractive force". The animation effect of the interface switch can be seen from the description with respect to fig. 9.

For example, if the interface elements are divided into 2 or more types and the primary and secondary interface elements are not distinguished, the electronic device may determine one or more "gravitational" occurrence centers, and the animation effect of the interface switch may be described with reference to fig. 8.

The influence of the influence factors on the linkage switching animation effect is introduced above, and the factors influencing the linkage switching animation effect in the embodiment of the application can be combined with each other to influence the animation effect of interface switching.

For example, the electronic device may determine the animation effect of the interface switch based on the size and "friction" of the interface element.

According to the above description, the larger the size of the interface element, the larger the "attractive force" it receives, and if the "friction force" of the interface element is defined, the moving speed of the interface element may be slowed down due to the influence of the "friction force".

For example, fig. 14 shows a schematic diagram of animation effects at the time of interface switching provided in the embodiment of the present application.

As shown in (a) and (b) in fig. 14, the electronic device displays an interface element of type #1, an interface element of type #2, and an interface element of type #3 on the interface 1401 and the interface 1402, wherein a dotted line indicates a position of the interface element on the interface 1401, and a solid line indicates a position of the interface element on the interface 1402. Taking the "attraction force" occurrence center point as an example of the geometric center point of the interface element of the type #1 at the position of the interface 1402, wherein in the interface 1401, the distance between the interface element of the type #2 and the occurrence center point is the same as the distance between the interface element of the type #3 and the occurrence center point, and in the interface 1402, the distance between the interface element of the type #2 and the occurrence center point is the same as the distance between the interface element of the type #3 and the occurrence center point.

If the "friction force" of the interface element is not defined, since the size of the interface element of the type #3 is larger than the size of the interface element of the type #2, the moving speed of the interface element of the type #3 is faster than the moving speed of the interface element of the type #2 in the process of moving from the dotted line position to the solid line position, and the curvature of the moving track of the interface element of the type #3 is larger than the curvature of the moving track of the interface element of the type #2, that is, the moving distance of the interface element of the type #3 is longer than the moving distance of the interface element of the type # 2.

If the "friction" of the interface element is defined, the "friction" experienced by different interface elements may be different, then in some embodiments, the curvature of the movement track of the interface element of type #3 may be the same as the curvature of the movement track of the interface element of type #2, i.e., the movement distance of the interface element of type #3 is equal to the movement distance of the interface element of type # 2. In some embodiments, the movement speed of the interface element of type #3 is slower than the movement speed of the interface element of type # 2.

For example, the electronic device may determine the animation effect of the interface switch based on the distance and the "friction".

According to the above description, the smaller the distance, the larger the "attraction force" it receives, and if the "friction force" of the interface element is defined, the moving speed of the interface element may be slowed down due to the influence of the "friction force".

For example, fig. 15 shows a schematic diagram of an animation effect when an interface is switched according to an embodiment of the present application.

As shown in (a) and (b) in fig. 15, the electronic device displays an interface element of type #1, an interface element of type #2, and an interface element of type #3 on the interface 1501 and the interface 1502, wherein a dotted line indicates a position of the interface element on the interface 1501, and a solid line indicates a position of the interface element on the interface 1502. Taking the "attraction force" occurrence center point as an example of the geometric center point of the interface element of the type #1 at the position of the interface 1402, wherein in the interface 1501, the distance between the interface element of the type #3 and the occurrence center point is smaller than the distance between the interface element of the type #2 and the occurrence center point, and in the interface 1402, the distance between the interface element of the type #3 and the occurrence center point is smaller than the distance between the interface element of the type #2 and the occurrence center point, and the sizes of the interface element of the type #1, the interface element of the type #2, and the interface element of the type #3 are the same.

If the "friction force" of the interface element is not defined, since the distance between the interface element of the type #3 and the occurrence center point is smaller than the distance between the interface element of the type #2 and the occurrence center point, and the dimensions of the interface element of the type #3 and the interface element of the type #2 are the same, the "attraction force" received by the interface element of the type #3 is larger than the "attraction force" received by the interface element of the type #2, and the moving speed of the interface element of the type #3 is faster than the moving speed of the interface element of the type #2 in the process of moving from the dotted line position to the solid line position, and the curvature of the moving track of the interface element of the type #3 is larger than the curvature of the moving track of the interface element of the type #2, namely, the moving distance of the interface element of the type #3 is larger than the moving distance of the interface element of the type # 2.

For example, the electronic device may determine the animation effect at the time of interface switching based on the size of the interface element and "gravity".

For example, the electronic device may determine the animation effect at the time of interface switching based on distance and "gravity".

It should be understood that, since the "friction force" of the interface element may be determined according to the "gravity" and the dynamic friction factor, the description of the animation effect at the time of interface switching according to the size of the interface element and the "gravity" and the animation effect at the time of interface switching according to the distance and the "gravity" may be referred to the description of the animation effect at the time of interface switching according to the size of the interface element and the "friction force" and the animation effect at the time of interface switching according to the distance and the "friction force".

It should be noted that, the above example is taken as an example in which two factors are combined, but the embodiment of the application is not limited thereto, and the electronic device may determine the animation effect when the interface is switched according to more than two factors.

Having described the factors that affect the animation effect at the time of interface switching, several forms of interface switching provided in the embodiments of the present application will be described below.

Fig. 16 is a schematic diagram of an interface switching manner according to an embodiment of the present application.

As shown in (a) of fig. 16, the electronic device displays an interface 1601, and controls 1602 are displayed on the interface 1601, for example, the controls 1602 may be application icons. The electronic device can switch the interface from the interface 1601 to the interface corresponding to the control 1602, i.e., the interface 1603 shown in (b) - (d) in fig. 16, in response to detecting the operation of clicking the control 1602 by the user.

As shown in (b) - (d) in fig. 16, the electronic device may, in response to detecting the operation of clicking the control 1602 by the user, gradually increase the area of the interface 1603 with the position of the control 1602 as the initiation point to replace the interface 1601, where the interface 1603 is the interface corresponding to the control 1602.

In fig. 16 (b) - (d), the electronic device gradually increases the area of the interface 1603 with the position of the control 1602 as the initiation point in the process of switching from the interface 1601 to the interface 1603, but the embodiment of the present application is not limited thereto, and the electronic device may gradually increase the area of the interface 1603 with the center of the screen as the initiation point instead of the interface 1601, for example, as shown in fig. 16 (e) - (g).

In some embodiments, the interface switching speed during interface switching may be related to control 1602.

For example, the interface switching speed may be related to the size of the control 1602. As shown in (a) - (d) of fig. 16, assuming that the size of the control 1602 is R1, when the user clicks the control 1602, the electronic device may display the interface 1603, the size of the interface 1603 being R2 at time t1, that is, the size shown in (b) of fig. 16, and the size of the interface 1603 being R3 at time t2, that is, the size shown in (c) of fig. 16. If the size of the control 1602 is increased to R4 as shown in fig. 16 (i), when the user clicks the control 1602, the electronic device may display the interface 1603, and at time t1, the size R5 of the interface 1603 is greater than R2, i.e., the size shown in fig. 16 (j), and at time t3, the size R6 of the interface 1603 is greater than R3, i.e., the size shown in fig. 16 (k). In other words, as the size of control 1603 increases, the speed of interface switching may also increase.

It should be noted that, the above example only uses the example that the larger the size of the control 1603 is, the faster the interface switching speed is, but the embodiment of the present application is not limited thereto, for example, in other embodiments, the larger the size of the control 1603 is, the slower the interface switching speed is.

In some embodiments, an interface size time curve during interface switching may be associated with control 1602.

For example, (m) in fig. 16 shows a size time curve of the interface 1603, wherein the third curve is a size time curve corresponding to the size of the control 1602 as R1, and the fourth curve is a size time curve corresponding to the size of the control 1602 as R4. As can be seen from fig. 16 (m), if the size of the control 1602 is increased, the size of the interface 1603 initially displayed in the interface may also be increased, and the curvature of the size-time curve is different because the size of the control 1602 changes, although the time that the interface 1603 eventually fills the interface is unchanged.

It should be further noted that, the size of the control 1602 not only affects the interface switching speed in the interface switching process, but also affects the change of the interface transparency in the interface switching process.

In some embodiments, the rate of change of transparency of the interface during interface switching may be related to the size of control 1602.

As shown in (a) - (d) in fig. 16, assuming that the size of the control 1602 is R1, when the user clicks on the control 1602, the electronic device may display the interface 1603, with the transparency of the interface 1603 being T1 at time T1, i.e., as shown in (b) in fig. 16, and with the transparency of the interface 1603 being T2 at time T2, i.e., as shown in (c) in fig. 16. If the size of the control 1602 is increased to R4 as shown in (i) of fig. 16, when the user clicks the control 1602, the electronic device may display the interface 1603, and at time T1, that is, the transparency of the interface 1603 as shown in (j) of fig. 16 is T3, T3 < T1, and at time T2, that is, the transparency of the interface 1603 as shown in (k) of fig. 16 is T4, T4 < T2.

In some embodiments, the transparency time profile during interface switching may be related to the size of control 1602.

For the above interface switching process, fig. 16 (n) shows a transparency time curve of the interface 1603, where the fifth curve is a transparency time curve corresponding to the control 1602 with the size R1, and the sixth curve is a transparency time curve corresponding to the control 1602 with the size R4. As can be seen from fig. 16 (n), if the size of the control 1602 is increased, the curvature of the transparency time curve increases, and the time when the final transparency drops to 0 may be unchanged.

Fig. 17 is a schematic diagram of another interface switching mode according to an embodiment of the present application.

As shown in (a) of fig. 17, the electronic device displays an interface 1701, and in response to detecting an operation of the user to slide left, the electronic device may perform switching of the interface, and the process of interface switching may be as shown in (b) and (c) of fig. 17.

As shown in (b) and (c) in fig. 17, the electronic device may cause the interface 1702 to slide in stepwise from the right side, the interface 1701 to slide out stepwise from the left side, and finally display the interface 1702 in response to detecting the operation of the user sliding to the left.

The movement of the interface 1702 may be understood as being influenced by the interface 1701, in some embodiments, during the movement of the interface 1701 and the interface 1702, as shown in (b) and (c) of fig. 17, the initial speed of the interface 1701 may be faster than the initial speed of the interface 1702, the distance between the interface 1701 and the interface 1702 may be increased first, then the speed of the interface 1702 may be increased to exceed the speed of the interface 1701, the distance between the interface 1701 and the interface 1702 may be decreased again, then after the distance between the two is decreased to a preset distance, the preset distance may be 0, the speeds of the interface 1701 and the interface 1702 may be kept consistent, and finally the switching of the interfaces is completed.

For the above-mentioned movement process of the interface, fig. 17 (h) shows a displacement time curve of the interface, wherein the seventh curve is a displacement time curve of the interface 1702, the eighth curve is a displacement time curve of the interface 1701, and as shown in fig. 17 (h), the displacement difference between the two curves at the same time can be understood as the distance between the interface 1701 and the interface 1702, so that it can be seen from the figure that the distance between the interface 1701 and the interface 1702 can be increased first and then reduced to 0 during the movement process. A decrease in the distance between the two to 0 can be understood as having completed the switching of the interface.

Fig. 17 (i) shows another displacement time curve of the interface, where the ninth curve is a displacement time curve of the interface 1701, the tenth curve is a displacement time curve of the interface 1702, and as shown in fig. 17 (i), a displacement difference between two curves at the same time can be understood as a distance between the interface 1701 and the interface 1702, if the distance between the interface 1701 and the interface 1702 can be 0 when not moved, so that it can be known that, during the movement of the interface 1701 and the interface 1702, the displacement of the interface 1702 at the same time is greater than the displacement of the interface 1701 at the time, the area of the interface 1702 covered between the interface 1701 can be reduced as the movement continues, that is, the distance between the two curves increases, and the interface switching is completed when the distance between the two increases to 0.

In other embodiments, the movement speed of the interface 1702 may be faster than the movement speed of the interface 1701, and then the interface 1701 may overlap with the interface 1702 partially, and finally complete the interface switching.

For example, interface 1701 includes 5 interface elements, interface 1702 includes 3 interface elements, and considering the "gravity" and dynamic friction factors of the interface elements, assuming that each of the 5 interface elements in interface 1701 is the same as each of the 3 interface elements in interface 1702, the "friction" of interface 1701 is greater than the "friction" of interface 1702, and in the case where the "attraction" therebetween is equal, the acceleration of interface 1702 is greater than the acceleration of interface 1701, the speed of interface 1702 may be faster than the speed of movement of interface 1701, such that the two interfaces overlap.

In other embodiments, the movement speed of the interface 1702 may be slower than the movement speed of the interface 1701, and the distance between the interface 1701 and the interface 1702 may be increased all the time, and finally the switching of the interfaces is completed.

In fig. 17 (b) and (c), the electronic device switches the interface 1701 to the interface 1702 in response to detection of the user sliding to the left, but the embodiment of the present application is not limited thereto, and for example, the electronic device may switch the interface in response to detection of the user sliding to a direction other than the left. As shown in (d) - (f) in fig. 17, the electronic device may cause the interface 1702 to slide in stepwise from the upper side, the interface 1701 to slide out stepwise from the lower side, and finally display the interface 1702 in response to detecting the user's downward sliding operation. As shown in (d) - (f) of fig. 17, interface 1702 may overlie interface 1701.

In the form of interface switching shown in fig. 16 and 17, a new interface may be generated in the electronic device when the interface is switched to replace the interface before the interface is switched, but the embodiment of the application is not limited to this, for example, in some embodiments, the electronic device may implement the effect of interface switching by switching the interface elements in the interface. By way of example, fig. 18 illustrates another form of interface switching provided by embodiments of the present application. As in (a) of fig. 18, the electronic apparatus displays an interface 1801, and an interface element of type #1, an interface element of type #2, and an interface element of type #3 are displayed on the interface 1801. The electronic device may adjust the positions of the interface element of type #1, the interface element of type #2, and the interface element of type #3 at the interface 1801 to achieve an effect of interface switching in response to detecting an operation of switching the interface by the user.

According to the method and the device, the concept of multiple forces in the nature is introduced into the interface elements, so that when the interface is switched, the interface elements can be linked, the linked animation effect accords with the natural law, the user experience and the user's look and feel are improved, and the user's operation is more similar to the real world experience.

The method for switching the interface provided by the embodiment of the application will be described below with reference to an application scenario.

FIG. 19 illustrates a set of GUIs provided in an embodiment of the present application.

The application scenario shown in fig. 19 is an interface having a hierarchical structure, that is, can be regarded as switching of interfaces in the same application program. As shown in (a) of fig. 19, the electronic device displays an interface 1901, the interface 1901 is a setting interface, and the electronic device can display a plurality of interface elements, such as interface elements of text interface element 1902, search bar, card, and the like, on the interface 1901. The electronic device may display the interface 1904 from the right side in steps in response to detecting a user clicking on bluetooth 1903.

As shown in (b) and (c) of fig. 19, the electronic device may gradually display the interface 1904 from the right side and finally display the interface 1904 on the screen in response to detecting the operation of clicking the bluetooth 1903 by the user. Interface 1904 is a bluetooth setup interface. The electronic device can display a plurality of interface elements on interface 1904, such as text interface element 1905, interface element 1906, interface element 1907, interface element 1908, interface element 1909.

Movement between the text interface element 1905, interface element 1906, interface element 1907, interface element 1908, interface element 1909 during the electronic device's switch from interface 1901 to interface 1904 may conform to the animation effects described above for the interface switch.

For example, in the process of switching from the interface 1901 to the interface 1904, when dividing the interface elements, the electronic device may divide the text interface element 1902 and the text interface element 1905 into primary interface elements, and other interface elements in the interface 1901 or the interface 1904 are secondary interface elements, so that the interface elements 1906, 1907, 1908 and 1909 may be understood as being moved due to "attraction force" of the text interface element 1905. The following describes the movement process of the text interface element 1905, interface element 1906, interface element 1907, interface element 1908, interface element 1909 in conjunction with (d) - (f) in fig. 19.

In order to facilitate the movement process of the text interface element 1905, the interface element 1906, the interface element 1907, the interface element 1908, and the interface element 1909, only the interface 1905, the text interface element 1905, the interface element 1906, the interface element 1907, the interface element 1908, and the interface element 1909 are shown in (d) - (f) of fig. 19.

As shown in fig. 19 (d), the text interface element 1905 is a primary interface element, and the text interface element 1905 may move prior to the secondary interface element, which moves as a result of being subjected to the "attractive force" of the text interface element 1905. Thus, the distance traveled by the text interface element 1905 is greater than the distance traveled by the interface elements 1906, 1907, 1908, 1909 during the same time period. In some embodiments, the movement distance of the interface elements 1906, 1907, 1908, 1909 in the same time period is the same, and the movement speed may be the same.

In other embodiments, the distance between interface element 1906 and text interface element 1905 < the distance between interface element 1907 and text interface element 1905 < the distance between interface element 1908 and text interface element 1905 < the distance between interface element 1909 and text interface element 1905, then the "attractive force" to interface element 1906 > the "attractive force" to interface element 1907 > the "attractive force" to interface element 1908 > the "attractive force" to interface element 1909, so that the movement distance of interface element 1906 > the movement distance of interface element 1907 > the movement distance of interface element 1908 > the movement distance of interface element 1909, and the movement speed of interface element 1906 > the movement speed of interface element 1907 > the movement speed of interface element 1908 > the movement speed of interface element 1909, as shown in (e) of fig. 19.

As the text interface element 1905, interface element 1906, interface element 1907, interface element 1908, interface element 1909 move to the target position, the final electronic device can display a GUI as shown in (f) in fig. 19.

Note that, the movement tracks of the interface elements 1906, 1907, 1908, 1909 may be straight lines or curved lines, and the curved line may be oriented toward the text interface element 1905, or the curved line may be oriented away from the interface element 1905.

It should be noted that, the foregoing is merely an example of the distance affecting the movement of the secondary interface element, but the embodiments of the present application are not limited thereto, and other factors described above may also affect the movement of the secondary interface element.

For example, the size of the interface element may affect the movement of the secondary interface element. As shown in fig. 19 (f), the size of interface element 1907 is greater than the size of interface element 1906, while the distance between interface element 1906 and text interface element 1905 < the distance between interface element 1907 and text interface element 1905, in some embodiments, the "attractive force" to which interface element 1906 is subjected may be < the "attractive force" to which interface element 1907 is subjected, and thus, the movement distance of interface element 1907 > the movement distance of interface element 1906, and the movement speed of interface element 1907 > the movement speed of interface element 1906, over the same period of time.

For example, "friction" may affect movement of the secondary interface element. As shown in fig. 19 (f), the distance between the interface element 1907 and the text interface element 1905 < the distance between the interface element 1908 and the text interface element 1905, and the size of the interface element 1907 is the same as the size of the interface element 1908, the "attractive force" to which the interface element 1907 is subjected is > the "attractive force" to which the interface element 1908 is subjected. If the "friction" of interface element 1908 is defined < the "friction" of interface element 1906, in some embodiments, because the "friction" of interface element 1908 < the "friction" of interface element 1906, the distance traveled by interface element 1908 > the distance traveled by interface element 1907, and the speed traveled by interface element 1908 > the speed traveled by interface element 1907, over the same period of time.

In other embodiments, if the "attractive force" experienced by interface element 1907 is less than the "friction force" of interface element 1907, then interface element 1907 may not move first, the electronic device may increase the "attractive force" experienced by interface element 1907 or decrease the "friction force" of interface element 1907, and interface element 1907 may begin to move toward the destination location, thereby causing interface element 1907 to move later than other interface elements, in other words, movement of interface element 1907 is delayed.

In other embodiments, the time delay of interface element 1907 may also be understood as the time required for the propagation of "gravitational force", and since interface element 1907 is farther from interface element 1908, the time of propagation of interface element 1907 under "gravitational force" is longer, and movement of interface element 1907 is delayed.

In the process of switching from the interface 1901 to the interface 1904, not only are the plurality of interface elements in the interface 1907 linked due to the existence of "attraction force", but also the interface 1901 and the interface 1904 have animation switching effects, for example, the distance between the interface 1901 and the interface 1904 may be increased or decreased, and a specific description may be referred to the description of fig. 17.

In the embodiment of the application, when the electronic equipment switches the interface, a plurality of interface elements in the interface can be combined to realize the animation effect of linkage, the animation effect accords with the natural law, the user experience and the user's look and feel are improved, and the user's operation is more similar to the real world experience.

FIG. 20 illustrates a set of GUIs provided in an embodiment of the present application.

FIG. 20 illustrates an interface switching scenario across applications. As shown in (a) of fig. 20, the electronic device displays an interface 2001, the interface 2001 is an interface of a short message application, and the electronic device may display a plurality of interface elements, such as a short message 2002, on the interface 2001. The electronic device may display a GUI as shown in (b) of fig. 20 in response to detecting the operation of the user clicking on the short message 2002.

As shown in (b) and (c) in fig. 20, in response to detecting the operation of clicking the short message 2002 by the user, the electronic device may skip to display the interface corresponding to the short message 2002, that is, the interface 2003. Interface 2003 is an interface to a music application. The electronic device can display a plurality of interface elements on the interface 2003, such as a text interface element 2004, a picture interface element 2005, a text interface element 2006, a control interface element 2007.

In the process of switching from the interface 2001 to the interface 2003, the electronic device may conform to the animation effect at the time of interface switching described above by the movement between the text interface element 2004, the picture interface element 2005, the text interface element 2006, the control interface element 2007, the dimensional change, the transparency change, and the like of the interface 2003.

For example, in the process of switching from the interface 2001 to the interface 2003, the electronic device may divide the short message 2002 and the picture interface element 2005 into primary interface elements when dividing the interface elements, and other interface elements in the interface 2001 or the interface 2003 are secondary interface elements, so that the text interface element 2004, the text interface element 2006, and the control interface element 2007 may be understood as being moved due to the "attraction force" of the picture interface element 2005.

It is to be appreciated that the text interface element 2004, the picture interface element 2005, the text interface element 2006, the control interface element 2007 are similar to the description with respect to fig. 19, and are not repeated here for brevity.

FIG. 21 illustrates a set of GUIs provided in an embodiment of the present application.

As shown in (a) - (b) of fig. 21, the electronic device displays an interface 2101, and the electronic device can display a weather card on the interface 2101, and since the electronic device displays a whole weather card on the interface 2101, the interface 2101 can also be called a weather card 2101. When the electronic device detects that the user exits the operation of the weather card 2101, the electronic device may reduce the size of the weather card 2101.

As shown in (c) of fig. 21, when the size of the weather card 2101 is reduced to a threshold value, the electronic device may change the content displayed by the weather card 2101 and may set the weather card 2101 as the main interface element, the weather card 2103 may approach the weather card 2101 stepwise from above the weather card 2101 due to the influence of "attraction", and the weather card 2104, 2105 may approach the weather card 2101 stepwise from below the weather card 2101.

The movement of weather cards 2103, 2104, 2105 may be related to the influencing factors described above.

Illustratively, since the distance between the weather card 2103, the weather card 2104 and the weather card 2101 is smaller than the distance between the weather card 2105 and the weather card 2101, and the dimensions of the weather card 2103, the weather card 2104 and the weather card 2105 are the same, the "attractive force" suffered by the weather card 2103, the weather card 2104 is larger than the "attractive force" suffered by the weather card 2105, the moving speed of the weather card 2103, the moving speed of the weather card 2104 can be larger than the moving speed of the weather card 2105, the distance moved by the weather card 2103, the weather card 2104 in the same time period is larger than the distance moved by the weather card 2105, and the distance between the weather card 2104 and the weather card 2101 is smaller than the distance between the weather card 2104 and the weather card 2105.

Illustratively, as the size of weather card 2101 continues to decrease, the "attractive force" and movement speed to which weather card 2103, weather card 2104, weather card 2105 are subjected may also continue to decrease, and as the size of weather card 2101 decreases to the same size as weather card 2103, weather card 2104, weather card 2105, weather card 2103, weather card 2104, weather card 2105 may move to the target location and not continue to move.

It can be appreciated that the electronic device may also determine the movement effect of the weather card in combination with any of the above-mentioned influencing factors, which are not described herein for brevity.

As shown in fig. 21 (d), as the size of the weather card 2101 is further reduced, the size thereof may be the same as the size of the weather card 2103, the weather card 2104, the weather card 2105 and the distance between adjacent two weather cards in the interface 2102 may be equal.

In other embodiments, the distances between adjacent ones of the weather cards 2101, 2103, 2104, 2105 may not be equal.

FIG. 22 illustrates a set of GUIs provided by embodiments of the present application.

As shown in (a) of fig. 22, the electronic device displays an interface 2201, the interface 2201 is a calendar interface, and the electronic device may display a text interface element 2202, a text interface element 2203, a text interface element 2204, and 12 interface elements for representing different months on the interface 2201. When the electronic apparatus detects an operation of the user to slide left, in response to the operation, the electronic apparatus may change the contents of the text interface element 2202 and the text interface element 2203, and switch 12 interface elements for representing different months.

For example, when 12 interface elements for representing different months are switched, the electronic device may use the interface elements corresponding to 1 month, 4 months, 7 months and 10 months as main interface elements, and then other interface elements move due to the influence of "attraction force" of the interface elements corresponding to 1 month, 4 months, 7 months and 10 months, and the animation effect of the movement of the interface elements may be determined according to the above factors.

For example, when 12 interface elements for representing different months are switched, the electronic device may divide interface elements corresponding to 1 month, 4 months, 7 months, and 10 months into interface elements of type #1, divide interface elements corresponding to 2 months, 5 months, 8 months, and 11 months into interface elements of type #2, divide interface elements corresponding to 3 months, 6 months, 9 months, and 12 months into interface elements of type #3, and may take the interface element of type #1 as an "attractive force" to generate a center point, so that the interface elements of type #2 and the interface element of type #3 move due to the influence of the "attractive force" of the interface element of type #1, and the animation effect of the movement may be determined according to the above-described factors.

The above exemplary description of several application scenarios of interface switching will be described below with reference to animation control logic of interface switching and displacement time curves when the interface element moves.

FIG. 23 shows a schematic diagram of an animation process and associated control logic for an animation effect of an interface switch, according to an embodiment of the present application. In an operating system of an electronic device, an animation essentially displays a current interface or control in real time according to a refresh rate, and a user perceives that a displayed picture is moving by utilizing a human visual persistence principle. Thus, as shown in FIG. 23, the electronic device can first determine an initial state 2310 of the animation and a final state 2320 of the animation. In addition, the electronic device can determine an animation time 2305 that is continuous in the process of transitioning from the initial state 2310 of the linked animation to the final state 2320 of the linked animation. Further, the electronic device can also determine an animation type 2330 and an animation transformation form 2340. For example, animation types 2330 may include displacement animation 2332, scaling animation 2334, rotation animation 2336, transparent animation 2338, etc. of the interface element, while animation transformation form 2340 may be controlled by interpolator 2342 and estimator 2344, such as control of the associated transformation speed during fixed animation time 2305, etc., which for the present embodiment may be the movement speed of the interface element.

In the embodiment of the present application, in order to achieve the animation effect of interface switching, mainly the displacement animation 2332, the scaling animation 2334 and the transparent animation 2338 in the animation type 2330 are referred to, but it should be understood that other linkage animation types are possible. As described above, the displacement animation effect generated by the animation effect of the interface switching in the embodiment of the present application may be that the secondary interface element is influenced by the primary interface element to move when the interface is switched. In some embodiments, the secondary interface element may move toward the primary interface element first and then in the opposite direction until the destination location is reached. In other embodiments, the secondary interface source may stop after moving a distance in the direction of the primary interface source.

For the situation that the interface element moves towards a certain direction and then resets in the opposite direction, the two animation segments can respectively define the duration and the interpolator, and the application side can adjust according to the requirement. It should be appreciated that the electronic device may employ any suitable displacement time profile, known or discovered in the future, to control the movement details of the interface element. In some embodiments, the electronic device may select a movement profile using a bezier profile or an elastic force profile as the interface element. For example, the electronic device may use a second order Bezier curve to control the movement of the interface element first in a certain direction and a spring force curve to control the resetting of the interface element, or vice versa. Of course, in other embodiments, the electronic device may also use one of a Bezier curve or an elastic force curve to control movement in one direction and to control resetting of the interface element. In this way, the electronic device can conveniently control the movement of the interface element based on the Bezier curve or the elastic force curve, so that the linkage animation effect is more consistent with the habit cognition of the user on the attractive force and the repulsive force in life, and the user experience is further improved. An example in which the electronic device controls the movement of the interface element in a certain direction based on the second-order bezier curve and an example in which the electronic device controls the reset of the interface element based on the elastic force curve will be described below with reference to fig. 24.

Fig. 24 (a) is a schematic diagram showing a time-dependent displacement curve of an interface element according to an embodiment of the present application as a bezier curve. In the displacement time chart shown in fig. 24 (a), the abscissa represents time and the ordinate represents displacement (or distance). In some embodiments, the interpolator used to control the movement of the interface element may use a common curve interpolator.

Specifically, the electronic device can achieve different movement effects of the interface element by selecting two second-order points of the second-order bezier curve. In this way, the interaction of the displacement time profile with time will produce a rhythmic feel of motion. The electronic device adjusts the displacement time profile so that the interface element accelerates and decelerates, rather than moving at a constant rate.

It should be noted that, in the embodiments of the present application, only the second-order bezier curves are used as the displacement time curves to describe some examples, but the embodiments of the present application are not limited thereto, and any curve form may be equivalently used as the displacement time curves to implement the movement of the interface element. For example, such curve forms include, but are not limited to, first order Bezier curves, third or higher order Bezier curves, other known or future discovered curve forms, or straight lines.

Fig. 24 (b) is a schematic diagram showing that the displacement-versus-time profile of the interface element according to the embodiment of the present application is a critical damping elastic force profile. In general, the elastic force curve may use different states in different operating scenarios, i.e. critical damping, under-damping and over-damping. The elastic force curves for displacement times may be different in different damping states. Specifically, three cases are as follows: the square of the damping is equal to 4 times the mass times the stiffness, which is the critical damping. Further, if the damping is large, the damping is excessive, and if the rigidity is large, the damping is insufficient. In particular, a square of damping less than 4 times the mass times the stiffness is under-damped, while a square of damping greater than 4 times the mass times the stiffness is over-damped. In the displacement time chart shown in fig. 24 (b), the abscissa represents time and the ordinate represents displacement (or distance). It should be appreciated that while (b) in fig. 24 depicts the displacement time curve of the interface element reset of the present embodiment as a critical damped elastic force curve by way of example, the present embodiment is not limited thereto, but is equally applicable to any other curve, such as an under damped elastic force curve as shown in (c) in fig. 24 or an over damped elastic force curve as shown in (d) in fig. 24.

In some embodiments, the elastic engine difference value is set as follows:

implementation of code classes:

1.SpringInterpolator(float stiffness,float damping)

2.SpringInterpolator(float stiffness,float damping,float endPos)

3.SpringInterpolator(float stiffness,float damping,float endPos,float velocity)

4.SpringInterpolator(float stiffness,float damping,float endPos,float velocity,float valueThreshold)

calling distance:

1.PhysicalInterpolatorBase interpolator＝new SpringInterpolator(400F,40F,200F,2600F,1F)；

2.ObjectAnimator animator＝ObjectAnimator.ofFloat(listView,“translationY”,0,346)

3.animator.setDuration(interpolator.getDuration())；

4.animator.setInterpolator(interpolator)；

5.animator.start()；

spring engine animation class:

animation class instance:

1.HWSpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float startValue,float endValue,float velocity)

2.HWSpringAnimation(K object,FloatPropertyCompat<K>property,float stiffness,float damping,float endValue,float velocity)

animation class call instance:

1.HWSpringAnimation animation＝HWSpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；

2.animation.start()；

fig. 25 is a schematic diagram showing a relationship between an interface switching frame and an application side associated with an animation effect of interface switching according to an embodiment of the present application, where an interface switched by an electronic device may be a system interface or an interface of a third party application. As shown in fig. 25, interface switch frame 2501 may provide animation effect capabilities. Interface switch framework 2501 may take the form of AAR 2502, JAR 2503, and system interface 2504. The application side may use the animation effect provided by the interface switch framework 2501 by way of integration 2505 and/or invocation 2507. That is, interface switch framework 2501 may take the form of AAR, JAR, system interfaces to provide the capability of animation effects, and after integration of application 2506, may apply various scenarios as desired in the field.

FIG. 26 illustrates a schematic diagram of a system framework for implementing animation effect capabilities or functions, according to an embodiment of the present application. In some embodiments, the active capability of the linkage framework is implemented based on the overall architecture of the operating system (e.g., android or hong-and-mong) of the electronic device, which may include mainstream 4-layer logic processing, with the flow of data processing presented to the user from the bottom layer up. The user can use and experience the dynamic function mainly at the application layer. In an embodiment of the present application, the interaction of the interface and the capabilities of the linkage frame is depicted in FIG. 26. In particular, as shown in FIG. 26, the system framework may include an application layer 2610, an application framework layer 2630, a hardware abstraction layer 2650, and a kernel layer 2670. The application layer 2610 may include applications 2612. Interface switch 2614 may be performed in an application. The application framework layer 2630 may include system services 2632 and extension services 2634. The system services 2632 may include various system services, such as Service 2633. The extension service 2634 may include various extension services such as HwSDK 2635. The Hardware Abstraction Layer (HAL) 2650 may include HAL3.0 2652 and algorithm 2654, and embodiments of the present application are not limited to algorithms. The kernel layer 2670 may include a driver 2672 and a physical device 2674. Physical device 2674 may provide the raw parameter stream to driver 2672, and driver 2672 may provide the functional process parameter stream to physical device 2674. As further shown in fig. 26, a linkage framework 2626 for implementing the interface switch framework 2625 may be implemented between the application layer 2610 and the application framework layer 2630. The UI framework 2626 may include platform capabilities 2622 and system capabilities 2624, both of which may be used to provide an interface switch framework 2625. The interface switch framework 2625 may in turn provide interface switches 2614 to the application layer 2610.

FIG. 27 shows a schematic diagram of a specific illustration of three ways of animation effect capability or function implementation of interface switching, according to an embodiment of the present application. As shown in fig. 27, the relationship 2702 between the AAR format 2701 and the system of the electronic device is: AAR format 2701 is packaged in binary form of capability, providing the capability for application-side integration in the system, allowing free control of version cadence, not following the system. The relationship 2704 between JAR format 2703 and the system of the electronic device is: JAR format 2703 is packaged in binary form of capability, providing all components in the system with the capability to freely control the version cadence and not follow the system. The relationship 2706 between the system interface 2705 and the system of the electronic device is: the system interface 2705 is an interface to the framework layer in the system version, providing the capability for all components in the system, following the system upgrade. More specifically, the integration mode may refer to the mode of AAR and JAR packets, and the calling mode may refer to the mode of system interface. Therefore, the scenes applied in the embodiments of the present application are not limited to any specific scene, but the display manner of the capability of the animation effect of the interface switching may not be consistent. That is, the functions of the various methods described herein before may be implemented by AAR format files, JAR format files, and/or system interfaces of electronic devices. In this way, the capabilities or functionality of the animation effect of the interface switch may be simply and conveniently implemented and provided to the application of the electronic device.

The following will describe relevant settings of the interface switch framework according to the embodiments of the present application.

Table 1 is a model table provided in the examples of the present application.

Table 2 linkage model table

The interface switching framework in the embodiment of the application can comprise a plurality of models, wherein the custom models can be customized by a developer, and the developer can influence movement of interface elements through the custom models.

For example, if the interface switching frame includes an attraction model and a friction model, the electronic device may determine the animation effect of the interface element based on the "attraction" and "friction" of the interface element when performing the interface switching to determine the animation effect of the interface element.

Table 2 shows animation effect parameters provided in embodiments of the present application.

TABLE 2 animation parameters table

Sequence number	Animation parameters
		1	Refresh frequency
2	Screen size
		3	Screen ratio
4	Performance of
		5	Duration of time
6	Interpolation device
		7	Range of variation amplitude
8	Custom

In the embodiment of the application, the animation parameters can be changed to adjust the implementation details of the animation effect, for example, the screen of the electronic device is large, and the variation range of the animation effect can be increased, so that the user can see the details of the animation effect clearly.

It should be noted that the above animation parameter table is only an example, and the animation parameters in the embodiments of the present application may include some or all of the above parameters, and may also include other parameters, such as screen materials.

The embodiment of the application also provides different parameter settings for different linkage models.

For example, table 3 shows the parameter configuration of the attraction model.

Table 3 gravitation model parameter table

Sequence number	Animation parameters
		1	Time
2	Range
		3	Influence factor
4	Size and dimensions of

Wherein the time parameter may indicate the time at which the "attraction" is generated. The range parameter may indicate a range of "attraction forces". The influence factor may influence the magnitude of the "attraction force", the range parameter, the time parameter, etc., for example, the influence factor may be the distance between the interface elements, the size of the interface elements, etc., as shown above.

In some embodiments, in the embodiments of the present application, other linkage models may be quantized into influence factors, so that the electronic device may change parameters in the gravity model through the influence factors, and further determine the animation effect of the interface element.

The electronic equipment determines the moving animation effect of the interface element when performing interface switching, can determine the related setting of the interface switching frame, and then analyzes the related setting in the interface switching frame to determine the animation effect of the interface element, thereby completing the interface switching.

The animation effect of the interface element during interface switching is introduced, the application scene of interface switching, the setting of the interface switching frame and the like are described, and the schematic flow chart of the interface display method provided by the embodiment of the application is described below.

Fig. 28 shows a schematic flowchart of a display method of interface switching provided in an embodiment of the present application, as shown in fig. 28, where the method includes:

s2801, a first interface is displayed.

For example, the electronic device may display a first interface that includes M interface elements, M.gtoreq.1 and is an integer.

For example, as shown in FIG. 5, the electronic device may display an interface 501 and display a plurality of interface elements on the interface 501.

S2802, an operation of switching the second interface by the user is detected.

For example, the electronic device may detect an operation of the user to switch the second interface.

For example, as shown in (a) of fig. 16, the electronic device detects an operation of the user clicking on the interface element 1602.

As another example, as shown in (a) of fig. 17, the electronic apparatus detects an operation of the user to slide left.

It should be noted that, in the embodiment of the present application, the manner of switching the operation of the second interface is not limited, for example, the user may also switch the second interface through a blank gesture, a voice command, or the like.

The second interface is a switched interface, wherein the second interface comprises N interface elements, and N is more than or equal to 1 and is an integer.

S2803, in response to a user operation, determining a first linkage switching animation effect according to the M interface elements and the N interface elements.

In some embodiments, the electronic device determines a first main interface element and a position of the first main interface element from the M interface elements; determining the positions of a second main interface element, N-1 second secondary interface elements and the second main interface element according to the N interface elements; determining an animation effect of the second main interface element according to the position of the first main interface element and the position of the second main interface element; and determining the animation effect of each of the N-1 secondary interface elements according to the second main interface element and each of the N-1 secondary interface elements.

For example, as shown in fig. 9, the electronic device determines the interface element 905 in the interface 901, the interface element 908 in the interface 907 as the main interface element. In the process of switching from the interface 901 to the interface 907, the main interface element moves from the position at the interface 901 to the position at the interface 907, and then the electronic device may determine the animation effect of the interface element 908, that is, the movement track and the movement speed, where the movement track may be a curve or a straight line, and the movement speed may be preset. The other interface elements in the interface 907 are secondary interface elements, the positions of the secondary interface elements in the interface 907 are determined, and when the secondary interface elements move to the determined positions, the moving track and the moving speed of the secondary interface elements can be changed due to the influence of the interface elements 908, namely, the animation effect can be changed.

In some embodiments, determining the animation effect for each of the N-1 secondary interface elements from the second primary interface element and each of the N-1 secondary interface elements comprises:

and determining the animation effect of each secondary interface element according to the first interface switching parameters.

The first interface switching parameter comprises at least one of: the size of the second main interface element, the size of each secondary interface element, the distance between the second main interface element and each secondary interface element, the limiting parameters of each secondary interface element, the animation effect of the second main interface element. The limiting parameter of each secondary interface element may be understood as a parameter set by the electronic device to limit movement of each secondary interface element. For example, the limiting parameter for each secondary interface element may be the "friction" and/or "gravity" of each secondary interface element.

For example, if the first interface switching parameter is a distance between the second main interface element and each secondary interface element, the electronic device determines an animation effect of each secondary interface element according to the distance between the second main interface element and each secondary interface element.

For example, as shown in fig. 9, since the distance between the interface element 908 and the interface element 910 is smaller than the distance between the interface element 908 and the interface element 911, the movement speed of the interface element 910 may be greater than the movement speed of the interface element 911, and the curvature of the movement trajectory of the interface element 910 may be greater than the curvature of the movement trajectory of the interface element 911.

For example, if the first interface switching parameter is an animation effect of the second main interface element, the electronic device may determine the animation effect of each secondary interface element according to the animation effect of the second main interface element and each secondary interface element.

For example, as shown in fig. 9, after determining the animation effect of the second main interface element, that is, determining the movement track and the movement speed of the second main interface element, the electronic device may make the curvature of the movement track of the secondary interface element identical to the curvature of the movement track of the second main interface element, and the movement speed of the secondary interface element identical to the movement speed of the second main interface element.

It should be understood that the foregoing is merely an example, and the specific description of the first interface switching parameter may be referred to above, which is not repeated herein.

In some embodiments, the electronic device determining the first main interface element and the position of the first main interface element from the M interface elements includes:

The electronic equipment determines a first main interface element and the position of the first main interface element according to the visual center of the first interface;

the electronic device determining the second main interface element and the position of the second main interface element according to the N interface elements, including:

the electronic device determines the second main interface element and the position of the second main interface element according to the visual center of the second interface.

In some embodiments, the electronic device determining an animation effect of the second main interface element from the position of the first main interface element and the position of the second main interface element comprises:

and the electronic equipment determines the moving track of the second main interface element and the moving speed of the second main interface according to the position of the first main interface element and the position of the second main interface element.

In some embodiments, the method further comprises:

the electronic equipment determines M-1 secondary interface elements according to the M interface elements;

the electronic device determines the animation effect of each secondary interface element of the N-1 secondary interface elements according to the second main interface element and each secondary interface element of the N-1 secondary interface elements, and the animation effect comprises the following steps:

and the electronic equipment determines the animation effect of each secondary interface element in the N-1 secondary interface elements according to the second main interface element, each secondary interface element in the N-1 secondary interface elements and each interface element in the M-1 secondary interface elements.

For example, when the electronic device switches from the first interface to the second interface, the N-1 secondary interface element initial positions may be set to the positions of one or more of the M-1 secondary interface elements at the first interface.

In some embodiments, in response to an operation, determining a ganged switching animation effect from the M interface elements and the N interface elements, comprising:

dividing M interface elements and N interface elements into L types of interface elements, wherein L is more than or equal to 1 and is an integer; determining the position of each type of interface element of the L types of interface elements in the first interface and the second interface; determining a first set of locations at the second interface element, the first set of locations including any one or more locations in the second interface; and determining the animation effect of the N interface elements according to the first position set, the position of each type of interface element on the first interface and the position of each type of interface element on the second interface.

In some embodiments, the one or more locations included in the first set of locations are locations corresponding to one or more of the N interface elements at the second interface.

For example, as shown in fig. 8, the electronic device divides interface elements in interface 801 and interface 806 into 4 types of interface elements. The electronic device may determine the positions of the 4 types of interface elements on the interface 801 and the interface 806, and determine a first position set, where the position in the first position set is a center point of occurrence of "attraction force", and the position in the first position set may be a fixed position or a moving position, as shown in fig. 8, where the position of the interface element of the type #3 on the interface 806 is the first position, or where a corresponding position is the first position during the movement of the interface element of the type # 3. After determining the "attraction" send center point, i.e., the first location, the electronic device can move 4 types of interface elements from the location at interface 801 to the location at interface 806. For brevity, the description of movement of the interface element may be referred to above, and will not be repeated here.

Optionally, in some embodiments, determining the animation effect of the N interface elements according to the first location, the location of each type of interface element at the first interface, and the location of each type of interface element at the second interface includes:

and determining animation effects of the N interface elements according to the second interface switching parameters.

The second interface switching parameter comprises at least one of: the size of the one or more interface elements, the size of each type of interface element, the distance between one or more locations in the first set of locations and each type of interface element, the constraint parameter of each type of interface element, the animation effect of the first interface element. The limiting parameter of each type of interface element may be understood as a parameter set by the electronic device to limit movement of each type of interface element. For example, the limiting parameter for each type of interface element may be the "friction" and/or "gravity" of each type of interface element.

For example, if the second interface switching parameter is a distance between the first location and each type of interface element, the electronic device determines an animation effect of each type of interface element according to the distance between the first location and each type of interface element.

For example, as shown in fig. 11, taking the position of the interface element of the type #1 at the interface 1104 as the first position as an example, if the distance between the interface element of the type #2 and the first position is changed from d1 to d2, the curvature of the movement track of the interface element of the type #2 may be reduced, and the movement speed may be reduced.

For example, if the second interface switching parameter is an animation effect of the first interface element, the electronic device may determine the animation effect of each type of interface element according to the animation effect of the first interface element and each type of interface element.

For example, as shown in fig. 8, taking the first interface element as the interface element of the type #3 as an example, if the movement speed of the interface element of the type #3 increases, the speeds of the interface element of the type #1, the interface element of the type #2, and the interface element of the type #3 may also increase.

It should be understood that the foregoing is merely an example, and the specific description of the second interface switching parameter may be referred to above, which is not repeated herein.

In some embodiments, dividing the M interface elements and the N interface elements into L types of interface elements includes:

and dividing the M interface elements and the N interface elements into L types of interface elements according to the similarity.

In some embodiments, the similarity includes color similarity, size similarity, shape similarity.

determining the positions of M interface elements on a first interface and the positions of N interface elements on a second interface;

and dividing the M interface elements and the N interface elements into L types of interface elements according to the positions of the M interface elements on the first interface and the positions of the N interface elements on the second interface.

determining labels of M interface elements and N interface elements;

and dividing the M interface elements and the N interface elements into L types of interface elements according to the labels of the M interface elements and the N interface elements.

It should be appreciated that the description of dividing the M and interface elements and the N interface elements into L types of interface elements may be taken from above, and will not be repeated here for brevity.

And S2804, switching the first interface to the second interface according to the first linkage switching animation effect.

After determining the first linkage switching animation effect, the electronic device can switch the first interface to the second interface, wherein the switching animation of the interface, namely the GUI shown in fig. 16 and 17 and the switching animation of the interface element are included.

In some embodiments, the displacement time curves of the N interface elements are bezier curves or elastic force curves.

In some embodiments, the method further comprises:

if the type of the electronic equipment is detected to be changed from the first type to the second type, switching the first interface switching effect to the second interface switching effect;

switching the first interface to the second interface according to the first linkage switching animation effect, including:

and switching the first interface to the second interface according to the second linkage switching animation effect.

The embodiment of the application also provides electronic equipment which comprises functional modules for realizing the steps involved in the embodiment of the method. It should be noted that, all relevant contents of each step related to the above method embodiment may be cited to the functional description of the corresponding functional module, which is not described herein. The electronic device provided by the embodiment of the application is used for executing the method for displaying the interface, so that the same effect as the above can be achieved.

The embodiment of the application also provides electronic equipment, which comprises: processor, memory, application program, and computer program. The devices described above may be connected by one or more communication buses. Wherein the one or more computer programs are stored in the memory and configured to be executed by the one or more processors, the one or more computer programs comprising instructions that can be used to cause the electronic device to perform the steps of the electronic device in the embodiments described above.

The processor may be, for example, the processor 110 shown in fig. 1, and the memory may be, for example, the internal memory 120 shown in fig. 1 and/or an external memory connected to the electronic device.

The embodiment of the application also provides a chip, which comprises a processor and a communication interface, wherein the communication interface is used for receiving signals and transmitting the signals to the processor, and the processor processes the signals so that the interface display method as described in any one of the possible implementation modes is executed.

The present embodiment also provides a computer-readable storage medium having stored therein computer instructions that, when executed on an electronic device, cause the electronic device to perform the above-described related method steps to implement the method for displaying an interface in the above-described embodiments.

The present embodiment also provides a computer program product which, when run on a computer, causes the computer to perform the above-described relevant steps to implement the method of interface display in the above-described embodiments.

As used in the above embodiments, the term "when …" or "after …" may be interpreted to mean "if …" or "after …" or "in response to determination …" or "in response to detection …" depending on the context. Similarly, the phrase "at the time of determination …" or "if detected (a stated condition or event)" may be interpreted to mean "if determined …" or "in response to determination …" or "at the time of detection (a stated condition or event)" or "in response to detection (a stated condition or event)" depending on the context.

Those of ordinary skill in the art will appreciate that the various illustrative elements and algorithm steps described in connection with the embodiments disclosed herein may be implemented as electronic hardware, or combinations of computer software and electronic hardware. Whether such functionality is implemented as hardware or software depends upon the particular application and design constraints imposed on the solution. Skilled artisans may implement the described functionality in varying ways for each particular application, but such implementation decisions should not be interpreted as causing a departure from the scope of the present application.

It will be clear to those skilled in the art that, for convenience and brevity of description, specific working procedures of the above-described systems, apparatuses and units may refer to corresponding procedures in the foregoing method embodiments, and are not repeated herein.

In the several embodiments provided in this application, it should be understood that the disclosed systems, devices, and methods may be implemented in other manners. For example, the apparatus embodiments described above are merely illustrative, e.g., the division of the units is merely a logical function division, and there may be additional divisions when actually implemented, e.g., multiple units or components may be combined or integrated into another system, or some features may be omitted or not performed. Alternatively, the coupling or direct coupling or communication connection shown or discussed with each other may be an indirect coupling or communication connection via some interfaces, devices or units, which may be in electrical, mechanical or other form.

The units described as separate units may or may not be physically separate, and units shown as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

In addition, each functional unit in each embodiment of the present application may be integrated in one processing unit, or each unit may exist alone physically, or two or more units may be integrated in one unit.

The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a computer-readable storage medium. Based on such understanding, the technical solution of the present application may be embodied essentially or in a part contributing to the prior art or in a part of the technical solution, in the form of a software product stored in a storage medium, including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to perform all or part of the steps of the methods described in the embodiments of the present application. And the aforementioned storage medium includes: a U-disk, a removable hard disk, a Read-Only Memory (ROM), a random access Memory (Random Access Memory, RAM), a magnetic disk, or an optical disk, or other various media capable of storing program codes.

The foregoing is merely specific embodiments of the present application, but the scope of the present application is not limited thereto, and any person skilled in the art can easily think about changes or substitutions within the technical scope of the present application, and the changes and substitutions are intended to be covered by the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.

Claims

1. The display method for interface switching is characterized by comprising the following steps:

the electronic equipment displays a first interface, wherein the first interface comprises M interface elements, and M is more than or equal to 1 and is an integer;

the electronic equipment detects operation of switching a second interface by a user, wherein the second interface comprises N interface elements, and N is more than or equal to 1 and is an integer;

the electronic equipment responds to the operation, and a first linkage switching animation effect is determined according to the M interface elements and the N interface elements;

and the electronic equipment switches the first interface to the second interface according to the first linkage switching animation effect.

2. The method of claim 1, wherein the electronic device determining a first ganged switching animation effect from the M interface elements and the N interface elements in response to the operation comprises:

the electronic equipment determines a first main interface element and the position of the first main interface element according to the M interface elements;

the electronic equipment determines a second main interface element, the position of the second main interface element and N-1 secondary interface elements according to the N interface elements;

the electronic equipment determines the animation effect of the second main interface element according to the position of the first main interface element and the position of the second main interface element;

And the electronic equipment determines the animation effect of each secondary interface element in the N-1 secondary interface elements according to the second main interface element and each secondary interface element in the N-1 secondary interface elements.

3. The method of claim 2, wherein the electronic device determining the animation effect for each of the N-1 secondary interface elements from the second primary interface element and each of the N-1 secondary interface elements comprises:

the electronic device determines the animation effect of each secondary interface element according to a first interface switching parameter, wherein the first interface switching parameter comprises at least one of the following: the size of the second main interface element, the size of each secondary interface element, the distance between the second main interface element and each secondary interface element, the limiting parameter of each secondary interface element and the animation effect of the second main interface element.

4. A method according to claim 2 or 3, wherein the electronic device determining a first main interface element and a position of the first main interface element from the M interface elements comprises:

The electronic equipment determines the first main interface element and the position of the first main interface element according to the visual center of the first interface;

the electronic device determining a second main interface element and a position of the second main interface element according to the N interface elements, including:

and the electronic equipment determines the positions of the second main interface element and the second main interface element according to the visual center of the second interface.

5. The method of any one of claims 2 to 4, wherein the animation effect of each secondary interface element comprises a movement trajectory of the each secondary interface element and/or a movement speed of the each secondary interface element, wherein the movement trajectory of the each secondary interface element is curved.

6. The method of any of claims 2 to 5, wherein the electronic device determining an animation effect of a second main interface element from the position of the first main interface element and the position of the second main interface element comprises:

7. The method according to any one of claims 2 to 6, further comprising:

the electronic device determining an animation effect of each of the N-1 secondary interface elements according to the second primary interface element and each of the N-1 secondary interface elements, including:

the electronic equipment determines the animation effect of each secondary interface element in the N-1 secondary interface elements according to the second main interface element, each secondary interface element in the N-1 secondary interface elements and each secondary interface element in the M-1 secondary interface elements.

8. The method of claim 1, wherein the electronic device determining a first ganged switching animation effect from the M interface elements and the N interface elements in response to the operation comprises:

the electronic equipment divides the M interface elements and the N interface elements into L types of interface elements, wherein L is more than or equal to 1 and is an integer;

the electronic device determines the position of each type of interface element of the L types of interface elements on the first interface and the second interface;

The electronic device determining a first set of locations in the second interface, the first set of locations including any one or more locations in the second interface;

and the electronic equipment determines the animation effect of the N interface elements according to the first position set, the position of each type of interface element on the first interface and the position of each type of interface element on the second interface.

9. The method of claim 8, wherein the one or more locations included in the first set of locations are locations corresponding to one or more of the N interface elements at the second interface.

10. The method of claim 9, wherein the electronic device determining the animation effects of the N interface elements based on the first set of positions, the position of each type of interface element at the first interface, and the position of each type of interface element at the second interface comprises:

the electronic device determines animation effects of the N interface elements according to second interface switching parameters, wherein the second interface switching parameters comprise at least one of the following: the size of the one or more interface elements, the size of each type of interface element, the distance between one or more locations in the first set of locations and each type of interface element, the constraint parameters of each type of interface element, the animation effect of the first interface element.

11. The method of any of claims 8 to 10, wherein the electronic device divides the M interface elements and the N interface elements into L types of interface elements, comprising:

the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the similarity.

12. The method of claim 11, wherein the similarity comprises color similarity, size similarity, shape similarity.

13. The method of any of claims 8 to 10, wherein the electronic device divides the M interface elements and the N interface elements into L types of interface elements, comprising:

the electronic equipment determines the positions of the M interface elements on the first interface and the positions of the N interface elements on the second interface;

the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the positions of the M interface elements on the first interface and the positions of the N interface elements on the second interface.

14. The method of any of claims 8 to 10, wherein the electronic device divides the M interface elements and the N interface elements into L types of interface elements, comprising:

The electronic equipment determines labels of the M interface elements and the N interface elements;

the electronic device divides the M interface elements and the N interface elements into L types of interface elements according to the labels of the M interface elements and the N interface elements.

15. The method according to any one of claims 1 to 14, wherein the displacement time curves of the N interface elements are bezier curves or elastic force curves.

16. The method according to any one of claims 1 to 15, wherein the method is implemented by at least one of an AAR format file, a JAR format file or a system interface of the electronic device.

17. The method according to any one of claims 1 to 16, further comprising:

if the type of the electronic equipment is detected to be changed from the first type to the second type, switching the first linkage switching effect to a second linkage switching effect;

the electronic device switching the first interface to the second interface according to the first linkage switching animation effect, including:

and the electronic equipment switches the first interface to the second interface according to the second linkage switching animation effect.

18. An electronic device, comprising: a module for implementing the method of any one of claims 1 to 17.

19. An electronic device comprising one or more processors; one or more memories; the one or more memories store one or more computer programs comprising instructions that, when executed by the one or more processors, cause the method of any of claims 1-17 to be performed.

20. A chip comprising a processor and a communication interface for receiving signals and transmitting the signals to the processor, the processor processing the signals such that the method of any of claims 1 to 17 is performed.

21. A computer readable storage medium having stored therein computer instructions which, when run on a computer, cause the method of any of claims 1 to 17 to be performed.

22. A computer program product comprising instructions which, when run on a computer, cause the computer to perform the method of any of claims 1 to 17.