WO2024017183A1 - 一种界面切换的显示方法以及电子设备 - Google Patents

一种界面切换的显示方法以及电子设备 Download PDF

Info

Publication number
WO2024017183A1
WO2024017183A1 PCT/CN2023/107679 CN2023107679W WO2024017183A1 WO 2024017183 A1 WO2024017183 A1 WO 2024017183A1 CN 2023107679 W CN2023107679 W CN 2023107679W WO 2024017183 A1 WO2024017183 A1 WO 2024017183A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
interface element
electronic device
type
elements
Prior art date
Application number
PCT/CN2023/107679
Other languages
English (en)
French (fr)
Inventor
卞超
Original Assignee
华为技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 华为技术有限公司 filed Critical 华为技术有限公司
Publication of WO2024017183A1 publication Critical patent/WO2024017183A1/zh

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces

Definitions

  • the present application relates to the field of electronic equipment, and more specifically, to a display method for interface switching and electronic equipment.
  • Embodiments of the present application provide a display method for interface switching and an electronic device, so that when the electronic device switches interfaces, multiple interface elements in the interface and interfaces before and after switching can be combined to achieve a linked animation effect.
  • a display method for interface switching which is characterized in that the method includes: an electronic device displays a first interface, the first interface includes M interface elements, M ⁇ 1 and is an integer; The device detects the user's operation of switching the second interface. The second interface includes N interface elements, N ⁇ 1 and is an integer; in response to the operation, the electronic device determines the third interface element based on the M interface elements and the N interface elements. A linkage switching animation effect; the electronic device switches the first interface to the second interface according to the first linkage switching animation effect.
  • the electronic device determines a first linkage switching animation effect based on the M interface elements and the N interface elements in response to the operation, including: the electronic device determines the first linkage switching animation effect according to The M interface elements determine the first main interface element and the position of the first main interface element; the electronic device determines the second main interface element, the position of the second main interface element, and N-1 based on the N interface elements.
  • the electronic device 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 the animation effect of the second main interface element according to the second main interface element and the N-1
  • Each of the sub-interface elements determines the animation effect of each of the N-1 sub-interface elements.
  • the electronic device determines the N-1 sub-interfaces based on the second main interface element and each of the N-1 sub-interface elements.
  • the animation effect of each sub-interface element in the element includes: the electronic device determines the animation effect of each sub-interface element according to a first interface switching parameter, wherein the first interface switching parameter includes at least one of the following: the The size of the second main interface element, the size of each sub-interface element, the distance between the second main interface element and each sub-interface element, the restriction parameters of each sub-interface element, the second main interface The animation effect of the element.
  • the electronic device determines the first main interface element and the position of the first main interface element according to the M interface elements, including: the electronic device determines the position of the first main interface element according to the first The visual center of the interface determines the position of the first main interface element and the first main interface element; the electronic device determines the position of the second main interface element and the second main interface element based on the N interface elements, including: the electronic device The 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.
  • the animation effect of each sub-interface element includes the movement trajectory of each sub-interface element and/or the movement speed of each sub-interface element, wherein the The movement trajectory of each secondary interface element is curved.
  • the electronic device determines the location of the first main interface element and the third The position of the second main interface element determines the animation effect of the second main interface element, including: the electronic device determines the movement trajectory 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 moving speed of the second main interface.
  • the method further includes: the electronic device determines M-1 sub-interface elements based on the M interface elements; the electronic device determines M-1 sub-interface elements based on the second main interface elements and Each of the N-1 sub-interface elements determines the animation effect of each of the N-1 sub-interface elements, including: the electronic device based on the second main interface element, the N Each of the -1 sub-interface elements and each of the M-1 sub-interface elements determine the animation effect of each of the N-1 sub-interface elements.
  • the electronic device determines a first linkage switching animation effect based on the M interface elements and the N interface elements, including: the electronic device will The M interface elements and the N interface elements are divided into L types of interface elements, where L ⁇ 1 and is an integer; the electronic device determines that each type of the L types of interface elements is in the first The positions of the interface and the second interface; the electronic device determines a first position set in the second interface, and the first position set includes any one or more positions in the second interface; the electronic device determines a first position set according to the second interface.
  • a 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 determine animation effects of the N interface elements.
  • the first position set includes one or more positions corresponding to one or more interface elements among the N interface elements in the second interface. .
  • the electronic device determines the location of each type of interface element on the first interface according to the first location set, and the location of each type of interface element on the first interface.
  • the position of the second interface determines the animation effects of the N interface elements, including: the electronic device determines the animation effects of the N interface elements according to a second interface switching parameter, wherein the second interface switching parameter includes 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 positions in the first position set and the each type of interface element, the size of each type of interface element
  • the restriction parameters of the interface element and the animation effect of the first interface element are examples of the first interface element.
  • 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 similarity.
  • the M interface elements and the N interface elements are divided into L types of interface elements.
  • the similarity includes color similarity, size similarity, and shape similarity.
  • the electronic device divides the M interface elements and the N interface elements into L types of interface elements, including: the electronic device determines the M interfaces The position of the element on the first interface and the position of the N interface elements on the second interface; the electronic device is based on the position of the M interface elements on the first interface and the position of the N interface elements on the second interface. The position divides the M interface elements and the N interface elements into L types of interface elements.
  • the electronic device divides the M interface elements and the N interface elements into L types of interface elements, including: the electronic device determines the M interfaces elements and labels of the N interface elements; the electronic device divides the M interface elements and the N interface elements into L types of interface elements based on the labels of the M interface elements and the N interface elements.
  • the displacement time curves of the N interface elements are Bezier curves or elastic force curves.
  • the method is implemented through at least one of an AAR format file, a JAR format file, or a system interface of the electronic device.
  • the method further includes: if it is detected that the type of the electronic device changes from the first type to the second type, switching the first linkage switching effect to the second Linkage switching effect; the electronic device switches the first interface to the second interface according to the first linkage switching animation effect, including: the electronic device switches the first interface to the second interface according to the second linkage switching animation effect interface.
  • the second aspect is an electronic device according to an embodiment of the present application.
  • the electronic device includes modules/units that perform the above aspects or any possible design method of the above aspects; these modules/units can be implemented by hardware, or can The corresponding software implementation is executed through hardware.
  • the third aspect is a chip according to an embodiment of the present application.
  • the chip is coupled to a memory in an electronic device and is used to call a computer program stored in the memory and execute the above aspects of the embodiments of the present application and any possible design of the above aspects.
  • Technical solution; implementation of this application In this example, "coupled” means that two components are combined with each other, either directly or indirectly.
  • the fourth aspect is a computer-readable storage medium according to an embodiment of the present application.
  • the computer-readable storage medium includes a computer program. When the computer program is run on an electronic device, it causes the electronic device to perform the above aspects and the above aspects. Any possible technical solution.
  • the fifth aspect is a computer program according to an embodiment of the present application.
  • the computer program includes instructions. When the instructions are run on a computer, the computer executes the above aspect and any possible technical solution designed by the above aspect.
  • the sixth aspect is a graphical user interface on an electronic device according to an embodiment of the present application.
  • the electronic device has a display screen, one or more memories, and one or more processors.
  • the one or more processors are used to execute One or more computer programs stored in the one or more memories, the graphical user interface includes a graphical user interface displayed when the electronic device executes the above aspect and any possible designed technical solution of the above aspect.
  • the seventh aspect is an electronic device according to an embodiment of the present application.
  • the electronic device includes one or more processors; one or more memories; the one or more memories store one or more computer programs, and the one or more A plurality of computer programs include instructions that, when executed by the one or more processors, cause the electronic device to perform the technical solutions of the above aspects and any possible design of the above aspects.
  • FIG. 1 is a schematic structural diagram of an electronic device provided by an embodiment of the present application.
  • FIG. 2 is a software structure block diagram of an example of an electronic device provided by an embodiment of the present application.
  • FIG. 3 is a schematic diagram of the direction of “gravity” when the interface element according to the embodiment of the present application is affected by “gravity”.
  • Figure 4 is a schematic diagram of the movement of interface elements affected by "gravity" provided by an embodiment of the present application.
  • FIG. 5 is a schematic diagram of dividing interface elements into main interface elements and secondary interface elements according to an embodiment of the present application.
  • FIG. 6 is a schematic diagram illustrating the classification of types of interface elements according to their positions in the interface provided by an embodiment of the present application.
  • FIG. 7 is a schematic diagram illustrating the classification of types of interface elements according to their labels according to an embodiment of the present application.
  • Figure 8 is a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • Figure 9 is a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • Figure 10 is a schematic diagram of determining the distance between interface elements provided by an embodiment of the present application.
  • Figure 11 is a schematic diagram of the animation effect when switching interface elements at different distances provided by an embodiment of the present application.
  • Figure 12 is a schematic diagram of the animation effect when interface elements of different sizes are switched according to the embodiment of the present application.
  • Figure 13 is a schematic diagram of a displacement time curve provided by an embodiment of the present application.
  • Figure 14 is a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • Figure 15 is a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • Figure 16 is a schematic diagram of an interface switching form provided by an embodiment of the present application.
  • Figure 17 is a schematic diagram of another form of interface switching provided by an embodiment of the present application.
  • Figure 18 is a schematic diagram of another form of interface switching provided by an embodiment of the present application.
  • Figure 19 is a set of GUI provided by the embodiment of the present application.
  • Figure 20 is a set of GUIs provided by an embodiment of the present application.
  • Figure 21 is a set of GUIs provided by the embodiment of the present application.
  • Figure 22 is a set of GUIs provided by an embodiment of the present application.
  • Figure 23 is a schematic diagram of the animation process and related control logic of the animation effect of interface switching according to the embodiment of the present application.
  • Figure 24 is a schematic diagram of a displacement time curve provided by an embodiment of the present application.
  • Figure 25 is a schematic diagram of the relationship between the interface switching framework and the application side associated with the animation effect of interface switching according to the embodiment of the present application.
  • Figure 26 is a schematic diagram of a system framework for realizing animation effect capabilities or functions according to an embodiment of the present application.
  • Figure 27 is a schematic diagram illustrating three ways of implementing the animation effect capability or function of interface switching according to the embodiment of the present application.
  • Figure 28 is a schematic flowchart of a display method for interface switching provided by an embodiment of the present application.
  • the electronic device may be a portable electronic device that also includes other functions such as a personal digital assistant and/or a music player function, such as a mobile phone, a tablet computer, a wearable electronic device with wireless communication functions (such as a smart watch) wait.
  • portable electronic devices include, but are not limited to, carrying Or portable electronic devices with other operating systems.
  • the above-mentioned portable electronic device may also be other portable electronic devices, such as a laptop computer (Laptop). It should also be understood that in some other embodiments, the above-mentioned electronic device may not be a portable electronic device, but a desktop computer.
  • FIG. 1 shows a schematic structural 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 (USB) interface 130, a charging management module 140, a power management module 141, a battery 142, an antenna 1, an antenna 2 , mobile communication module 150, wireless communication module 160, audio module 170, speaker 170A, receiver 170B, microphone 170C, headphone interface 170D, sensor module 180, compass 190, motor 191, indicator 192, camera 193, display screen 194, and Subscriber identification module (SIM) card interface 195, etc.
  • SIM Subscriber identification module
  • the structure illustrated in the embodiment of the present application does not constitute a specific limitation on the electronic device 100 .
  • the electronic device 100 may include more or fewer components than shown in the figures, or some components may be combined, some components may be separated, or some components may be arranged differently.
  • the components illustrated may be implemented in hardware, software, or a combination of software and hardware.
  • the processor 110 may include one or more processing units.
  • the processor 110 may include an application processor (application processor, AP), a modem processor, a graphics processing unit (GPU), and an image signal processor. (image signal processor, ISP), controller, video codec, digital signal processor (digital signal processor, DSP), baseband processor, and/or neural network processor (neural-network processing unit, NPU), etc.
  • image signal processor, ISP image signal processor
  • controller video codec
  • digital signal processor digital signal processor
  • DSP digital signal processor
  • baseband processor baseband processor
  • neural network processor neural-network processing unit
  • NPU neural-network processing unit
  • different processing units can be independent components or integrated in one or more processors.
  • electronic device 100 may also include one or more processors 110 .
  • the controller can generate operation control signals based on the instruction operation code and timing signals to complete the control of fetching and executing instructions.
  • the processor 110 may also be provided with a memory for storing instructions and data.
  • the memory in processor 110 may be a cache memory. This memory may hold instructions or data that have been recently used or recycled by processor 110 . If the processor 110 needs to use the instructions or data again, it can be called directly from the memory. This avoids repeated access and reduces the waiting time of the processor 110, thereby improving the efficiency of the electronic device 100 in processing data or executing instructions.
  • processor 110 may include one or more interfaces. Interfaces may include inter-integrated circuit (I2C) interface, inter-integrated circuit sound (I2S) interface, pulse code modulation (PCM) interface, universal asynchronous receiver and transmitter (universal asynchronous receiver/transmitter (UART) interface, mobile industry processor interface (MIPI), general-purpose input/output (GPIO) interface, SIM card interface, and/or USB interface, etc.
  • I2C inter-integrated circuit
  • I2S inter-integrated circuit sound
  • PCM pulse code modulation
  • UART universal asynchronous receiver and transmitter
  • MIPI mobile industry processor interface
  • GPIO general-purpose input/output
  • SIM card interface SIM card interface
  • USB interface 130 is an interface that complies with USB standard specifications, and may specifically be a Mini USB interface, a Micro USB interface, a USB Type C interface, etc.
  • the USB interface 130 can be used to connect a charger to charge the electronic device 100, and can also be used to transmit data between the electronic device 100 and peripheral devices.
  • the interface connection relationships between the modules illustrated in the embodiments of the present application are only schematic illustrations and do not constitute a structural limitation of the electronic device 100 .
  • the electronic device 100 may also adopt different interface connection methods in the above embodiments, or a combination of multiple interface connection methods.
  • the charging management module 140 is used to receive charging input from the charger.
  • the charger can be a wireless charger or a wired charger.
  • the charging management module 140 may receive charging input from the wired charger through the USB interface 130 .
  • the charging management module 140 may receive wireless charging input through the wireless charging coil of the electronic device 100 . While the charging management module 140 charges the battery 142, it can also provide power to the electronic device through the power management module 141.
  • the power management module 141 is used to connect the battery 142, the charging management module 140 and the processor 110.
  • the power management module 141 receives input from the battery 142 and/or the charging management module 140, and supplies power to the processor 110, internal memory 121, external memory, display screen 194, camera 193, wireless communication module 160, etc.
  • the power management module 141 can also be used to monitor battery capacity, battery cycle times, battery health status (leakage, impedance) and other parameters.
  • the power management module 141 may also be provided in the processor 110 .
  • the power management module 141 and the charging management module 140 may also be provided in the same device.
  • the wireless communication function of the electronic device 100 can be implemented through the antenna 1, the antenna 2, the mobile communication module 150, the wireless communication module 160, the modem processor and the baseband processor.
  • Antenna 1 and Antenna 2 are used to transmit and receive electromagnetic wave signals.
  • Each antenna in electronic device 100 may be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve antenna utilization. For example: Antenna 1 can be reused as a diversity antenna for a wireless LAN. In other embodiments, antennas may be used in conjunction with tuning switches.
  • the mobile communication module 150 can provide solutions for wireless communication including 2G/3G/4G/5G applied on the electronic device 100 .
  • the mobile communication module 150 may include at least one filter, switch, power amplifier, low noise amplifier (LNA), etc.
  • the mobile communication module 150 can receive electromagnetic waves through the antenna 1, perform filtering, amplification and other processing on the received electromagnetic waves, and transmit them to the modem processor for demodulation.
  • the mobile communication module 150 can also amplify the signal modulated by the modem processor and convert it into electromagnetic waves through the antenna 1 for radiation.
  • at least part of the functional modules of the mobile communication module 150 may be disposed in the processor 110 .
  • at least part of the functional modules of the mobile communication module 150 and at least part of the modules of the processor 110 may be provided in the same device.
  • the wireless communication module 160 can provide applications on the electronic device 100 including wireless local area networks (WLAN) (such as wireless fidelity (WiFi) network), Bluetooth (bluetooth, BT), global navigation satellite system ( Global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (infrared, IR) and other wireless communication solutions.
  • WLAN wireless local area networks
  • Bluetooth blue, BT
  • GNSS Global navigation satellite system
  • FM frequency modulation
  • NFC near field communication
  • IR infrared technology
  • the wireless communication module 160 may be one or more devices integrating at least one communication processing module.
  • the wireless communication module 160 receives electromagnetic waves via the antenna 2 , frequency modulates and filters the electromagnetic wave signals, and sends the processed signals to the processor 110 .
  • the wireless communication module 160 can also receive the signal to be sent from the processor 110, frequency modulate it, amplify it, and convert it into electromagnetic waves through the antenna 2 for radiation.
  • the electronic device 100 implements display functions through a GPU, a display screen 194, an application processor, and the like.
  • the GPU is an image processing microprocessor and is connected to the display screen 194 and the application processor. GPUs are 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 alter display information.
  • the display screen 194 is used to display images, videos, etc.
  • Display 194 includes a display panel.
  • the display panel can use a liquid crystal display (LCD), an organic light-emitting diode (OLED), an active matrix organic light emitting diode or an active matrix organic light emitting diode (active-matrix organic light emitting diode).
  • LCD liquid crystal display
  • OLED organic light-emitting diode
  • AMOLED organic light-emitting diode
  • FLED flexible light-emitting diode
  • Miniled MicroLed, Micro-oLed, quantum dot light emitting diode (QLED), etc.
  • electronic device 100 may include one or more display screens 194.
  • the display screen 194 in FIG. 1 can be bent.
  • the above-mentioned display screen 194 can be bent means that the display screen 194 can be bent at any position to any angle and can be maintained at this angle.
  • the display screen 194 can be folded in half from the middle to the left and right. You can also fold it in half from the middle up and down.
  • the display screen 194 of the electronic device 100 may be a flexible screen.
  • flexible screens have attracted much attention due to their unique characteristics and huge potential.
  • flexible screens are more flexible and bendable. They can provide users with new interaction methods based on bendable features and can meet more users' needs for electronic devices.
  • the foldable display screen on the electronic device can be switched between a small screen in a folded form and a large screen in an unfolded form at any time. Therefore, users are using the split-screen function more and more frequently on electronic devices equipped with foldable displays.
  • the electronic device 100 can implement the shooting 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 the data fed back by the camera 193. For example, when taking a photo, you open the shutter and light is transmitted to the camera through the lens. On the photosensitive element, the optical signal is converted into an electrical signal, and the camera photosensitive element passes the electrical signal to the ISP for processing and converts it into an image visible to the naked eye. ISP can also perform algorithm optimization on image noise, brightness, and skin color. ISP can also optimize the exposure, color temperature and other parameters of the shooting scene. In some embodiments, the ISP may be provided in the camera 193.
  • Camera 193 is used to capture still images or video.
  • the object passes through the lens to produce an optical image that is projected onto the photosensitive element.
  • the photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor.
  • CMOS complementary metal-oxide-semiconductor
  • the photosensitive element converts the optical signal into an electrical signal, and then passes the electrical signal to the ISP to convert it into a digital image signal.
  • ISP outputs digital image signals to DSP for processing.
  • DSP converts digital image signals into standard RGB, YUV and other format image signals.
  • electronic device 100 may include one or more cameras 193 .
  • Digital signal processors are used to process digital signals. In addition to digital image signals, they can also process other digital signals. For example, when the electronic device 100 selects a frequency point, the digital signal processor is used to perform Fourier transform on the frequency point energy.
  • Video codecs are used to compress or decompress digital video.
  • Electronic device 100 may support one or more video codecs. In this way, the electronic device 100 can play or record videos in multiple encoding formats, such as moving picture experts group (MPEG) 1, MPEG2, MPEG3, MPEG4, etc.
  • MPEG moving picture experts group
  • MPEG2 MPEG2, MPEG3, MPEG4, etc.
  • NPU is a neural network (NN) computing processor.
  • NN neural network
  • the NPU can realize intelligent cognitive applications of the electronic device 100, such as image recognition, face recognition, speech recognition, text understanding, etc.
  • the external memory interface 120 can be used to connect an external memory card, such as a Micro SD card, to expand the storage capacity of the electronic device 100.
  • the external memory card communicates with the processor 110 through the external memory interface 120 to implement the data storage function. Such as saving music, videos, etc. files in external memory card.
  • Internal memory 121 may be used to store one or more computer programs including instructions.
  • the processor 110 can execute the above instructions stored in the internal memory 121 to cause the electronic device 100 to execute the methods provided in some embodiments of the present application, as well as various applications and data processing.
  • the internal memory 121 may include a program storage area and a data storage area. Among them, the stored program area can store the operating system; the stored program area can also store one or more applications (such as photo galleries, contacts, etc.). The storage data area may store data created during use of the electronic device 100 (such as photos, contacts, etc.).
  • the internal memory 121 may include high-speed random access memory, and may also include non-volatile memory, such as one or more disk storage components, flash memory components, universal flash storage (UFS), etc.
  • the processor 110 can cause the electronic device 100 to execute the instructions provided in the embodiments of the present application by executing instructions stored in the internal memory 121 and/or instructions stored in a memory provided in the processor 110 . methods, and other applications and data processing.
  • the electronic device 100 can implement audio functions through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone interface 170D, and the application processor. For example, music playback, recording, etc.
  • the sensor module 180 may include a pressure sensor 180A, a gyro sensor 180B, an air pressure sensor 180C, a magnetic sensor 180D, an acceleration sensor 180E, a distance sensor 180F, a proximity light sensor 180G, a fingerprint sensor 180H, a temperature sensor 180J, a touch sensor 180K, and an ambient light sensor. 180L, bone conduction sensor 180M, etc.
  • the pressure sensor 180A is used to sense the pressure signal and convert the pressure signal into an electrical signal.
  • pressure sensor 180A may be disposed on display screen 194 .
  • pressure sensors 180A such as resistive pressure sensors, inductive pressure sensors, capacitive pressure sensors, etc.
  • a capacitive pressure sensor may include at least two parallel plates of conductive material.
  • the electronic device 100 may also calculate the touched position based on the detection signal of the pressure sensor 180A.
  • touch operations acting on the same touch location but with different touch operation intensities may correspond to different operation instructions. For example: when a touch operation with a touch operation intensity less than the first pressure threshold is applied to the short message application icon, an instruction to view the short message is executed. When a touch operation with a touch operation intensity greater than or equal to the first pressure threshold is applied to the short message application icon, an instruction to create a new short message is executed.
  • the gyro sensor 180B may be used to determine the motion posture of the electronic device 100 .
  • the angular velocity of electronic device 100 about three axes ie, X, Y, and Z axes
  • the gyro sensor 180B can be used for image stabilization. For example, when the shutter is pressed, the gyro sensor 180B detects the angle at which the electronic device 100 shakes, calculates the distance that the lens module needs to compensate based on the angle, and allows the lens to offset the shake of the electronic device 100 through reverse movement to achieve anti-shake.
  • the gyro sensor 180B can also be used for navigation and somatosensory game scenes.
  • the acceleration sensor 180E can detect the acceleration of the electronic device 100 in various directions (generally three axes). When the electronic device 100 is stationary, the magnitude and direction of gravity can be detected. It can also be used to identify the posture of electronic devices and be used in horizontal and vertical screen switching, pedometer and other applications.
  • the ambient light sensor 180L is used to sense ambient light brightness.
  • the electronic device 100 can adaptively adjust the brightness of the display screen 194 according to the perceived ambient light brightness.
  • the ambient light sensor 180L can also be used to automatically adjust the white balance when taking pictures.
  • the ambient light sensor 180L can also cooperate with the proximity light sensor 180G to detect whether the electronic device 100 is in the pocket to prevent accidental touching.
  • Fingerprint sensor 180H is used to collect fingerprints.
  • the electronic device 100 can use the collected fingerprint characteristics to achieve fingerprint unlocking, access to application locks, fingerprint photography, fingerprint answering of incoming calls, etc.
  • Temperature sensor 180J is used to detect temperature.
  • the electronic device 100 utilizes the temperature detected by the temperature sensor 180J to execute the temperature processing strategy. For example, when the temperature reported by the temperature sensor 180J exceeds a threshold, the electronic device 100 reduces the performance of a processor located near the temperature sensor 180J in order to reduce power consumption and implement thermal protection. In other embodiments, when the temperature is lower than another threshold, the electronic device 100 heats the battery 142 to prevent the low temperature from causing the electronic device 100 to shut down abnormally. In some other embodiments, when the temperature is lower than another threshold, the electronic device 100 performs boosting on the output voltage of the battery 142 to avoid abnormal shutdown caused by low temperature.
  • Touch sensor 180K also called “touch panel”.
  • the touch sensor 180K can be disposed on the display screen 194.
  • 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 used to detect a touch operation on or near the touch sensor 180K.
  • the touch sensor can pass the detected touch operation to the application processor to determine the touch event type.
  • Visual output related to the touch operation may be provided through display screen 194 .
  • the touch sensor 180K may also be disposed on the surface of the electronic device 100 at a location different from that of the display screen 194 .
  • FIG. 2 is a software structure block diagram of the electronic device 100 according to the embodiment of the present application.
  • the layered architecture divides the software into several layers, and each layer has clear roles and division of labor.
  • the layers communicate through software interfaces.
  • the Android system is divided into four layers, from top to bottom: application layer, application framework layer, Android runtime and system libraries, and kernel layer.
  • the application layer can include a series of application packages.
  • the application layer can include camera, gallery, calendar, call, map, navigation, WLAN, Bluetooth, music, video, short message, advertising module, management module, etc.
  • the advertising module is used for advertising interaction with users.
  • the advertising module may be a module preset by the operating system, and the advertising module and the electronic device may be provided by the same manufacturer.
  • the management module is used to generate the OPENID based on the advertiser ID and the device ID.
  • the management module can be a module preset by the operating system.
  • the management module and the electronic device can be provided by the same manufacturer.
  • the application framework layer provides an application programming interface (API) and programming framework for applications in the application layer.
  • API application programming interface
  • the application framework layer includes some predefined functions.
  • the application framework layer can include a window manager, content provider, view system, phone manager, resource manager, notification manager, etc.
  • the window manager is used to manage window programs.
  • the window manager can obtain the display size, determine whether there is a status bar, lock the screen, capture the screen, etc.
  • Content providers are used to store and retrieve data and make this data accessible to applications.
  • the data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.
  • the view system includes visual controls, such as controls that display text, controls that display pictures, etc.
  • a view system can be used to build applications.
  • the display interface can be composed of one or more views.
  • a display interface including a text message notification icon may include a view for displaying text and a view for displaying pictures.
  • the phone manager is used to provide communication functions of the electronic device 100 .
  • call status management including connected, hung up, etc.
  • the resource manager provides various resources to applications, such as localized strings, icons, pictures, layout files, video files, etc.
  • the notification manager allows applications to display notification information in the status bar, which can be used to convey notification-type messages and can automatically disappear after a short stay without user interaction.
  • the notification manager is used to notify download completion, message reminders, etc.
  • the notification manager can also be notifications that appear in the status bar at the top of the system in the form of charts or scroll bar text, such as notifications for applications running in the background, or notifications that appear on the screen in the form of conversation windows. For example, text messages are prompted in the status bar, beeps are emitted, electronic devices vibrate, lights flash, etc.
  • System libraries can include multiple functional modules. For example: surface manager, media libraries, 3D graphics processing library (for example: OpenGL ES), 2D graphics engine (for example: SGL), etc.
  • 3D graphics processing library for example: OpenGL ES
  • 2D graphics engine for example: SGL
  • the surface manager is used to manage the display subsystem and provides the fusion of 2D and 3D layers for multiple applications.
  • the media library supports playback and recording of a variety of commonly used audio and video formats, as well as static image files, etc.
  • the media library can support a variety of audio and video encoding formats, such as: MPEG4, H.264, MP3, AAC, AMR, JPG and PNG, etc.
  • the 3D graphics processing library is used to implement 3D graphics drawing, image rendering, composition and layer processing.
  • 2D Graphics Engine is a drawing engine for 2D drawing.
  • the kernel layer is the layer between hardware and software.
  • the kernel layer includes at least display driver, camera driver, audio driver, and sensor driver.
  • embodiments of the present application provide a display method and device for interface switching.
  • the animation effect can be determined based on the relationship between the interface elements before and after the switching, thereby strengthening the connection between the interface elements. , making the animation effect more consistent with physical laws, and taking into account the real usage scenarios and the user's system, thereby improving the user experience.
  • “Gravity” In the embodiment of this application, the concept of gravity in nature is introduced into the interface elements. There may be “gravity” between interface elements in the embodiments of the present application. Due to the existence of “gravity”, when one interface element in the interface moves, one or more of the other interface elements in the interface will be affected by the force. The influence of “gravity” can move.
  • the application of “gravity” in interface elements according to the embodiment of the present application will be introduced in detail below. The “gravity” in the embodiments of this application is not limited to the same interface. When the interface is switched, “gravity” may also exist between interfaces and between interface elements. Please refer to the following for specific description.
  • FIG. 3 shows a schematic diagram of the direction of “gravity” when an interface element is affected by “gravity” according to an embodiment of the present application.
  • FIG. 3 shows an example scenario in which the "gravity" of a moving interface element acts as “attraction”.
  • the cross pattern in the lower right schematically represents the enlarged “gravity” center point of the moving interface element.
  • the cross pattern in the upper left schematically represents an enlarged point of another interface element affected by the "gravity" of the moving interface element.
  • the direction of the "Gravity” of the interface element is that the center point of the moving interface element points to each affected interface element.
  • the vector direction of the center point In the embodiment of this application, there is no limit on the selection of the occurrence center point and the element center point.
  • the occurrence center point and the element center point can be the geometric center of the interface element, or they can be any point in the interface element.
  • the center point of occurrence of the "gravity” may be the geometry of an interface element before the interface is switched. Center, the center point of the element can be the geometric center of the interface element after switching. Please see the following article for specific instructions.
  • Figure 4 shows a schematic diagram of the movement of interface elements affected by "gravity" provided by the embodiment of the present application.
  • an interface element 401 and an interface element 402 are displayed on the same interface.
  • the electronic device can make the interface element 401 move to the right.
  • the interface element 402 can also move to the right because it is affected by "gravity".
  • the electronic device can make the interface element 401 move to the left.
  • the interface element 402 can also move to the left because it is affected by "gravity".
  • the "attraction" of the interface element 401 acts as a "repulsive force” on the interface element 402.
  • its “gravitational force” acts as a "repulsive force” on the interface element 402, regardless of the moving direction of the interface element 401.
  • the "gravitational force" of the interface element 401 acts as an "attractive force” on the interface element 402.
  • its “gravitational force” acts as an "attractive force” on the interface element 402, regardless of the moving direction of the interface element 401.
  • the electronic device can determine the animation effect during the interface switching process based on the "gravity" between interface elements, making the interface switching more natural. This will be introduced below. Classification of interface elements and animation effects during interface switching.
  • the display method for interface switching can divide different interface elements in the interface into different types. It can be understood that different interfaces can include the same type of interface elements, so that when the electronic device performs interface switching, it can
  • the animation effect when the interface is switched is determined based on the relative movement position of the same type of interface elements in the two interfaces and the "gravity" between the interface elements. If one or more types of interface elements are added after the interface is switched, the one or more interface elements will be One or more types of interface elements may not be affected by "gravity”, or may also be affected by "gravity”. Please see the following for specific instructions.
  • One possible implementation method is to divide the interface elements into main interface elements and secondary interface elements to determine the same type of interface elements in different interfaces.
  • interface elements are divided into two types: primary interface elements and secondary interface elements.
  • Figure 5 shows a schematic diagram of dividing the interface elements into main interface elements and secondary interface elements provided by the embodiment of the present application.
  • the electronic device displays an interface 501, and the electronic device can Interface 501 displays interface element 502, interface element 503, interface element 504, interface element 505, and interface element 506.
  • the electronic device can set interface element 505 as the main interface element, and set interface element 502, interface element 503, interface element 504, and Interface element 506 is set as a secondary interface element.
  • the electronic device displays an interface 507.
  • the interface 507 and the interface 501 are not the same interface.
  • the electronic device can display interface elements 508, 509, and 510 on the interface 507. , interface element 511 and interface element 512, wherein the electronic device can set interface element 508 as the main interface element, and set interface element 509, interface element 510, interface element 511 and interface element 512 as secondary interface elements.
  • the electronic device can determine the main interface element and the secondary interface element according to the first preset rule.
  • the first preset rule is not limited. Users or developers can customize the first preset rule.
  • the electronic device may determine the largest interface element in an interface as the main interface element.
  • the size of an interface element can be characterized using the area or perimeter of the interface element.
  • the electronic device can determine the interface element located at the golden section point in an interface as the main interface element.
  • the electronic device may determine the interface element located in the preset area as the main interface element.
  • the preset areas of the interface can be customized by users or developers. If the preset area includes multiple interface elements, the electronic device can randomly determine one interface element as the main interface element.
  • One possible implementation method is to divide the types of interface elements according to their positions in the interface to determine the same type of interface elements in different interfaces.
  • the electronic device can determine interface elements located at the same position or in the same area of different interfaces as interface elements of the same type.
  • Figure 6 shows a schematic diagram of dividing the types of interface elements according to their positions in the interface provided by the embodiment of the present application.
  • the electronic device displays an interface 601, and the electronic device can The interface 601 is divided into three areas: upper, middle and lower.
  • the electronic device displays interface elements 602, 603 and 604 in the upper area of the interface 601, displays interface element 605 in the middle area of the interface 601, and displays interface elements 605 in the middle area of the interface 601.
  • the lower area displays interface element 606.
  • the electronic device displays an interface 607.
  • the electronic device can divide the interface 607 into three areas: upper, middle, and lower.
  • the electronic device displays interface elements in the upper area of the interface 607.
  • interface element 610 and interface element 611 are displayed in the middle area of interface 607, and interface element 612 is displayed in the lower area of interface 607. Since the interface element 602, the interface element 603, and the interface element 604 are located in the upper area of the interface 601, and the interface element 608, and the interface element 609 are located in the upper area of the interface 607, the electronic device can combine the interface element 602, the interface element 603, the interface element 604, Interface element 608 and interface element 609 are determined to be the same type of interface elements. Similarly, the electronic device may determine interface element 605, interface element 610, and interface element 611 as interface elements of the same type, and determine interface element 606 and interface element 612 as interface elements of the same type.
  • the interface is divided into upper, middle, and lower areas above, but the embodiments of the present application are not limited to this.
  • the interface can also be divided into left, middle, and right areas.
  • the electronic device displays an interface 613, and the electronic device can display an interface 613 on the interface 613.
  • the electronic device displays an interface 626.
  • the interface 613 and the interface 626 can be different interfaces of the desktop.
  • the electronic device can display an interface element 627, an interface element 628, an interface element 629, Interface element 630, interface element 631, interface element 632, interface element 633, interface element 634, interface element 635, interface element 636, interface element 637, interface element 638. Since the position of the interface element 614 on the interface 613 is the same as the position of the interface element 627 on the interface 626, the electronic device can determine that the interface element 614 and the interface element 627 are the same type of interface elements. Similarly, the electronic device may determine that interface element 615 and interface element 628 are of the same type, determine that interface element 616 and interface element 629 are of the same type, and determine that interface element 617 and interface element 630 are of the same type.
  • interface elements it is determined that interface element 618 and interface element 631 are the same type of interface elements, it is determined that interface element 619 and interface element 632 are the same type of interface elements, and it is determined that interface element 620 and interface element 633 are the same type of interface. element, it is determined that interface element 621 and interface element 634 are interface elements of the same type, interface element 622 and interface element 635 are determined to be interface elements of the same type, interface element 623 and interface element 636 are determined to be interface elements of the same type, It is determined that the interface element 624 and the interface element 637 are the same type of interface elements, and the interface element 625 and the interface element 638 are determined to be the same type of interface elements.
  • One possible implementation method is to determine the label of each interface element, and then classify the types of interface elements according to the labels of the interface elements to determine the same type of interface elements in different interfaces.
  • the electronic device can determine the label of each interface element, and the electronic device can determine the interface elements with the same label in different interfaces as interface elements of the same type.
  • Figure 7 shows a schematic diagram of dividing the types of interface elements according to the labels of the interface elements provided by the embodiment of the present application.
  • the electronic device displays an interface 701, and the electronic device can display the interface 701 on the interface 701.
  • the interface element 702, the interface element 703, the interface element 704, the interface element 705, and the interface element 706 are displayed, where the electronic device can determine that the labels of the interface element 702 and the interface element 706 are label #1, and the labels of the interface element 703 and the interface element 704 are Tag #2, the tag of interface element 705 is tag #3.
  • the electronic device displays an interface 707.
  • the electronic device can display interface elements 708, 709, 710, 711, and 712 on the interface 707, where the electronic device The device may determine that the label of interface element 709, interface element 711, and interface element 712 is label #1, the label of interface element 710 is label #2, and the label of interface element 708 is label #3. Since the interface element 702, the interface element 706, the interface element 709, the interface element 711, and the interface element 712 have the same tags, the electronic device can determine that the interface element 702, the interface element 706, the interface element 709, the interface element 711, and the interface element 712 are the same. A type of interface element. Similarly, it can also be determined that interface element 703, interface element 704, and interface element 710 are interface elements of the same type, and interface element 705 and interface element 708 are interface elements of the same type.
  • the embodiment of the present application does not limit the method of determining the label of the interface element.
  • the interface is the interface of the application.
  • developers can define the labels of each interface element.
  • users can customize the labels of interface elements.
  • the electronic device is preset with a second preset rule for determining labels of interface elements.
  • the electronic device can calculate the similarity of interface elements of different interfaces and determine the interface elements whose similarity exceeds the first threshold as interface elements of the same type.
  • the electronic device can calculate the color similarity of interface elements of different interfaces, and determine the interface elements whose color similarity exceeds the first threshold as interface elements of the same type.
  • the electronic device displays interface element #1, interface element #2, and interface element #3 on the first interface, and displays interface element #4, interface element #5, and interface element #6 on the second interface.
  • the electronic device can calculate The color similarity between interface element #1 and interface element #4 is 40%, the color similarity between interface element #1 and interface element #5 is 60%, the color similarity between interface element #1 and interface element #6 is 60% , then the electronic device can determine interface element #1, interface element #5, and interface element #6 as interface elements of the same type.
  • the electronic device can calculate the size similarity of interface elements of different interfaces, and determine the interface elements whose size similarity exceeds the first threshold as interface elements of the same type.
  • the electronic device can calculate the shape similarity of interface elements of different interfaces, and determine the interface elements whose shape similarity exceeds the first threshold as interface elements of the same type.
  • the algorithm for calculating similarity is not limited in the embodiments of this application.
  • the algorithm for calculating similarity may be the Euclidean distance algorithm, the Manhattan distance algorithm, or the Minkow distance algorithm. Minkowski distance algorithm, cosine similarity algorithm, jaccard similarity coefficient algorithm, Pearson correlation coefficient algorithm, etc.
  • One possible implementation method is that the electronic device can determine the levels of interface elements of different interfaces, and determine the interface elements of the same level as the same type of interface elements.
  • the electronic device When the electronic device displays the interface elements, it can determine the level of each interface element in the interface, so that the electronic device can determine the interface elements of the same level in different interfaces as the same type of interface elements.
  • Figure 8 shows a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • the electronic device displays an interface 801.
  • the electronic device displays an interface element 802, an interface element 803, an interface element 804, and an interface element 805 on the interface 801.
  • the interface 801 is the interface before switching. .
  • the electronic device displays an interface 806.
  • 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.
  • the interface 806 is the switched one. interface.
  • interface element 802 and interface element 809 are the same type of interface elements, that is, type #1, and interface element 803 and interface element 810 are the same type of interface elements. That is, type #2, interface element 804 and interface element 808 are the same type of interface elements, that is, type #3, and interface element 805 and interface element 807 are the same type of interface elements, that is, type #4.
  • the process of the electronic device switching the interface from the interface 801 to the interface 806 can be understood as the electronic device moving the same type of interface element from its position on the interface 801 to its position on the interface 806 .
  • the interface elements with dotted lines in the figure represent the positions of different types of interface elements on the interface 801
  • the interface elements with solid lines in the figure represent the positions of different types of interface elements on the interface 806.
  • the electronic device switches the interface from interface 801 to interface 806 by moving the different types of interface elements represented by dotted lines in (c) of FIG. 8 to the positions of different types of interface elements represented by solid lines.
  • the electronic device When the electronic device moves the interface element, it can determine one or more "gravity” center points.
  • the center point of the interface element of type #3 at the position of interface 806 is the "gravity” Taking the occurrence center point as an example, that is, the "gravity" center point may be the geometric center point of the interface element 808.
  • the geometric center point of interface element 808 is used as the center point where "gravity" occurs.
  • the interface element of type #3 can move from the dotted line position to The solid line position, the motion trajectory is a straight line.
  • the interface element of type #1 if there is no influence of "gravity” when the interface element of type #1 moves from the dotted line position to the solid line position, as shown in (d) in Figure 8, the interface element of type #1 The movement trajectory can be a straight line, but due to the influence of "gravity", as shown in (e) in Figure 8, the movement trajectory of the interface element of type #1 can change from a straight line to a curve.
  • the interface element of type #2 if there is no influence of "gravity” when the interface element of type #2 moves from the dotted line position to the solid line position, as shown in (d) in Figure 8, the interface element of type #2 The movement trajectory can be a straight line. Due to the influence of "gravity”, as shown in (e) in Figure 8, the movement trajectory of the interface element of type #2 can be a curve.
  • the interface element of type #4 if there is no influence of "gravity” when the interface element of type #4 moves from the dotted line position to the solid line position, as shown in (d) in Figure 8, the interface element of type #4 The movement trajectory can be a straight line. Due to the influence of "gravity”, as shown in (e) in Figure 8, the movement trajectory of the interface element of type #4 can be a curve.
  • both interface 801 and interface 806 include interface elements of type #1, type #2, type #3, and type #4, but the embodiment of the present application is not limited thereto, for example, as shown in (a in Figure 8 ) and (h), if the interface 806 also includes the interface element 811 of type #5, as shown in (h) in Figure 8, the interface element of type #5 shown by the dotted line in the figure represents the interface element 811 of type #5 when triggered by the user. At the position of interface 806 when the interface is switched, the interface element of type #5 shown in the solid line in the figure represents its position at interface 806 when the interface switch is finally completed.
  • the interface element of type #5 is a new interface element, It is not affected by "gravity”, so the movement trajectory of type #5 interface elements can be a straight line. In other embodiments, the interface element of type #5 can also be affected by "gravity”, and its movement trajectory can be a curve.
  • the electronic device can set the curvature of the movement trajectories of the interface elements affected by the "gravity" effect to the same curvature. In this way, the processing of the electronic device for realizing animation effects when switching interfaces can be simplified.
  • the electronic device can determine the movement trajectory of the interface element that will 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. The description of the impact of influencing factors on the movement trajectories of interface elements affected by "gravity” can be found in the following description, and will not be described here.
  • the bending direction of the movement trajectory is related to the "gravity” received. If the "gravitation” received is “attraction”, then The curving direction of the moving trajectory can be toward the center point where "gravity” occurs. If the "gravity” acted upon is a “repulsive force”, the curving direction of the moving trajectory can be away from the center point where "gravity” occurs.
  • the center point of "gravity” is the geometric center point of the interface element 808, and the interface elements of type #1, type #2, and type #4 are affected by the "gravity” is "attractive", then the curved direction of the movement trajectory of the interface elements of type #1, type #2, and type #4 is toward the geometric center point of the interface element 808.
  • the center point of "gravity” is the geometric center point of the interface element 808, and the "gravity” effect of type #1, type #2, and type #4 is "Repulsive force” means that the bending direction of the movement trajectory of the interface elements of type #1, type #2, and type #4 is away from the geometric center point of the interface element 808.
  • the electronic device may set the movement speed of interface elements affected by the "gravitational" effect to the same speed. In this way, the processing of the electronic device for realizing animation effects when switching interfaces can be simplified.
  • the electronic device may determine the movement speed of the interface elements based on the "gravitational force" between the interface elements.
  • the interface element of type #1 is in the center of the "gravity" during the movement. The distance between points can first become smaller and then larger.
  • the "attractive force" of the occurrence center point first acts as an “attractive force” and then acts as a “repulsive force” on the interface element of type #1.
  • the interface element of type #1 can move in the direction of the center point according to the movement trajectory shown in the figure, making the movement trajectory of the interface element of type #1 curve.
  • the distance between the interface element and the center point of occurrence decreases and the "attraction” can increase, then the movement speed of the interface element of type #1 can increase, and the acceleration can also increase.
  • the electronic device can cause the "gravity" of the center point to act as a "repulsive force" on the interface element of type #1, and the interface element of type #1 can move toward Move away from the center point.
  • the interface element of type #1 can increase its movement speed due to the influence of "repulsive force”.
  • the "repulsive force” can decrease, the type #1 interface element's acceleration can decrease, and the movement speed continues to increase until it moves to the solid line position.
  • FIG. 8 shows the speed time curve of the interface element of type #1.
  • the interface element of type #1 is in the movement process. Velocity and acceleration can continue to increase, but as type #1 interface elements move away from the center point where "gravity" occurs, acceleration can decrease and velocity can continue to increase.
  • the "gravitational force" of the occurrence center point acts as an "attractive force" on the type #1 interface element.
  • the interface element of type #1 can move in the direction of the center point according to the movement trajectory shown in the figure, making the movement trajectory of the interface element of type #1 curve.
  • the distance between the interface element and the occurrence center point decreases and the "attraction” can increase, then the movement speed of the interface element of type #1 can increase and the acceleration increases.
  • (j) in Figure 8 shows the speed time curve of the interface element of type #1.
  • the interface element of type #1 is in the movement process.
  • the speed and acceleration can continue to increase, but when the "attractive force” hinders the movement of the interface element of type #1, the moving speed and acceleration of the interface element of type #1 can decrease, and as the interface element of type #1 gradually moves away At the center point where "gravity” occurs, the movement speed of Type #1 interface elements can be reduced more slowly.
  • the interface element of type #2 As another example, take the interface element of type #2 as an example. From the movement trajectory of the interface element of type #1 shown in (e) in Figure 8, it can be seen that the interface element of type #2 interacts with "gravity" during the movement. The distance between the center points can first become smaller and then larger.
  • the "attractive force" of the occurrence center point acts first as an “attractive force” and then as a “repulsive force” on the type #2 interface element.
  • the interface element of type #2 can move in the direction of the center point according to the movement trajectory shown in the figure, causing the movement trajectory of the interface element of type #2 to curve.
  • the distance between the interface element and the occurrence center point decreases and the "attraction” can increase, then the movement speed of the interface element of type #2 can increase, and the acceleration can also increase.
  • the electronic device can cause the "gravity" of the center point to act as a "repulsive force" on the interface element of type #2, and the interface element of type #2 can move toward Move away from the center point.
  • the interface element of type #2 can increase its movement speed due to the influence of "repulsive force”.
  • the "repulsive force” can decrease, the Type #2 interface element's acceleration can decrease, and the movement speed continues to increase until it moves to the solid line position.
  • the "gravitational force" of the occurrence center point acts as an "attractive force" on the type #2 interface element.
  • the interface element of type #2 can move in the direction of the center point according to the movement trajectory shown in the figure, causing the movement trajectory of the interface element of type #2 to curve.
  • the "attractive force” can be increased, and the movement speed of the interface element of type #2 can be increased.
  • speed-time curve of the interface element of type #2 is similar to the speed-time curve of the interface element of type #1, and for the sake of simplicity, it will not be described again here.
  • the interface element of type #4 takes the interface element of type #4 as an example. It can be seen from (e) in Figure 8 that the interface element of type #4 is affected by the "gravity” of the center point during movement, and the "gravity” can The function is "attraction", then the interface element of type #4 can move in the direction of the occurrence center point according to the movement trajectory shown in the figure. As the distance between the interface element of type #4 and the occurrence center point decreases, The “attractiveness" can be increased, and the movement speed of type #4 interface elements can be increased.
  • (k) in Figure 8 shows the speed time curve of the interface element of type #3.
  • the interface element of type #3 can be moved during the movement process. It is understood that it moves by the attraction of the center point where "gravity” occurs. As the interface element of type #3 gradually approaches the center point where "gravity” occurs, the "gravity” received by the interface element of type #3 increases, and the interface element of type #3 The element's speed and acceleration can increase as it moves.
  • (i)-(k) in Figure 8 show the speed time curve of the interface element
  • (l) in Figure 8 shows the displacement time of a type #1 interface element.
  • the displacement of the interface element of type #1 that is affected by "gravity” in the early stage of movement can be greater than the displacement of the interface element of type #1 that is not affected by "gravity” at the same time.
  • the displacement of the interface element of type #1 that is not affected by "gravity” at the same time is greater than the displacement of the interface element of type #1 that is affected by "gravity”.
  • the center point of occurrence of "gravity” is a fixed position, that is, the geometric center point of the interface element 808, but the position of the center point of occurrence of "gravity” in the embodiment of the present application is movable.
  • the number of occurrence center points of "gravity” is one, but the embodiment of the present application does not limit this, and the number of occurrence center points of "gravity” may also be multiple.
  • the electronic device can determine the linkage switching animation effect based on the same type of interface elements in different interfaces. The following will introduce the interface switching when the interface elements are divided into main interface elements and secondary interface elements. animation effect.
  • Figure 9 shows a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • the electronic device displays an interface 901.
  • the electronic device can display interface elements 902, 903, 904, 905, and 906 on the interface 901, where the electronic device can display Interface element 905 is set as the main interface element, and interface element 902, interface element 903, interface element 904 and interface element 906 are set as secondary interface elements.
  • the electronic device displays an interface 907.
  • the interface 907 and the interface 901 are not the same interface.
  • the electronic device can display interface elements 908, 909, 910, and 901 on the interface 907. 911 and interface element 912, wherein the electronic device can set interface element 908 as the main interface element, and set interface element 909, interface element 910, interface element 911 and interface element 912 as secondary interface elements.
  • the electronic device When the electronic device switches from the interface 901 to the interface 908, the electronic device displays the interface 907, and can use the center point of the position of the main interface element in the interface 907 as the "gravity" generation center point to move the main interface element from the interface 901 The position moves to the position of interface 907, and other sub-interface elements move due to the influence of "gravity".
  • the interface element 905 when the electronic device switches the interface 901 to the interface 907, the interface element 905 gradually changes to the interface element 908, and gradually moves from the position of the interface element 905 in the interface 901 to the interface 908.
  • the movement trajectory 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 sub-interface elements in the interface begin to move due to the influence of "gravity".
  • the interface element is a sub-interface element.
  • the interface element 910 is affected by "gravity".
  • the influence can be moved from the position indicated by the dotted line in the figure to the final position.
  • the starting position can be any position in the interface 907, and the position can be defined by the developer. Since the interface element 910 is affected by "gravity", its movement trajectory may be curved, and the direction of curvature may be toward the interface element 908 or away from the interface element 908.
  • the description of Figure 8. please refer to the description of Figure 8. For the sake of brevity, it will not be repeated here. Repeat.
  • interface element 909 For descriptions of the movement of interface element 909, interface element 911, and interface element 912, please refer to the description of interface element 910.
  • One possible implementation method is to determine the reference points of the interface elements and determine the distance of the interface elements based on the distance between the reference points of the interface elements.
  • the interface displays interface element 1001 and interface element 1002.
  • the electronic device can select the geometric center point of interface element 1001 and the geometric center point of interface element 1002 as the reference point, then the interface element The distance between 1001 and the interface element 1002 may be the distance between the geometric center point of the interface element 1001 and the geometric center point of the interface element 1002.
  • any point in the two interface elements can be selected as the reference point.
  • an electronic device calculates the distance between two interface elements, it can select the two points with the shortest distance between the two interface elements as the reference points.
  • the intersection point of the lower border and the right border of the interface element 1001 and the intersection point of the left border and the upper border of the interface element 1002 can be selected as the reference point.
  • an electronic device when it calculates the distance between two interface elements, it can select the two points with the longest distance between the two interface elements as the reference points. Taking the interface element 1001 and the interface element 1002 shown in the figure as an example, the intersection point of the left border and the upper border of the interface element 1001 and the intersection point of the lower border and the right border of the interface element 1002 can be selected as the reference point.
  • One possible implementation method is to determine the lateral distance between interface elements, and determine the lateral distance between interface elements as the distance between interface elements.
  • the interface displays interface element 1001 and interface element 1002.
  • the lateral distance between interface element 1001 and interface element 1002 is d2.
  • the electronic device can determine d2 as the distance between the interface elements. distance.
  • One possible implementation method is to determine the vertical distance between interface elements, and determine the vertical distance between interface elements as the distance between interface elements.
  • the interface displays interface element 1001 and interface element 1002.
  • the vertical distance between interface element 1001 and interface element 1002 is d3.
  • the electronic device can determine d3 as the distance between the interface elements. distance.
  • One possible implementation method is to determine the horizontal distance and vertical distance between interface elements, and then determine the distance between interface elements based on the horizontal distance and vertical distance.
  • the horizontal distance between interface element 1001 and interface element 1002 is d4, and the vertical distance between interface element 1001 and interface element 1002 is d5.
  • the electronic device can determine a right-angled triangle with the lateral distance d4 and the longitudinal distance d5 as two right-angled sides.
  • triangle Shape has hypotenuse.
  • the electronic device can determine a line segment within the right triangle, and the electronic device can determine the length of the line segment to be d6 based on the principle of trigonometric functions, that is, the interface element 1001 and the interface The distance between elements 1002 is d6.
  • the universal gravity model is introduced in the embodiment of this application, and the universal gravity model can be expressed by Formula 1:
  • the "gravity" between two interface elements is related to the "mass” and distance of the two interface elements. Since the embodiment of the present application is aimed at interface elements, formula (2) or formula (3) can be used to replace the "mass" of the interface element with the size of the interface element.
  • k is a constant parameter
  • M is the "mass" of the interface element
  • R is the size of the interface element
  • r is the distance between two interface elements.
  • formula (1) can be simplified into formula (4),
  • the "gravity" between interface elements is directly proportional to the size of the interface elements and inversely proportional to the distance between the interface elements.
  • Figure 11 shows a schematic diagram of the animation effect when interface elements are switched at different distances according to the embodiment of the present application.
  • the dotted lines represent the positions of interface elements of type #1 and type #2 on interface 1101.
  • the solid line represents the position of the interface element of type #1 and the interface element of type #2 in the interface 1104.
  • the electronic device When the electronic device moves the interface element, it can determine one or more "gravity” center points.
  • the center point of the interface element of type #1 at the position of interface 1101 is the "gravity” Take the occurrence center point as an example.
  • the geometric center point of the interface element of type #1 at the interface 1101 is regarded as the center point where the "gravity” occurs. It is assumed that in the interface 1101, the interface element of type #2 and The distance between the occurrence centers is d1, and the interface element of type #1 and the interface element of type #2 are the same size, and the "gravitational force" between the two interface elements is f1. Regarding 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 "gravity", the movement trajectory of the interface element of type #2 can be a straight line, but due to the influence of "gravity” "Gravity” influence, its movement trajectory can be a curve.
  • the curvature of the movement trajectory of the interface element of type #2 is related to the "gravity” exerted by the interface element of type #2. If the "gravity” experienced by the interface element of type #2 increases, the curvature of its movement trajectory increases. If the "gravitation” experienced by the interface element of type #2 decreases, the curvature of its movement trajectory decreases.
  • the curvature of the movement trajectory of the interface element of type #2 shown in (d) in Figure 11 is smaller than that of type #2 shown in (b) in Figure 11 The curvature of the movement trajectory of the interface element.
  • the "gravity” effect on the interface element of type #2 is “attraction”, but the embodiment of the present application is not limited to this.
  • the "gravitational force” acted on by the interface element of type #2 acts as “repulsive force”
  • the “gravitational force” acted on by the interface element of type #2 first acts as “repulsive force” and then acts as “attractive force”, or the “attractive force” acted on by the interface element of type #2
  • the “gravity” on the interface elements of 2 first acts as “attraction” and then as “repulsion", and the curvature of its movement trajectory will change due to the change in the magnitude of the "gravity”.
  • the "gravity" of the center point acts as an "attraction” on the interface element of type #2.
  • the interface elements of type #2 in (b) and (d) in Figure 11 can move toward the center of occurrence according to the movement trajectories shown in (b) and (d) in Figure 11 respectively.
  • the point moves in the direction, causing the movement trajectory of type #2 interface elements to curve.
  • the "attraction" of the interface element of type #2 in (b) in Figure 11 is greater than the "attraction” of the interface element of type #2 in (d) in Figure 11, then (b in Figure 11
  • the moving speed of the interface element of type #2 in ) is faster than the moving speed of the interface element of type #2 in (d) in Figure 11 .
  • the "attractive force" can increase, as shown in (b) and (d) of Figure 11
  • the movement speed of interface elements of type #2 can be increased.
  • the acceleration of the interface element of type #2 in (b) in FIG. 11 may be greater than the acceleration of the interface element of type #2 in (d) in FIG. 11 . It can be understood that since the acceleration of the interface element of type #2 in (b) in Figure 11 can be greater than the acceleration of the interface element of type #2 in (d) in Figure 11, the moving speed between the two The difference can also be increased.
  • the interface element of type #2 in (b) in Figure 11 moves faster than the interface element of type (d) in Figure 11
  • the moving speed of the interface element #2 in (b) in Figure 11 is greater than the moving speed of the interface element #2 in (d) in Figure 11
  • the interface element of type #2 in (b) in Figure 11 and the interface element of type #2 in (d) in Figure 11 can reach the solid line position at the same time, or in other situations
  • the interface element of type #2 in (b) in Figure 11 can reach the solid line position earlier than the interface element of type #2 in (d) in Figure 11, or in other scenarios, the interface element in Figure 11
  • the interface element of type #2 in (b) may reach the solid line position later than the interface element of type #2 in (d) in FIG. 11 .
  • the interface elements of type #2 in (b) and (d) in Figure 11 can move toward the center of occurrence according to the movement trajectories shown in (b) and (d) in Figure 11 respectively. The point moves in the direction, causing the movement trajectory of type #2 interface elements to curve.
  • the "attractive force" can increase, as shown in (b) and (d) of Figure 11
  • the movement speed of interface elements of type #2 can be increased.
  • the acceleration of the interface element of type #2 in (b) in FIG. 11 may be greater than the acceleration of the interface element of type #2 in (d) in FIG. 11 . It can be understood that since the acceleration of the interface element of type #2 in (b) in Figure 11 can be greater than the acceleration of the interface element of type #2 in (d) in Figure 11, the moving speed between the two The difference can also be increased.
  • the electronic device can cause the "gravitational force" of the center point to act as a "repulsive force" on the interface element of type #2, then Type #2 interface elements can move in a direction away from the center point. At this time, the movement speed of type #2 interface elements can increase due to the influence of the "repulsive force". As the distance between the Type #2 interface element and the occurrence center point increases, the "repulsive force” can decrease, the Type #2 interface element's acceleration can decrease, and the movement speed continues to increase until it moves to the solid line position.
  • the "gravitational force” experienced by the interface element in the above example during movement can act as an “attractive force” or a “repulsive force.”
  • the electronic device can determine the distance between the interface element and the center point during movement. The distance between them determines the effect of "gravity”. For example, in the interface before switching, the distance between the interface element and the occurrence center point is d. If the distance between the interface element and the occurrence center point is less than d during the movement of the interface element, the “gravitational force” exerted on the interface element will “The effect is “repulsion”; if the distance between the interface element and the center point of occurrence is greater than d during the movement of the interface element, the "gravity” effect on the interface element is "attraction".
  • the "gravity" between two interface elements can be directly proportional to the size of the interface element and inversely proportional to the distance between the interface elements.
  • the area of the interface element, the perimeter of the interface element, etc. can be used to characterize the size of the interface element.
  • Figure 12 shows a schematic diagram of the animation effect when interface elements of different sizes are switched according to the embodiment of the present application.
  • the dotted lines represent the positions of interface elements of type #1 and type #2 on interface 1201.
  • the solid line represents the position of the interface element of type #1 and the interface element of type #2 in the interface 1204.
  • the electronic device When the electronic device moves the interface element, it can determine one or more "gravity” center points.
  • the center point of the interface element of type #1 at the position of interface 1201 is the "gravity” Take the occurrence center point as an example.
  • the geometric center point of the interface element of type #1 at the interface 1201 is regarded as the center point where the "gravity" occurs. It is assumed that in the interface 1201, the interface element of type #2 and The distance between the occurrence centers is d1, the size of the interface element of type #1 and the size of the interface element of type #2 are the same, both are R1. When the distance between the two interface elements is d1 and the size is R1, the two interfaces The "gravity" between elements is f1.
  • the curvature of the movement trajectory of the interface element of type #2 is related to the "gravity” exerted by the interface element of type #2. If the "gravity” experienced by the interface element of type #2 increases, the curvature of its movement trajectory increases. If the "gravitation” experienced by the interface element of type #2 decreases, the curvature of its movement trajectory decreases.
  • the "gravity” effect on the interface element of type #2 is “attraction”, but the embodiment of the present application is not limited to this.
  • the "gravitational force” acted on by the interface element of type #2 acts as “repulsive force”
  • the “gravitational force” acted on by the interface element of type #2 first acts as “repulsive force” and then acts as “attractive force”, or the “attractive force” acted on by the interface element of type #2
  • the “gravity” on the interface elements of 2 first acts as “attraction” and then as “repulsion", and the curvature of its movement trajectory will change due to the change in the magnitude of the "gravity”.
  • the "gravity" between the interface element of type #1 and the interface element of type #2 is calculated based on the relationship between the interface element of type #1 and the interface element of type #2 in interface 1201. Size, but the embodiment of the present application does not limit this.
  • the size of the interface element of type #1 and the size of the interface element of type #2 in the interface 1204 can be used, or the size of the interface element of type #1 in the interface 1201 can be used.
  • the size and the size of the interface element of type #2 in the interface 1204, or the size of the interface element of type #1 in the interface 1204 and the size of the interface element of type #2 in the interface 1201 can be used.
  • the "gravity" of the center point acts as an "attraction” on the interface element of type #2.
  • the interface elements of type #2 in (b) and (d) in Figure 12 can move toward the center of occurrence according to the movement trajectories shown in (b) and (d) in Figure 12 respectively.
  • the point moves in the direction, causing the movement trajectory of type #2 interface elements to curve.
  • the "attractive force" received by the interface element of type #2 in (b) in Figure 12 is smaller than the "attractive force” received by the interface element of type #2 in (d) in Figure 12, then (b in Figure 12
  • the moving speed of the interface element of type #2 in ) is slower than the moving speed of the interface element of type #2 in (d) in Figure 12 .
  • the "attractive force" can increase, as shown in (b) and (d) of Figure 12
  • the movement speed of interface elements of type #2 can be increased.
  • the acceleration of the interface element of type #2 in (b) in FIG. 12 may be smaller than the acceleration of the interface element of type #2 in (d) in FIG. 12 . It can be understood that since the acceleration of the interface element of type #2 in (b) in Figure 12 can be smaller than the acceleration of the interface element of type #2 in (d) in Figure 12, the moving speed between the two is The difference can also be increased.
  • the interface element of type #2 in (b) in Figure 12 moves slower than the interface element of type (d) in Figure 12
  • the moving speed of the interface element #2 in (b) in Figure 12 is smaller than the moving speed of the interface element #2 in (d) in Figure 12
  • the interface element of type #2 in (b) in Figure 12 and the interface element of type #2 in (d) in Figure 12 can reach the solid line position at the same time, or in other situations
  • the interface element of type #2 in (b) in Figure 12 can reach the solid line position earlier than the interface element of type #2 in (d) in Figure 12, or in other scenarios, the interface element in Figure 12
  • the interface element of type #2 in (b) may reach the solid line position later than the interface element of type #2 in (d) in FIG. 12 .
  • the interface elements of type #2 in (b) and (d) in Figure 12 can move toward the center of occurrence according to the movement trajectories shown in (b) and (d) in Figure 12 respectively. The point moves in the direction, causing the movement trajectory of type #2 interface elements to curve.
  • the "attractive force" received by the interface element of type #2 in (b) in Figure 12 is smaller than the "attractive force” received by the interface element of type #2 in (d) in Figure 12, then (b in Figure 12
  • the moving speed of the interface element of type #2 in ) is slower than the moving speed of the interface element of type #2 in (d) in Figure 12 .
  • the "attractive force" can increase, as shown in (b) and (d) of Figure 12
  • the movement speed of interface elements of type #2 can be increased.
  • the acceleration of the interface element of type #2 in (b) in FIG. 12 may be smaller than the acceleration of the interface element of type #2 in (d) in FIG. 12 . It can be understood that since the acceleration of the interface element of type #2 in (b) in Figure 12 can be smaller than the acceleration of the interface element of type #2 in (d) in Figure 12, the moving speed between the two is The difference can also be increased.
  • the electronic device can cause the "gravitational force" of the center point to act as a "repulsive force" on the interface element of type #2, then The interface element of type #2 can move in the direction away from the center point. At this time, the interface element of type #2 can move at an increased speed due to the influence of the "repulsive force". As the distance between the Type #2 interface element and the occurrence center point increases, the "repulsive force” can decrease, the Type #2 interface element's acceleration can decrease, and the movement speed continues to increase until it moves to the solid line position.
  • the “gravitational force” in the example above can act as an “attractive” or “repulsive” force. Whether the “gravity” the interface element experiences is “attraction” or “repulsion” can be related to the direction in which it moves.
  • the moving interface element of type #3 is used as the center point of "gravity".
  • the interface element of type #1 moves to the left in the process of switching from interface 801 to interface 806, and the interface element of type #1 moves to the lower right in the process of switching from interface 801 to interface 806. . It can be seen from the movement trajectories of interface elements of type #3 and interface elements of type #1 that during the movement of the two, the distance can first become smaller and then become larger.
  • the process of the distance between the interface element of type #3 and the interface element of type #1 becoming smaller can be understood as the "gravity” effect on the interface element of type #1 becomes “attraction", so that the interface element of type #1 and The distance between type #3 interface elements becomes smaller, and as the distance decreases, type #1 interface elements can move faster.
  • the critical point for example, the critical point can be the point where the interface element of type #1 is directly above the interface element of type #3
  • the "gravitational force" on the interface element of type #1 can act as a "repulsive force”
  • the distance between the interface element of type #1 and the interface element of type #3 can increase, and as the distance increases, the moving speed of the interface element of type #1 can slow down until it moves to the solid line position.
  • the description of the interface element of type #2 can be found in the description of the interface element of type #1.
  • the friction force in nature is introduced into the interface elements, so that the animation effect is closer to the natural effect.
  • the “friction force” in the embodiment of this application can be “sliding friction force”.
  • “Sliding friction force” can be understood as the “friction force” experienced by interface elements during their movement. “Sliding friction force” will hinder the movement of interface elements. , causing the moving speed of interface elements to change.
  • the electronic device can define the "friction force" of the interface element according to the level of the interface element.
  • the levels of interface elements may be different, and the electronic device can determine the "friction force" of the interface elements based on the levels of the interface elements.
  • the electronic device can determine the "friction force" of the interface element based on the color of the interface element.
  • the color of the interface element can be an RGB color
  • the electronic device can calculate the "friction force" of the interface element based on the RGB component of the color of the interface element.
  • interface element #1 includes color #1, and the R component of color #1 is 131, the G component is 134, and the B component is 13. Then the electronic device can determine the sum 278 of the above three components as the " "friction force”.
  • the electronic device can determine the "friction force" of the interface element according to preset rules based on the dispersion of the RGB component of the color of the interface element.
  • the dispersion of the RGB component of the color of the interface element is higher, its “friction”
  • the greater the “friction force” for example, if the dispersion of the RGB components of the color of the interface element is higher, the greater the “dynamic friction factor” of the interface element is, the greater the “friction force” is.
  • the "friction force" corresponding to each color can be calculated separately, and then the “friction force” of the interface element can be obtained by summing up the corresponding "friction force" of each color.
  • the electronic device can determine the "friction force" of the interface element based on the size of the interface element. For example, different sizes can correspond to different "friction forces". The larger the interface element, the greater the "friction force" it will have.
  • the gravity in nature is introduced into the interface elements, making the animation effect closer to the natural effect.
  • the "gravity" of the interface element can be determined in the following ways.
  • the electronic device can randomly determine the "gravity" of interface elements. For example, define the "gravity" of interface element #1 as G#1, and the "gravity" of interface element #2 as G#2.
  • the electronic device can define the "gravity" of the interface element according to the level of the interface element.
  • the interface elements of the same interface may have different levels, and the electronic device can determine the "gravity" of the interface elements based on the levels of the interface elements.
  • the electronic device can determine the "gravity" of the interface element based on the color of the interface element.
  • the color of the interface element can be an RGB color
  • the electronic device can calculate the "gravity” of the interface element based on the RGB component of the color of the interface element.
  • interface element #1 includes color #1, and the R component of color #1 is 131, the G component is 134, and the B component is 13.
  • the electronic device can determine the sum 278 of the above three components as the " "maximum static friction force”.
  • the electronic device can determine the "gravity" of the interface element according to preset rules based on the dispersion of the RGB component of the color of the interface element. For example, if the dispersion of the RGB component of the color of the interface element is higher, its “gravity" "The bigger.
  • the "gravity” corresponding to each color can be calculated separately, and then the “gravity” corresponding to each color can be calculated separately. Summing up the corresponding "gravities” gives the “gravity” of the interface element.
  • the electronic device can determine the "gravity" of the interface element based on the size of the interface element. For example, different sizes can correspond to different "gravities”. The larger the interface element, the greater its "gravity”.
  • the "gravity" of the folder can be obtained by adding the "gravity" of the multiple interface elements.
  • interface elements can be divided into different types. According to different ways of dividing interface element types, the animation effect of interface switching can be different.
  • the main interface element can be the center point where "gravity” occurs, and the sub-interface elements move due to the influence of "gravity”.
  • the animation effect of interface switching please refer to the description of Figure 9.
  • the electronic device can determine one or more "gravity" occurrence centers.
  • the animation effect of the interface switching can be seen in Figure 1. 8 description.
  • the above describes the impact of influencing factors on the linkage switching animation effect.
  • the factors that influence the linkage switching animation effect can be combined with each other to affect the interface switching animation effect.
  • the electronic device can determine the animation effect of the interface switching based on the size and "friction" of the interface elements.
  • the larger the size of the interface element the greater the "gravitational force” it receives. If the "friction force" of the interface element is defined, the movement speed of the interface element can be slowed down due to the influence of "friction force”. .
  • FIG. 14 shows a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • the electronic device displays interface elements of type #1, interface element of type #2, and interface element of type #3 on the interface 1401 and the interface 1402, where the dotted lines indicate represents the position of the above-mentioned interface element on the interface 1401, and the solid line represents the position of the above-mentioned interface element on the interface 1402.
  • the "gravity" occurrence center point as the geometric center point of the interface element of type #1 in the interface 1402 as an example.
  • the distance between the interface element of type #2 and the occurrence center point is the same as that of type #3.
  • the distance between the interface element of type #2 and the occurrence center point is the same.
  • the distance between the interface element of type #2 and the occurrence center point is the same as the distance between the interface element of type #3 and the occurrence center point.
  • the curvature of the movement trajectory of the interface element of type #3 can be the same as that of the interface element of type #2.
  • the curvatures of the movement trajectories are the same, that is, the movement distance of the interface element of type #3 is equal to the movement distance of the interface element of type #2.
  • type #3 interface elements move slower than type #2 interface elements.
  • the electronic device can determine the animation effect of interface switching based on distance and "friction force".
  • FIG. 15 shows a schematic diagram of the animation effect during interface switching provided by the embodiment of the present application.
  • the electronic device displays interface elements of type #1, interface element of type #2, and interface element of type #3 on the interface 1501 and the interface 1502, where the dotted lines indicate represents the position of the above-mentioned interface element on the interface 1501, and the solid line represents the position of the above-mentioned interface element on the interface 1502.
  • the "gravity" occurrence center point as the geometric center point of the interface element of type #1 in interface 1402 as an example.
  • the distance between the interface element of type #3 and the occurrence center point is smaller than type #2. The distance between the interface element and the occurrence center point.
  • the distance between the interface element of type #3 and the occurrence center point is less than the distance between the interface element of type #2 and the occurrence center point.
  • the distance between the interface element of type #2 and the occurrence center point is the same.
  • Type # Interface elements of type 1, interface elements of type #2, and interface elements of type #3 have the same size.
  • the interface element of type #3 is If the "friction" of the interface element is not defined, since the distance between the interface element of type #3 and the occurrence center point is smaller than the distance between the interface element of type #2 and the occurrence center point, and the interface element of type #3 is If the interface elements of type #2 have the same size, then the "gravity” experienced by the interface element of type #3 is greater than the "gravity” experienced by the interface element of type #2.
  • the above two interface elements move at the position indicated by the dotted line. In the process of reaching the solid line position, the movement speed of the interface element of type #3 is faster than the movement speed of the interface element of type #2, and the curvature of the movement trajectory of the interface element of type #3 is greater than the movement of the interface element of type #2.
  • the curvature of the trajectory that is, the moving distance of interface elements of type #3 is greater than the moving distance of interface elements of type #2.
  • the curvature of the movement trajectory of the interface element of type #3 can be the same as that of the interface element of type #2.
  • the curvatures of the movement trajectories are the same, that is, the movement distance of the interface element of type #3 is equal to the movement distance of the interface element of type #2.
  • type #3 interface elements move slower than type #2 interface elements.
  • the electronic device can determine the animation effect when the interface switches based on the size and "gravity" of the interface elements.
  • the electronic device can determine the animation effect when switching interfaces based on distance and "gravity".
  • the animation effect when the interface is switched is determined based on the size and “gravity” of the interface element and the animation effect when the interface is switched is determined based on the distance and "gravity”
  • the electronic device can also determine the animation effect during interface switching based on two or more factors.
  • Figure 16 shows a schematic diagram of an interface switching form provided by an embodiment of the present application.
  • the electronic device displays an interface 1601, and a control 1602 is displayed on the interface 1601.
  • the control 1602 may be an application icon.
  • the electronic device may, in response to detecting the user's operation of clicking the control 1602, switch the interface from the interface 1601 to the interface corresponding to the control 1602, that is, the interface 1603 shown in (b)-(d) in Figure 16 .
  • the electronic device can respond to detecting the user's operation of clicking the control 1602, using the position of the control 1602 as the starting point to gradually increase the area of the interface 1603 to replace the interface 1601, where Interface 1603 is the interface corresponding to control 1602.
  • the interface switching speed during the interface switching process may be related to the control 1602.
  • the interface switching speed may be related to the size of the control 1602.
  • the size of the control 1602 is R1
  • the electronic device can display the interface 1603.
  • the size of the interface 1603 is R2, that is, as shown in the figure The size shown in (b) in Figure 16.
  • the size of the interface 1603 is R3, that is, the size shown in (c) in Figure 16.
  • the size of the control 1602 is increased to R4.
  • the electronic device can display the interface 1603, and at time t1, the size of the interface 1603 is R5>R2, that is, as shown in Figure 16
  • the size shown in (j), at time t3, the size of the interface 1603 is R6>R3, that is, the size shown in (k) in Figure 16.
  • the speed of interface switching can also increase.
  • the above example only takes the larger the size of the control 1603 as an example, the faster the interface switching speed.
  • the embodiments of the present application are not limited thereto.
  • the interface size time curve during the interface switching process may be related to the control 1602.
  • (m) in Figure 16 shows the size-time curve of the interface 1603, where the third curve is the size-time curve corresponding to the size of the control 1602 being R1, and the fourth curve is the size-time curve corresponding to the size of the control 1602 being R4. curve. It can be seen from (m) in Figure 16 that if the size of the control 1602 is increased, the size of the interface 1603 initially displayed in the interface can also be increased, and due to the change in the size of the control 1602, although the interface 1603 eventually fills the interface Time does not change, but the curvature of the dimension-time curve is different.
  • control 1602 not only affects the interface switching speed during the interface switching process, but also affects the change of the interface transparency during the interface switching process.
  • the changing speed of the transparency of the interface during the interface switching process may be related to the size of the control 1602.
  • the transparency time curve during the interface switching process may be related to the size of the control 1602.
  • (n) in Figure 16 shows the transparency time curve of the interface 1603.
  • the fifth curve is the transparency time curve corresponding to the size of the control 1602 being R1
  • the sixth curve is the transparency time curve corresponding to the size of the control 1602 being R4.
  • the corresponding transparency time curve It can be seen from (n) in Figure 16 that if the size of the control 1602 increases, the curvature of its transparency time curve increases, and the time when the final transparency drops to 0 can remain unchanged.
  • Figure 17 shows a schematic diagram of another form of interface switching provided by the embodiment of the present application.
  • the electronic device displays an interface 1701.
  • the electronic device can switch the interface in response to detecting the user's sliding operation to the left.
  • the process of interface switching can be as shown in (b) of Figure 17 and (c).
  • the electronic device in response to detecting the user's sliding operation to the left, can cause the interface 1702 to gradually slide in from the right, and the interface 1701 to gradually slide out from the left, and finally Display interface 1702.
  • the movement of interface 1702 can be understood as moving under the influence of interface 1701.
  • the initial stage of interface 1701 The speed can be faster than the initial speed of interface 1702, then the distance between interface 1701 and interface 1702 can first become larger, and then the speed of interface 1702 can increase to exceed the speed of interface 1701, then the distance between interface 1701 and interface 1702 can be It becomes smaller again, and then the distance between the two becomes smaller to a preset distance, which may be 0.
  • the speeds of the interface 1701 and the interface 1702 remain consistent, and finally the switching of the interfaces is completed.
  • FIG. 17 shows a displacement time curve of the interface, where the seventh curve is the displacement time curve of the interface 1702, and the eighth curve is the displacement time curve of the interface 1701.
  • the displacement difference of the two curves at the same time can be understood as the distance between interface 1701 and interface 1702. Therefore, it can be seen from the figure that during the movement of interface 1701 and interface 1702, the The distance between them can first increase and then decrease to 0. When the distance between the two is reduced to 0, it can be understood that the interface switching has been completed.
  • FIG. 17 shows the displacement time curve of another interface, where the ninth curve is the displacement time curve of interface 1701, and the tenth curve is the displacement time curve of interface 1702. From (i) in Figure 17 As shown, the displacement difference of the two curves at the same time can be understood as the distance between interface 1701 and interface 1702. If the distance between interface 1701 and interface 1702 is not moving, the distance between interface 1701 and interface 1702 can be 0. Therefore, it can be seen from the figure that the interface During the movement of 1701 and interface 1702, if the displacement of interface 1702 at the same moment is greater than the displacement of interface 1701 at that moment, interface 1702 can cover the interface 1701. As it continues to move, the interface 1702 covers between the interfaces 1701. The area can be reduced, that is, the distance between the two increases. When the distance between the two increases to 0, the interface switching is completed.
  • the moving speed of the interface 1702 may be faster than the moving speed of the interface 1701, and the interface 1701 may partially overlap with the interface 1702, and ultimately the interface switching is completed.
  • interface 1701 includes 5 interface elements
  • interface 1702 includes 3 interface elements.
  • each of the 5 interface elements in interface 1701 is related to the interface element in interface 1702. If the "gravity” and kinetic friction coefficients of each of the three interface elements are the same, then the “friction” of interface 1701 > the “friction” of interface 1702.
  • the moving speed of the interface 1702 may be slower than the moving speed of the interface 1701, and the distance between the interface 1701 and the interface 1702 may continue to increase, and eventually the interface switching is completed.
  • the electronic device switches the interface 1701 to the interface 1702 in response to detecting the user's sliding operation to the left.
  • the electronic device may also respond.
  • the interface is switched.
  • the electronic device can respond to detecting the user's downward sliding operation, and can make the interface 1702 gradually slide in from the upper side, and the interface 1701 gradually slide out from the lower side, and The final interface 1702 is displayed.
  • interface 1702 may be overlaid on interface 1701.
  • FIG. 18 shows another form of interface switching provided by the embodiment of the present application.
  • the electronic device displays an interface 1801, and interface elements of type #1, type #2, and type #3 are displayed on the interface 1801.
  • the electronic device may respond to detecting the user's operation of switching interfaces, and the electronic device may adjust the positions of the interface elements of type #1, the interface element of type #2, and the interface element of type #3 on the interface 1801 to implement the interface. switching effect.
  • the concept of multiple forces in nature is introduced into the interface elements, so that when the interface is switched, the interface elements can be linked, and the linked animation effect conforms to the laws of nature, improving the user experience and user perception. , making the user's operation closer to the real world experience.
  • Figure 19 shows a set of GUIs provided by embodiments of the present application.
  • the application scenario shown in Figure 19 is an interface with a hierarchical structure, which can be considered as switching between interfaces in the same application.
  • the electronic device displays an interface 1901.
  • the interface 1901 is a setting interface.
  • the electronic device can display multiple interface elements on the interface 1901, such as text interface elements 1902, search bars, cards and other interface elements. .
  • the electronic device may gradually display the interface 1904 from the right side in response to detecting the user's operation of clicking on Bluetooth 1903.
  • the electronic device may gradually display the interface 1904 from the right, and finally display the interface 1904 on the screen.
  • Interface 1904 is the Bluetooth setting interface.
  • the electronic device can display multiple interface elements on the interface 1904, such as text interface elements 1905, interface elements 1906, interface elements 1907, interface elements 1908, and interface elements 1909.
  • the text interface element 1902 and the text interface element 1905 can be divided into main interface elements, and the others can be divided into interface 1901 or interface 1904.
  • the interface element is a secondary interface element, so the interface element 1906, the interface element 1907, the interface element 1908, and the interface element 1909 can be understood to be moved by the "gravity" of the text interface element 1905.
  • the following describes the moving process of text interface element 1905, interface element 1906, interface element 1907, interface element 1908, and interface element 1909 in conjunction with (d)-(f) in Figure 19.
  • the text interface element 1905 is the main interface element.
  • the text interface element 1905 can move before the secondary interface element, and the movement of the secondary interface element occurs due to the "gravity" of the text interface element 1905. move. Therefore, within the same time period, the moving distance of text interface element 1905 is greater than the moving distance of interface element 1906, interface element 1907, interface element 1908, and interface element 1909.
  • the interface element 1906, the interface element 1907, the interface element 1908, and the interface element 1909 move the same distance within the same time period, and the moving speed may also be the same.
  • 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 The distance between text interface elements 1905, then the "gravity” experienced by interface element 1906 > the "gravity” experienced by interface element 1907 > the “gravity” experienced by interface element 1908 > the “gravity” experienced by interface element 1909, so as shown in Figure 19
  • the moving speed of interface element 1906 > interface The moving speed of element 1907>the moving speed of interface element 1908>the moving speed of interface element 1909.
  • the electronic device can finally display the GUI as shown in (f) of Figure 19.
  • the movement trajectories of the interface element 1906, the interface element 1907, the interface element 1908, and the interface element 1909 can be straight lines or curves.
  • the curving direction of the curve can be toward the text interface element 1905, or the curving direction of the curve can be away from the text interface element 1905.
  • the size of the interface element can affect the movement of the secondary interface element.
  • the size of the interface element 1907 is larger than the size of the interface element 1906, and the distance between the interface element 1906 and the text interface element 1905 is ⁇ the distance between the interface element 1907 and the text interface element 1905,
  • the “gravitational force” on the interface element 1906 may be ⁇ the “gravitational force” on the interface element 1907. Therefore, within the same time period, the movement distance of the interface element 1907 > the movement distance of the interface element 1906, and the interface element 1906 The moving speed of 1907 > the moving speed of interface element 1906.
  • “friction” can affect the movement of secondary interface elements. As shown in (f) in Figure 19, the distance between interface element 1907 and text interface element 1905 ⁇ the distance between interface element 1908 and text interface element 1905, and the size of interface element 1907 is the same as the size of interface element 1908 , then the “gravitational force” experienced by interface element 1907 > the “gravitational force” experienced by interface element 1908.
  • the moving distance of interface element 1908 > the moving distance of interface element 1907
  • the moving speed of interface element 1908 > the moving speed of interface element 1907 .
  • the interface element 1907 may not move first, and the electronic device may increase or decrease the "gravitational force” on the interface element 1907. If the "friction force" of the interface element 1907 is small, the interface element 1907 can start to move to the destination position, so that the interface element 1907 moves later than other interface elements. In other words, there is a delay in the movement of the interface element 1907.
  • the time delay of the interface element 1907 can also be understood as the time required for the propagation of "gravity”. Since the interface element 1907 is far away from the interface element 1908, the propagation time of the "gravity" on the interface element 1907 is longer. Then there is a delay in the movement of interface element 1907.
  • interface 1901 may first increase and then decrease.
  • FIG. 17 please refer to the description of FIG. 17 .
  • the electronic device when the electronic device switches interfaces, multiple interface elements in the interface can be connected to achieve a linked animation effect.
  • the animation effect conforms to the laws of nature, improves the user experience and user perception, and makes the user's operation Closer to real-world feelings.
  • Figure 20 shows a set of GUIs provided by embodiments of the present application.
  • Figure 20 shows the interface switching scenario across applications.
  • the electronic device displays an interface 2001.
  • the interface 2001 is the interface of the SMS application program.
  • the electronic device can display multiple interface elements on the interface 2001, such as SMS 2002.
  • the electronic device may display a GUI as shown in (b) of FIG. 20 in response to detecting the user's operation of clicking the text message 2002.
  • the electronic device in response to detecting the user's operation of clicking on the text message 2002, the electronic device can jump to display the interface corresponding to the text message 2002, that is, the interface 2003.
  • Interface 2003 is the interface for the music application.
  • the electronic device can display multiple interface elements on the interface 2003, such as text interface elements 2004, picture interface elements 2005, text interface elements 2006, and control interface elements 2007.
  • the text message 2002 and the picture interface element 2005 can be divided into the main interface elements, and the other interface elements in the interface 2001 or the interface 2003
  • the text interface element 2004, text interface element 2006, and control interface element 2007 can be understood as moving due to the "gravity" of the picture interface element 2005.
  • the electronic device when the electronic device switches interfaces, multiple interface elements in the interface can be connected to achieve a linked animation effect.
  • the animation effect conforms to the laws of nature, improves the user experience and user perception, and makes the user's operation Closer to real-world feelings.
  • Figure 21 shows a set of GUIs provided by the embodiment of the present application.
  • the electronic device displays an interface 2101, and the electronic device can display a weather card on the interface 2101. Since the electronic device displays a whole weather card on the interface 2101, The interface 2101 can also be called the weather card 2101. When the electronic device detects the user's operation of exiting the weather card 2101, the electronic device can reduce the size of the weather card 2101.
  • the electronic device can change the content displayed by the weather card 2101, and can set the weather card 2101 as the main interface element, then the weather card 2103, Due to the influence of "gravity", the weather card 2101 can be gradually approached from above, and the weather cards 2104 and 2105 can be gradually approached from the bottom of the weather card 2101.
  • the moving process of weather cards 2103, 2104, and 2105 may be related to the influencing factors mentioned above.
  • weather card 2103, weather card 2104 and weather card 2101 is smaller than the distance between weather card 2105 and weather card 2101, and the sizes of weather card 2103, weather card 2104 and weather card 2105 are the same.
  • the "gravity” experienced by weather card 2103 and weather card 2104 is greater than the "gravity” experienced by weather card 2105, then the moving speed of weather card 2103 and weather card 2104 can be greater than the moving speed of weather card 2105.
  • Weather card 2103 and weather card 2104 are in The distance moved within the same time period is greater 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.
  • weather card 2101 As the size of weather card 2101 continues to decrease, the "gravity" and movement speed of weather card 2103, weather card 2104, and weather card 2105 can also continue to decrease.
  • the size of weather card 2101 shrinks to the same as the weather card
  • weather card 2103, weather card 2104 and weather card 2105 are the same, weather card 2103, weather card 2104 and weather card 2105 can be moved to the target position and no longer move.
  • the electronic device can also determine the moving effect of the weather card in combination with any of the above-mentioned influencing factors. For the sake of simplicity, details will not be described here.
  • the size of the weather card 2101 As shown in (d) of Figure 21, as the size of the weather card 2101 is further reduced, its size can be the same as the size of the weather card 2103, the weather card 2104, and the weather card 2105 and the two adjacent ones in the interface 2102 The distance between weather cards can be equal.
  • the distances between adjacent weather cards in the weather card 2101, the weather card 2103, the weather card 2104, and the weather card 2105 may be unequal.
  • the electronic device when the electronic device switches interfaces, multiple interface elements in the interface can be connected to achieve a linked animation effect.
  • the animation effect conforms to the laws of nature, improves the user experience and user perception, and makes the user's operation Closer to real-world feelings.
  • Figure 22 shows a set of GUIs provided by embodiments of the present application.
  • the electronic device displays an interface 2201, and the interface 2201 is a calendar interface.
  • the electronic device can display text interface elements 2202, text interface elements 2203, text interface elements 2204 and 12 on the interface 2201. Interface element used to represent different months.
  • the electronic device detects the user's left sliding operation, in response to the operation, the electronic device can change the contents of the text interface element 2202 and the text interface element 2203, and switch 12 interface elements used to represent different months.
  • the interface elements corresponding to January, April, July, and October can be used as the main interface elements, and other interface elements are affected by January. , April, July, and October, the corresponding interface elements move due to the influence of "gravity", and the animation effect of their movement can be determined based on the factors mentioned above.
  • the interface elements corresponding to January, April, July, and October can be divided into interface elements of type #1, and February
  • the interface elements corresponding to May, August, and November are divided into interface elements of type #2
  • the interface elements corresponding to March, June, September, and December are divided into interface elements of type #3, and can be divided into type #2.
  • the interface element #1 is the center point where "gravity” occurs. Then the interface elements of type #2 and the interface element of type #3 will move due to the influence of the "gravity" of the interface element of type #1, and the animation effect of their movement will be This can be determined based on the factors mentioned above.
  • the electronic device when the electronic device switches interfaces, multiple interface elements in the interface can be connected to achieve a linked animation effect.
  • the animation effect conforms to the laws of nature, improves the user experience and user perception, and makes the user's operation Closer to real-world feelings.
  • Figure 23 shows a schematic diagram of the animation process and related control logic of the animation effect of interface switching according to an embodiment of the present application.
  • animation essentially displays the current interface or control in real time based on the refresh rate, using the principle of human visual persistence to make the user feel that the displayed picture is in motion. Therefore, as shown in Figure 23, the electronic device can first determine the initial state of the animation 2310 and the final state of the animation 2320.
  • the electronic device may determine the animation time 2305 of the process of transforming from the initial state 2310 of the linkage animation to the final state 2320 of the linkage animation.
  • the electronic device can also determine the animation type 2330 and the animation transformation form 2340.
  • the animation type 2330 can include the displacement animation 2332 of the interface element, the scaling animation 2334, the rotation animation 2336, the transparency animation 2338, etc.
  • the animation transformation form 2340 can be controlled by the interpolator 2342 and the estimator 2344, for example, in a fixed animation
  • the relevant transformation speed is controlled, etc.
  • the transformation speed may be the moving speed of the interface element.
  • the displacement animation effect generated by the animation effect of interface switching in the embodiment of the present application can be that when the interface is switched, the secondary interface element is affected by Movement occurs due to the influence of main interface elements.
  • the secondary interface element may first move toward the main interface element, and then move in the opposite direction until it reaches the destination position.
  • the secondary interface source may move a certain distance toward the direction of the primary interface source and then stop.
  • the duration and interpolator of the two animations can be defined respectively, and the application side can adjust them as needed.
  • the electronic device may employ any suitable displacement time curve known or discovered in the future to control the movement details of the interface elements.
  • the electronic device may choose to use a Bezier curve or an elastic force curve as the movement curve of the interface element.
  • electronic devices can use second-order Bezier curves to control interface elements to move in a certain direction first, and use elastic force curves to control the reset of interface elements, or vice versa.
  • the electronic device can also use one of Bezier curves or elastic force curves to control movement in a certain direction and control the reset of interface elements.
  • electronic devices can conveniently control the movement of interface elements based on Bezier curves or elastic force curves, making the linkage animation effect more in line with users' habitual perceptions of "attraction” and "repulsion” in life. This further improves the user experience.
  • the following will describe an example in which the electronic device controls the interface element to move 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.
  • FIG. 24 shows a schematic diagram in which the displacement of an interface element changes with time according to an embodiment of the present application and is a Bezier curve.
  • the abscissa represents time
  • the ordinate represents displacement (or distance).
  • the interpolator used to control the movement of interface elements may use a common curve interpolator.
  • the electronic device can achieve different movement effects of interface elements by selecting two second-order points of the second-order Bezier curve. In this way, the interaction of the displacement time curve with time will produce a sense of rhythm in motion. Electronics adjusting the displacement-time curve can cause interface elements to accelerate and decelerate rather than move at a constant rate.
  • any curve form can be equally implemented as the displacement time curve. Movement of interface elements.
  • curve forms include, but are not limited to, first-order Bezier curves, third-order or higher-order Bezier curves, other curve forms known or discovered in the future, or straight lines.
  • FIG. 24 shows a schematic diagram of the displacement of the interface element changing with time according to an embodiment of the present application.
  • the curve is a critical damping elastic force curve.
  • the elastic force curve can use different states in different operating scenarios, that is, critical damping, under-damping and over-damping. Under different damping states, the elastic force curves of displacement time can be different.
  • the three cases are as follows: The square of the damping is equal to 4 times the mass times the stiffness, which is critical damping. Furthermore, if the damping is large, it is over-damped, and if the stiffness is large, it is under-damped.
  • the relevant settings of the elastic engine difference are as follows:
  • Figure 25 shows a schematic diagram of the relationship between the interface switching framework and the application side associated with the animation effect of interface switching according to an embodiment of the present application.
  • the interface for electronic device switching can be a system interface or a third-party application. interface.
  • the interface switching framework 2501 can provide animation effect capabilities.
  • the interface switching framework 2501 can adopt AAR format 2502, JAR format 2503 and system interface 2504.
  • the application side can use the animation effect provided by the interface switching framework 2501 by integrating 2505 and/or calling 2507.
  • the interface switching framework 2501 can provide animation effect capabilities in the form of AAR, JAR, and system interfaces.
  • the application 2506 can be applied to various scenarios required in the field.
  • Figure 26 shows a schematic diagram of a system framework for implementing animation effect capabilities or functions according to an embodiment of the present application.
  • the dynamic effect capability of the linkage framework is implemented based on the overall architecture of the operating system of the electronic device (for example, Android or Hongmeng), which can include mainstream 4-layer logic processing.
  • the data processing process starts from the bottom layer. presented to the user. Users can mainly use and experience the functions of motion effects at the application layer.
  • the interactive relationship between the capabilities of the interface and the linkage framework is depicted in Figure 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.
  • Application layer 2610 may include applications 2612.
  • Application framework layer 2630 may include system services 2632 and extension services 2634.
  • System service 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 an algorithm 2654. The embodiment of this application does not limit the algorithm.
  • Kernel layer 2670 may include drivers 2672 and physical devices 2674.
  • the physical device 2674 can provide a stream of raw parameters to the driver 2672
  • the driver 2672 can provide a stream of function processing parameters to the physical device 2674 . As further shown in FIG.
  • the linkage framework 2626 used to implement the interface switching 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 switching framework 2625.
  • the interface switching framework 2625 may in turn provide the interface switching 2614 of the application layer 2610.
  • Figure 27 shows a schematic diagram illustrating three ways of implementing the animation effect capability or function of interface switching according to an embodiment of the present application.
  • the relationship 2702 between the AAR format 2701 and the system of the electronic device is: the AAR format 2701 is packaged in binary mode, providing the ability to be integrated on the application side of the system, and the version rhythm can be freely controlled.
  • the relationship 2704 between the JAR format 2703 and the electronic device system is as follows: The JAR format 2703 is packaged with binary capabilities, providing the capability to all components in the system to freely control the version rhythm without following 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 of the framework layer in the system version, providing capabilities to all components in the system and following system upgrades. More specifically, the integration method may refer to the AAR and JAR package method, and the calling method may refer to the system interface method. Therefore, the application scenarios of the embodiments of the present application are not limited to any specific scenarios, but the ability to display animation effects of interface switching may be inconsistent. That is to say, the functions of various methods described previously in this application can be implemented through AAR format files, JAR format files and/or system interfaces of electronic devices. In this way, the ability or function of the animation effect of interface switching can be simply and conveniently implemented and provided to the application program of the electronic device.
  • Table 1 is a model table provided by the embodiment of this application.
  • the interface switching framework in the embodiment of the present application may include multiple models, wherein the custom model may be customized by the developer, and the developer may affect the movement of interface elements through the custom model.
  • the interface switching framework includes a gravity model and a friction model.
  • the electronic device determines the animation effect of the interface element during interface switching, it can determine the animation effect of the interface element based on the "gravity” and “friction force" received by the interface element.
  • Table 2 shows the animation effect parameters provided by the embodiment of this application.
  • the implementation details of the animation effect can be adjusted by changing the animation parameters. For example, if the screen of the electronic device is large, the change range of the animation effect can also be increased to ensure that the user can clearly see the details of the animation effect.
  • animation parameter table is only an example.
  • the animation parameters in the embodiment of the present application may include some or all of the above parameters, and may also include other parameters, such as screen material.
  • the embodiments of this application also provide different parameter settings for different linkage models.
  • Table 3 shows the parameter configuration of the gravity model.
  • the time parameter can indicate the time when "gravity” is generated.
  • the range parameter indicates the range of Gravity.
  • the influence factor can affect the size of the "gravity", range parameters, time parameters, etc.
  • the influence factor can be the distance between interface elements, the size of the interface elements, and other influencing factors shown above.
  • other linkage models can be quantified as influence factors, so that the electronic device can change the parameters in the gravity model through the influence factors, thereby determining the animation effect of the interface element.
  • the relevant settings of the above-mentioned interface switching framework can be determined, and then the electronic device parses the relevant settings in the above-mentioned interface switching framework to determine the animation effect of the interface element, thereby completing the interface switching. .
  • Figure 28 shows a schematic flow chart of the display method for interface switching provided by the embodiment of the present application. As shown in Figure 28, the method includes:
  • the electronic device can display a first interface, which includes M interface elements, M ⁇ 1 and is an integer.
  • the electronic device can display an interface 501 and display multiple interface elements on the interface 501 .
  • the electronic device may detect the user's operation of switching the second interface.
  • the electronic device detects the user's operation of clicking on the interface element 1602 .
  • the electronic device detects the user's sliding operation to the left.
  • the operation method of switching the second interface there is no limitation on the operation method of switching the second interface.
  • the user can also switch the second interface through air gestures, voice commands, etc.
  • the second interface is the interface after switching, where the second interface includes N interface elements, N ⁇ 1 and is an integer.
  • the electronic device determines the first main interface element and the position of the first main interface element based on M interface elements; determines the second main interface element, N-1 second interface elements, The position of the second main interface element; determine 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; according to the second main interface element and the N-1 sub-interface elements.
  • Each sub-interface element determines the animation effect of each sub-interface element among the N-1 sub-interface elements.
  • the electronic device determines that the interface element 905 in the interface 901 and the interface element 908 in the interface 907 are the main interface elements.
  • the main interface element moves from the position on interface 901 to the position on interface 907.
  • the electronic device can determine the animation effect of interface element 908, that is, the movement trajectory and movement speed, and the movement trajectory It can be a curve or a straight line, and the movement speed can be preset.
  • Other interface elements in the interface 907 are sub-interface elements. The position of the sub-interface element in the interface 907 is determined. When the sub-interface element moves to the determined position, due to the influence of the interface element 908, its movement trajectory and The movement speed can change, that is, the animation effect changes.
  • the animation effect of each of the N-1 sub-interface elements is determined based on the second main interface element and each of the N-1 sub-interface elements, including:
  • the animation effect of each secondary interface element is determined according to the first interface switching parameter.
  • the first interface switching parameter includes at least one of the following: the size of the second main interface element, the size of each sub-interface element, the distance between the second main interface element and each sub-interface element, each sub-interface element.
  • the restriction parameters and animation effects of the second main interface elements can be understood as parameters set by the electronic device to restrict the movement of each sub-interface element.
  • the limiting parameter for each secondary interface element may be the "friction” and/or "gravity" of each secondary interface element.
  • the electronic device determines each sub-interface element based on the distance between the second main interface element and each sub-interface element. animation effect.
  • the moving speed of the interface element 910 can be greater than the moving speed of the interface element 911.
  • the curvature of the movement trajectory of the element 910 may be greater than the curvature of the movement trajectory of the interface element 911 .
  • the electronic device can determine the animation effect of each sub-interface element based on the animation effect of the second main interface element and each sub-interface element.
  • the electronic device can make the curvature of the movement trajectory of the secondary interface element equal to The curvature of the movement trajectory of the second main interface element is the same, and the movement speed of the secondary interface element is the same as the movement speed of the second main interface element.
  • the electronic device determines the first main interface element and the position of the first main interface element based on the M interface elements, including:
  • the electronic device 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 determines the position of the second main interface element and the second main interface element based on 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.
  • the electronic device determines the animation effect of the second main interface element based on the position of the first main interface element and the position of the second main interface element, including:
  • the electronic device determines the movement trajectory of the second main interface element and the movement speed of the second main interface element based on the position of the first main interface element and the position of the second main interface element.
  • the method further includes:
  • the electronic device determines M-1 sub-interface elements based on M interface elements
  • the electronic device determines the animation effect of each of the N-1 sub-interface elements based on the second main interface element and each of the N-1 sub-interface elements, including:
  • the electronic device determines each of the N-1 sub-interface elements based on the second main interface element, each of the N-1 sub-interface elements, and each of the M-1 sub-interface elements.
  • the animation effect of a secondary interface element is not limited to:
  • the initial position of the N-1 sub-interface elements can be set to the position of one or more interface elements among the M-1 sub-interface elements on the first interface. Location.
  • the linked switching animation effect is determined based on the M interface elements and the N interface elements, including:
  • the one or more positions included in the first position set are positions corresponding to one or more interface elements among the N interface elements on the second interface.
  • the electronic device divides the interface elements in the interface 801 and the interface 806 into four types of interface elements.
  • the electronic device can respectively determine the positions of the four types of interface elements on the interface 801 and the interface 806, and determine the first position set.
  • the position in the first position set is the center point where "gravity" occurs.
  • the position in the first position set can It is a fixed position, or it can be a moving position.
  • the position of the interface element of type #3 on the interface 806 is the first position, or the corresponding position of the interface element of type #3 during movement is the first position.
  • the four types of interface elements can move from the position on the interface 801 to the position on the interface 806 .
  • the description of the movement of interface elements can be found above. For the sake of brevity, it will not be repeated here.
  • the animation effects of N interface elements are determined based on the first position, 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, including :
  • the second interface switching parameter includes at least one of the following: the size of the one or more interface elements, the size of each type of interface element, the relationship between one or more positions in the first position set and each type of interface element. The distance between them, the limiting parameters of each type of interface element, and the animation effect of the first interface element.
  • the restriction parameters of each type of interface element can be understood as the parameters set by the electronic device to limit the movement of each type of interface element.
  • the limiting parameter for each type of interface element may be the "friction" and/or "gravity" of each type of interface element.
  • the electronic device determines each type of interface based on the distance between the first position and each type of interface element.
  • the animation effect of the element is the distance between the first position and each type of interface element.
  • the electronic device can determine the animation effect of each type of interface element based on the animation effect of the first interface element and each type of interface element.
  • M interface elements and N interface elements are divided into L types of interface elements, including:
  • M interface elements and N interface elements are divided into L types of interface elements based on similarity.
  • the similarity includes color similarity, size similarity, and shape similarity.
  • M interface elements and N interface elements are divided into L types of interface elements, including:
  • the M interface elements and the N interface elements are divided 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.
  • M interface elements and N interface elements are divided into L types of interface elements, including:
  • the M interface elements and N interface elements are divided into L types of interface elements according to the labels of the M interface elements and N interface elements.
  • S2804 Switch the first interface to the second interface according to the first linkage switching animation effect.
  • the electronic device After the electronic device determines the first linkage switching animation effect, it can switch the first interface to the second interface, which includes the switching animation of the interface, that is, the GUI as shown in Figure 16 and Figure 17, and the switching animation of the interface elements.
  • the displacement time curves of the N interface elements are Bezier curves or elastic force curves.
  • the method further includes:
  • Switch the first interface to the second interface according to the first linkage switching animation effect including:
  • An embodiment of the present application also provides an electronic device, including a functional module for implementing each step involved in the above method embodiment. It should be noted that all relevant content of each step involved in the above method embodiment can be quoted from the functional description of the corresponding functional module, and will not be described again here.
  • the electronic device provided by the embodiment of the present application is used to perform the above interface display method, and therefore can achieve the same effect as above.
  • An embodiment of the present application also provides an electronic device, including: a processor, a memory, an application program, and a computer program.
  • a processor a memory
  • an application program a computer program
  • Each of the above devices can be connected through one or more communication buses.
  • the one or more computer programs are stored in the above-mentioned memory and configured to be executed by the one or more processors.
  • the one or more computer programs include instructions, and the above-mentioned instructions can be used to cause the electronic device to execute each of the above-mentioned tasks.
  • Various steps of the electronic device in the embodiment are examples of the electronic device, including: a processor, a memory, an application program, and a computer program.
  • the processor may be the processor 110 shown in FIG. 1
  • the memory may be the internal memory 120 shown in FIG. 1 and/or an external memory connected to the electronic device.
  • An embodiment of the present application also provides a chip.
  • the chip includes a processor and a communication interface.
  • the communication interface is used to receive signals and transmit the signals to the processor.
  • the processor processes the signals.
  • the method for displaying the interface as described in any of the previous possible implementations is executed.
  • This embodiment also provides a computer-readable storage medium.
  • Computer instructions are stored in the computer-readable storage medium.
  • the electronic device causes the electronic device to execute the above-mentioned related method steps to implement the above-mentioned embodiments.
  • the method of interface display is not limited to, but not limited to, but not limited to, but not limited to,
  • This embodiment also provides a computer program product.
  • the computer program product When the computer program product is run on a computer, it causes the computer to perform the above related steps to implement the interface display method in the above embodiment.
  • the terms “when” or “after” may be interpreted to mean “if" or “after” or “in response to determining" or “in response to detecting ...”.
  • the phrase “when determining" or “if (stated condition or event) is detected” may be interpreted to mean “if it is determined" or “in response to determining" or “on detecting (stated condition or event)” or “in response to detecting (stated condition or event)”.
  • the disclosed systems, devices and methods can be implemented in other ways.
  • the device embodiments described above are only illustrative.
  • the division of the units is only a logical function division. In actual implementation, there may be other division methods.
  • multiple units or components may be combined or can be integrated into another system, or some features can be ignored, or not implemented.
  • the coupling or direct coupling or communication connection between each other shown or discussed may be through some interfaces, and the indirect coupling or communication connection of the devices or units may be in electrical, mechanical or other forms.
  • the units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place, or they may be distributed to multiple network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of this embodiment.
  • each functional unit in each embodiment of the present application can be integrated into one processing unit, each unit can exist physically alone, or two or more units can be integrated into one unit.
  • the functions are implemented in the form of software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium.
  • the technical solution of the present application is essentially or that part that contributes to the existing technology. Or part of the technical solution can be embodied in the form of a software product.
  • the computer software product is stored in a storage medium and includes a number of instructions to cause a computer device (which can be a personal computer, server, or network device, etc.) to execute All or part of the steps of the methods described in various embodiments of this application.
  • the aforementioned storage media include: U disk, mobile hard disk, read-only memory (ROM), random access memory (Random Access Memory, RAM), magnetic disk or optical disk and other media that can store program code. .

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种界面切换的显示方法，方法包括：电子设备显示第一界面，第一界面包括M个界面元素，M≥1且为整数；电子设备检测到用户切换第二界面的操作，第二界面包括N个界面元素，N≥1且为整数；电子设备响应于所述操作，根据M个界面元素和N个界面元素确定第一联动切换动画效果；电子设备根据第一联动切换动画效果将第一界面切换至第二界面。通过本申请，当电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。

Description

一种界面切换的显示方法以及电子设备
本申请要求于2022年7月22日提交中国专利局、申请号为202210867784.2、申请名称为“一种界面切换的显示方法以及电子设备”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本申请涉及电子设备领域，并且更具体地，涉及一种界面切换的显示方法以及电子设备。
背景技术
随着技术的进步，各种类型的电子设备配置有各种类型的屏幕，其中界面中各种界面元素的显示效果是影响用户体验的重要因素。目前，在进行界面切换时的界面切换效果是固定的，效果十分单一，用户缺乏真实的感受。
发明内容
本申请实施例提供一种界面切换的显示方法以及电子设备，使得电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果。
第一方面，提供了一种一种界面切换的显示方法，其特征在于，该方法包括：电子设备显示第一界面，该第一界面包括M个界面元素，M≥1且为整数；该电子设备检测到用户切换第二界面的操作，该第二界面包括N个界面元素，N≥1且为整数；该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果；该电子设备根据该第一联动切换动画效果将该第一界面切换至该第二界面。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
结合第一方面，在第一方面的某些实现方式中，该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果，包括：该电子设备根据该M个界面元素确定第一主界面元素和该第一主界面元素的位置；该电子设备根据该N个界面元素确定第二主界面元素、该第二主界面元素的位置、N-1个次界面元素；该电子设备根据该第一主界面元素的位置和该第二主界面元素的位置确定第二主界面元素的动画效果；该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果。
结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果，包括：该电子设备根据第一界面切换参数确定该每一个次界面元素的动画效果，其中该第一界面切换参数包括以下中的至少一项：该第二主界面元素的尺寸、该每一个次界面元素的尺寸、该第二主界面元素与该每一个次界面元素之间的距离、该每一个次界面元素的限制参数、该第二主界面元素的动画效果。
结合第一方面，在第一方面的某些实现方式中，该电子设备根据该M个界面元素确定第一主界面元素和该第一主界面元素的位置，包括：该电子设备根据该第一界面的视觉中心确定该第一主界面元素和该第一主界面元素的位置；该电子设备根据该N个界面元素确定第二主界面元素和该第二主界面元素的位置，包括：该电子设备根据该第二界面的视觉中心确定该第二主界面元素和该第二主界面元素的位置。
结合第一方面，在第一方面的某些实现方式中，该每一个次界面元素的动画效果包括该每一个次界面元素的移动轨迹和/或该每一个次界面元素的移动速度，其中该每一个次界面元素的移动轨迹是弯曲的。
结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第一主界面元素的位置和该第 二主界面元素的位置确定第二主界面元素的动画效果，包括：该电子设备根据该第一主界面元素的位置和该第二主界面元素的位置确定该第二主界面元素的移动轨迹和该第二主界面的移动速度。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：该电子设备根据该M个界面元素确定M-1个次界面元素；该电子设备根据该第二主界面元素和该N-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果，包括：该电子设备根据该第二主界面元素、该N-1个次界面元素中的每一个次界面元素、该M-1个次界面元素中的每一个次界面元素确定该N-1个次界面元素中的每一个次界面元素的动画效果。
结合第一方面，在第一方面的某些实现方式中，该电子设备响应于该操作，根据该M个界面元素和该N个界面元素确定第一联动切换动画效果，包括：该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，其中L≥1且为整数；该电子设备确定该L个类型的界面元素的每一个类型的界面元素在该第一界面和该第二界面的位置；该电子设备在该第二界面中确定第一位置集，该第一位置集包括该第二界面中的任意的一个或多个位置；该电子设备根据该第一位置集、该每一个类型的界面元素在该第一界面的位置和该每一个类型的界面元素在该第二界面的位置确定该N个界面元素的动画效果。
结合第一方面，在第一方面的某些实现方式中，该第一位置集包括的一个或多个位置为该N个界面元素中的一个或多个界面元素在该第二界面对应的位置。
结合第一方面，在第一方面的某些实现方式中，该电子设备根据该第一位置集、该每一个类型的界面元素在该第一界面的位置和该每一个类型的界面元素在该第二界面的位置确定该N个界面元素的动画效果，包括：该电子设备根据第二界面切换参数确定该N个界面元素的动画效果，其中该第二界面切换参数包括以下中的至少一项：该一个或多个界面元素的尺寸、该每一个类型的界面元素的尺寸、该第一位置集中的一个或多个位置与该每一个类型的界面元素之间的距离、该每一个类型的界面元素的限制参数、该第一界面元素的动画效果。
结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备根据相似度将该M个界面元素和该N个界面元素划分为L个类型的界面元素。
结合第一方面，在第一方面的某些实现方式中，该相似度包括颜色相似度、尺寸相似度、形状相似度。
结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备确定该M个界面元素在该第一界面的位置和该N个界面元素在该第二界面的位置；该电子设备根据该M个界面元素在该第一界面的位置和该N个界面元素在该第二界面的位置将该M个界面元素和该N个界面元素划分为L个类型的界面元素。
结合第一方面，在第一方面的某些实现方式中，该电子设备将该M个界面元素和该N个界面元素划分为L个类型的界面元素，包括：该电子设备确定该M个界面元素和该N个界面元素的标签；该电子设备根据该M个界面元素和该N个界面元素的标签将该M个界面元素和该N个界面元素划分为L个类型的界面元素。
结合第一方面，在第一方面的某些实现方式中，该N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。
结合第一方面，在第一方面的某些实现方式中，该方法通过AAR格式文件、JAR格式文件或该电子设备的系统接口中的至少一项来实现。
结合第一方面，在第一方面的某些实现方式中，该方法还包括：若检测到该电子设备的类型由第一类型变为第二类型，将该第一联动切换效果切换为第二联动切换效果；该电子设备根据该第一联动切换动画效果将该第一界面切换至该第二界面，包括：该电子设备根据该第二联动切换动画效果将该第一界面切换至该第二界面。
第二方面，为本申请实施例的一种电子设备，该电子设备包括执行上述方面或者上述方面的任意一种可能的设计的方法的模块/单元；这些模块/单元可以通过硬件实现，也可以通过硬件执行相应的软件实现。
第三方面，为本申请实施例的一种芯片，该芯片与电子设备中的存储器耦合，用于调用存储器中存储的计算机程序并执行本申请实施例上述方面及其上述方面任一可能设计的技术方案；本申请实施 例中“耦合”是指两个部件彼此直接或间接地结合。
第四方面，为本申请实施例的一种计算机可读存储介质，该计算机可读存储介质包括计算机程序，当计算机程序在电子设备上运行时，使得该电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
第五方面，为本申请实施例的一种计算机程序，该计算机程序包括指令，当该指令在计算机上运行时，使得该计算机执行如上述方面及其上述方面任一可能设计的技术方案。
第六方面，为本申请实施例的一种电子设备上的图形用户界面，该电子设备具有显示屏、一个或多个存储器、以及一个或多个处理器，该一个或多个处理器用于执行存储在该一个或多个存储器中的一个或多个计算机程序，该图形用户界面包括该电子设备执行上述方面及其上述方面任一可能设计的技术方案时显示的图形用户界面。
第七方面，为本申请实施例的一种电子设备，该电子设备包括一个或多个处理器；一个或多个存储器；该一个或多个存储器存储有一个或多个计算机程序，该一个或多个计算机程序包括指令，当该指令被该一个或多个处理器执行时，使得电子设备执行如上述方面及其上述方面任一可能设计的技术方案。
其中，第二方面至第七方面的有益效果，请参见上述方面的有益效果，不重复赘述。
附图说明
图1是本申请实施例提供的一种电子设备的结构示意图。
图2是本申请实施例提供的一例电子设备的软件结构框图。
图3是本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。
图4是本申请实施例提供的受到“引力”影响的界面元素的移动示意图。
图5是本申请实施例提供的将界面元素划分为主界面元素和次界面元素的示意图。
图6是本申请实施例提供的根据界面元素在界面中的位置划分界面元素的类型的示意图。
图7是本申请实施例提供的根据界面元素的标签划分界面元素的类型的示意图。
图8是本申请实施例提供的界面切换时的动画效果的示意图。
图9是本申请实施例提供的界面切换时的动画效果的示意图。
图10是本申请实施例提供的确定界面元素之间的距离的示意图。
图11是本申请实施例提供的不同距离界面元素界面切换时的动画效果的示意图。
图12是本申请实施例提供的不同尺寸的界面元素界面切换时的动画效果的示意图。
图13是本申请实施例提供的位移时间曲线的示意图。
图14是本申请实施例提供的界面切换时的动画效果示意图。
图15是本申请实施例提供的界面切换时的动画效果示意图。
图16是本申请实施例提供的一种界面切换的形式的示意图。
图17是本申请实施例提供的另一种界面切换的形式的示意图。
图18是本申请实施例提供的另一种界面切换的形式的示意图。
图19是本申请实施例提供的一组GUI。
图20是本申请实施例提供的一组GUI。
图21是本申请实施例提供的一组GUI。
图22是本申请实施例提供的一组GUI。
图23是本申请实施例的界面切换的动画效果的动画过程和相关控制逻辑的示意图。
图24是本申请实施例提供的位移时间曲线的示意图。
图25是本申请实施例的界面切换的动画效果相关联的界面切换框架与应用侧之间的关系的示意图。
图26是本申请实施例的用于实现动画效果能力或功能的系统框架的示意图。
图27是本申请实施例的界面切换的动画效果能力或功能实现的三种方式的具体说明的示意图。
图28是本申请实施例提供的界面切换的显示方法的示意性流程图。
具体实施方式
以下实施例中所使用的术语只是为了描述特定实施例的目的，而并非旨在作为对本申请的限制。 如在本申请的说明书和所附权利要求书中所使用的那样，单数表达形式“一个”、“一种”、“所述”、“上述”、“该”和“这一”旨在也包括例如“一个或多个”这种表达形式，除非其上下文中明确地有相反指示。还应当理解，在本申请以下各实施例中，“至少一个”、“一个或多个”是指一个、两个或两个以上。术语“和/或”，用于描述关联对象的关联关系，表示可以存在三种关系；例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B的情况，其中A、B可以是单数或者复数。字符“/”一般表示前后关联对象是一种“或”的关系。
在本说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。
以下介绍电子设备、用于这样的电子设备的用户界面、和用于使用这样的电子设备的实施例。在一些实施例中，电子设备可以是还包含其它功能诸如个人数字助理和/或音乐播放器功能的便携式电子设备，诸如手机、平板电脑、具备无线通讯功能的可穿戴电子设备(如智能手表)等。便携式电子设备的示例性实施例包括但不限于搭载或者其它操作系统的便携式电子设备。上述便携式电子设备也可以是其它便携式电子设备，诸如膝上型计算机(Laptop)等。还应当理解的是，在其他一些实施例中，上述电子设备也可以不是便携式电子设备，而是台式计算机。
示例性的，图1示出了电子设备100的结构示意图。电子设备100可以包括处理器110，外部存储器接口120，内部存储器121，通用串行总线(universal serial bus，USB)接口130，充电管理模块140，电源管理模块141，电池142，天线1，天线2，移动通信模块150，无线通信模块160，音频模块170，扬声器170A，受话器170B，麦克风170C，耳机接口170D，传感器模块180，指南针190，马达191，指示器192，摄像头193，显示屏194，以及用户标识模块(subscriber identification module，SIM)卡接口195等。
可以理解的是，本申请实施例示意的结构并不构成对电子设备100的具体限定。在本申请另一些实施例中，电子设备100可以包括比图示更多或更少的部件，或者组合某些部件，或者拆分某些部件，或者不同的部件布置。图示的部件可以以硬件，软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元，例如：处理器110可以包括应用处理器(application processor，AP)，调制解调处理器，图形处理器(graphics processing unit，GPU)，图像信号处理器(image signal processor，ISP)，控制器，视频编解码器，数字信号处理器(digital signal processor，DSP)，基带处理器，和/或神经网络处理器(neural-network processing unit，NPU)等。其中，不同的处理单元可以是独立的部件，也可以集成在一个或多个处理器中。在一些实施例中，电子设备100也可以包括一个或多个处理器110。其中，控制器可以根据指令操作码和时序信号，产生操作控制信号，完成取指令和执行指令的控制。在其他一些实施例中，处理器110中还可以设置存储器，用于存储指令和数据。示例性地，处理器110中的存储器可以为高速缓冲存储器。该存储器可以保存处理器110刚用过或循环使用的指令或数据。如果处理器110需要再次使用该指令或数据，可从所述存储器中直接调用。这样就避免了重复存取，减少了处理器110的等待时间，因而提高了电子设备100处理数据或执行指令的效率。
在一些实施例中，处理器110可以包括一个或多个接口。接口可以包括集成电路间(inter-integrated circuit，I2C)接口，集成电路间音频(nter-integrated circuit sound，I2S)接口，脉冲编码调制(pulse code modulation，PCM)接口，通用异步收发传输器(universal asynchronous receiver/transmitter，UART)接口，移动产业处理器接口(mobile industry processor interface，MIPI)，通用输入输出(general-purpose input/output，GPIO)接口，SIM卡接口，和/或USB接口等。其中，USB接口130是符合USB标准规范的接口，具体可以是Mini USB接口，Micro USB接口，USB Type C接口等。USB接口130可以用于连接充电器为电子设备100充电，也可以用于电子设备100与外围设备之间传输数据。该USB接口130也可以用于连接耳机，通过耳机播放音频。
可以理解的是，本申请实施例示意的各模块间的接口连接关系，只是示意性说明，并不构成对电子设备100的结构限定。在本申请另一些实施例中，电子设备100也可以采用上述实施例中不同的接口连接方式，或多种接口连接方式的组合。
充电管理模块140用于从充电器接收充电输入。其中，充电器可以是无线充电器，也可以是有线充电器。在一些有线充电的实施例中，充电管理模块140可以通过USB接口130接收有线充电器的充电输入。在一些无线充电的实施例中，充电管理模块140可以通过电子设备100的无线充电线圈接收无线充电输入。充电管理模块140为电池142充电的同时，还可以通过电源管理模块141为电子设备供电。
电源管理模块141用于连接电池142，充电管理模块140与处理器110。电源管理模块141接收电池142和/或充电管理模块140的输入，为处理器110，内部存储器121，外部存储器，显示屏194，摄像头193，和无线通信模块160等供电。电源管理模块141还可以用于监测电池容量，电池循环次数，电池健康状态(漏电，阻抗)等参数。在其他一些实施例中，电源管理模块141也可以设置于处理器110中。在另一些实施例中，电源管理模块141和充电管理模块140也可以设置于同一个器件中。
电子设备100的无线通信功能可以通过天线1，天线2，移动通信模块150，无线通信模块160，调制解调处理器以及基带处理器等实现。
天线1和天线2用于发射和接收电磁波信号。电子设备100中的每个天线可用于覆盖单个或多个通信频带。不同的天线还可以复用，以提高天线的利用率。例如：可以将天线1复用为无线局域网的分集天线。在另外一些实施例中，天线可以和调谐开关结合使用。
移动通信模块150可以提供应用在电子设备100上的包括2G/3G/4G/5G等无线通信的解决方案。移动通信模块150可以包括至少一个滤波器，开关，功率放大器，低噪声放大器(low noise amplifier，LNA)等。移动通信模块150可以由天线1接收电磁波，并对接收的电磁波进行滤波，放大等处理，传送至调制解调处理器进行解调。移动通信模块150还可以对经调制解调处理器调制后的信号放大，经天线1转为电磁波辐射出去。在一些实施例中，移动通信模块150的至少部分功能模块可以被设置于处理器110中。在一些实施例中，移动通信模块150的至少部分功能模块可以与处理器110的至少部分模块被设置在同一个器件中。
无线通信模块160可以提供应用在电子设备100上的包括无线局域网(wireless local area networks，WLAN)(如无线保真(wireless fidelity，WiFi)网络)，蓝牙(bluetooth，BT)，全球导航卫星系统(global navigation satellite system，GNSS)，调频(frequency modulation，FM)，近距离无线通信技术(near field communication，NFC)，红外技术(infrared，IR)等无线通信的解决方案。无线通信模块160可以是集成至少一个通信处理模块的一个或多个器件。无线通信模块160经由天线2接收电磁波，将电磁波信号调频以及滤波处理，将处理后的信号发送到处理器110。无线通信模块160还可以从处理器110接收待发送的信号，对其进行调频，放大，经天线2转为电磁波辐射出去。
电子设备100通过GPU，显示屏194，以及应用处理器等实现显示功能。GPU为图像处理的微处理器，连接显示屏194和应用处理器。GPU用于执行数学和几何计算，用于图形渲染。处理器110可包括一个或多个GPU，其执行程序指令以生成或改变显示信息。
显示屏194用于显示图像、视频等。显示屏194包括显示面板。显示面板可以采用液晶显示屏(liquid crystal display，LCD)、有机发光二极管(organic light-emitting diode，OLED)、有源矩阵有机发光二极体或主动矩阵有机发光二极体(active-matrix organic light emitting diode，AMOLED)、柔性发光二极管(flex light-emitting diode，FLED)、Miniled、MicroLed、Micro-oLed、量子点发光二极管(quantum dot light emitting diodes，QLED)等。在一些实施例中，电子设备100可以包括1个或多个显示屏194。
在本申请的一些实施例中，当显示面板采用OLED、AMOLED、FLED等材料时，上述图1中的显示屏194可以被弯折。这里，上述显示屏194可以被弯折是指显示屏可以在任意部位被弯折到任意角度，并可以在该角度保持，例如，显示屏194可以从中部左右对折。也可以从中部上下对折。
电子设备100的显示屏194可以是一种柔性屏，目前，柔性屏以其独特的特性和巨大的潜力而备受关注。柔性屏相对于传统屏幕而言，具有柔韧性强和可弯曲的特点，可以给用户提供基于可弯折特性的新交互方式，可以满足用户对于电子设备的更多需求。对于配置有可折叠显示屏的电子设备而言，电子设备上的可折叠显示屏可以随时在折叠形态下的小屏和展开形态下大屏之间切换。因此，用户在配置有可折叠显示屏的电子设备上使用分屏功能，也越来越频繁。
电子设备100可以通过ISP、摄像头193、视频编解码器、GPU、显示屏194以及应用处理器等实现拍摄功能。
ISP用于处理摄像头193反馈的数据。例如，拍照时，打开快门，光线通过镜头被传递到摄像头 感光元件上，光信号转换为电信号，摄像头感光元件将所述电信号传递给ISP处理，转化为肉眼可见的图像。ISP还可以对图像的噪点、亮度、肤色进行算法优化。ISP还可以对拍摄场景的曝光、色温等参数优化。在一些实施例中，ISP可以设置在摄像头193中。
摄像头193用于捕获静态图像或视频。物体通过镜头生成光学图像投射到感光元件。感光元件可以是电荷耦合器件(charge coupled device，CCD)或互补金属氧化物半导体(complementary metal-oxide-semiconductor，CMOS)光电晶体管。感光元件把光信号转换成电信号，之后将电信号传递给ISP转换成数字图像信号。ISP将数字图像信号输出到DSP加工处理。DSP将数字图像信号转换成标准的RGB，YUV等格式的图像信号。在一些实施例中，电子设备100可以包括1个或多个摄像头193。
数字信号处理器用于处理数字信号，除了可以处理数字图像信号，还可以处理其他数字信号。例如，当电子设备100在频点选择时，数字信号处理器用于对频点能量进行傅里叶变换等。
视频编解码器用于对数字视频压缩或解压缩。电子设备100可以支持一种或多种视频编解码器。这样，电子设备100可以播放或录制多种编码格式的视频，例如：动态图像专家组(moving picture experts group，MPEG)1、MPEG2、MPEG3、MPEG4等。
NPU为神经网络(neural-network，NN)计算处理器，通过借鉴生物神经网络结构，例如借鉴人脑神经元之间传递模式，对输入信息快速处理，还可以不断的自学习。通过NPU可以实现电子设备100的智能认知等应用，例如：图像识别、人脸识别、语音识别、文本理解等。
外部存储器接口120可以用于连接外部存储卡，例如Micro SD卡，实现扩展电子设备100的存储能力。外部存储卡通过外部存储器接口120与处理器110通信，实现数据存储功能。例如将音乐，视频等文件保存在外部存储卡中。
内部存储器121可以用于存储一个或多个计算机程序，该一个或多个计算机程序包括指令。处理器110可以通过运行存储在内部存储器121的上述指令，从而使得电子设备100执行本申请一些实施例中所提供的方法，以及各种应用以及数据处理等。内部存储器121可以包括存储程序区和存储数据区。其中，存储程序区可存储操作系统；该存储程序区还可以存储一个或多个应用(比如图库、联系人等)等。存储数据区可存储电子设备100使用过程中所创建的数据(比如照片，联系人等)等。此外，内部存储器121可以包括高速随机存取存储器，还可以包括非易失性存储器，例如一个或多个磁盘存储部件，闪存部件，通用闪存存储器(universal flash storage，UFS)等。在一些实施例中，处理器110可以通过运行存储在内部存储器121的指令，和/或存储在设置于处理器110中的存储器的指令，来使得电子设备100执行本申请实施例中所提供的方法，以及其他应用及数据处理。电子设备100可以通过音频模块170、扬声器170A、受话器170B、麦克风170C、耳机接口170D、以及应用处理器等实现音频功能。例如音乐播放、录音等。
传感器模块180可以包括压力传感器180A、陀螺仪传感器180B、气压传感器180C、磁传感器180D、加速度传感器180E、距离传感器180F、接近光传感器180G、指纹传感器180H、温度传感器180J、触摸传感器180K、环境光传感器180L、骨传导传感器180M等。
其中，压力传感器180A用于感受压力信号，可以将压力信号转换成电信号。在一些实施例中，压力传感器180A可以设置于显示屏194。压力传感器180A的种类很多，如电阻式压力传感器，电感式压力传感器，电容式压力传感器等。电容式压力传感器可以是包括至少两个具有导电材料的平行板。当有力作用于压力传感器180A，电极之间的电容改变。电子设备100根据电容的变化确定压力的强度。当有触摸操作作用于显示屏194，电子设备100根据压力传感器180A检测所述触摸操作强度。电子设备100也可以根据压力传感器180A的检测信号计算触摸的位置。在一些实施例中，作用于相同触摸位置，但不同触摸操作强度的触摸操作，可以对应不同的操作指令。例如：当有触摸操作强度小于第一压力阈值的触摸操作作用于短消息应用图标时，执行查看短消息的指令。当有触摸操作强度大于或等于第一压力阈值的触摸操作作用于短消息应用图标时，执行新建短消息的指令。
陀螺仪传感器180B可以用于确定电子设备100的运动姿态。在一些实施例中，可以通过陀螺仪传感器180B确定电子设备100围绕三个轴(即X、Y和Z轴)的角速度。陀螺仪传感器180B可以用于拍摄防抖。示例性的，当按下快门，陀螺仪传感器180B检测电子设备100抖动的角度，根据角度计算出镜头模组需要补偿的距离，让镜头通过反向运动抵消电子设备100的抖动，实现防抖。陀螺仪传感器180B还可以用于导航，体感游戏场景。
加速度传感器180E可检测电子设备100在各个方向上(一般为三轴)加速度的大小。当电子设备100静止时可检测出重力的大小及方向。还可以用于识别电子设备姿态，应用于横竖屏切换，计步器等应用。
环境光传感器180L用于感知环境光亮度。电子设备100可以根据感知的环境光亮度自适应调节显示屏194亮度。环境光传感器180L也可用于拍照时自动调节白平衡。环境光传感器180L还可以与接近光传感器180G配合，检测电子设备100是否在口袋里，以防误触。
指纹传感器180H用于采集指纹。电子设备100可以利用采集的指纹特性实现指纹解锁，访问应用锁，指纹拍照，指纹接听来电等。
温度传感器180J用于检测温度。在一些实施例中，电子设备100利用温度传感器180J检测的温度，执行温度处理策略。例如，当温度传感器180J上报的温度超过阈值，电子设备100执行降低位于温度传感器180J附近的处理器的性能，以便降低功耗实施热保护。在另一些实施例中，当温度低于另一阈值时，电子设备100对电池142加热，以避免低温导致电子设备100异常关机。在其他一些实施例中，当温度低于又一阈值时，电子设备100对电池142的输出电压执行升压，以避免低温导致的异常关机。
触摸传感器180K，也称“触控面板”。触摸传感器180K可以设置于显示屏194，由触摸传感器180K与显示屏194组成触摸屏，也称“触控屏”。触摸传感器180K用于检测作用于其上或附近的触摸操作。触摸传感器可以将检测到的触摸操作传递给应用处理器，以确定触摸事件类型。可以通过显示屏194提供与触摸操作相关的视觉输出。在另一些实施例中，触摸传感器180K也可以设置于电子设备100的表面，与显示屏194所处的位置不同。
图2是本申请实施例的电子设备100的软件结构框图。分层架构将软件分成若干个层，每一层都有清晰的角色和分工。层与层之间通过软件接口通信。在一些实施例中，将Android系统分为四层，从上至下分别为应用程序层，应用程序框架层，安卓运行时(Android runtime)和系统库，以及内核层。应用程序层可以包括一系列应用程序包。
如图2所示，应用程序层可以包括相机、图库、日历、通话、地图、导航、WLAN、蓝牙、音乐、视频、短信息、广告模块和管理模块等。
其中，广告模块，用于与用户进行广告交互。该广告模块可以是操作系统预置的模块，该广告模块和电子设备可以由同一生产商提供。
管理模块，用于根据广告主ID和设备ID生成OPENID，该管理模块可以是操作系统预置的模块，该管理模块和电子设备可以由同一生产商提供。
应用程序框架层为应用程序层的应用程序提供应用编程接口(application programming interface，API)和编程框架，应用程序框架层包括一些预先定义的函数。
如图2所示，应用程序框架层可以包括窗口管理器、内容提供器、视图系统、电话管理器、资源管理器、通知管理器等。
窗口管理器用于管理窗口程序，窗口管理器可以获取显示屏大小，判断是否有状态栏、锁定屏幕、截取屏幕等。
内容提供器用来存放和获取数据，并使这些数据可以被应用程序访问。所述数据可以包括视频、图像、音频、拨打和接听的电话、浏览历史和书签、电话簿等。
视图系统包括可视控件，例如显示文字的控件，显示图片的控件等。视图系统可用于构建应用程序。显示界面可以由一个或多个视图组成的。例如，包括短信通知图标的显示界面，可以包括显示文字的视图以及显示图片的视图。
电话管理器用于提供电子设备100的通信功能。例如通话状态的管理(包括接通，挂断等)。
资源管理器为应用程序提供各种资源，比如本地化字符串、图标、图片、布局文件、视频文件等等。
通知管理器使应用程序可以在状态栏中显示通知信息，可以用于传达告知类型的消息，可以短暂停留后自动消失，无需用户交互。比如通知管理器被用于告知下载完成，消息提醒等。通知管理器还可以是以图表或者滚动条文本形式出现在系统顶部状态栏的通知，例如后台运行的应用程序的通知，还可以是以对话窗口形式出现在屏幕上的通知。例如在状态栏提示文本信息、发出提示音、电子设备振动、指示灯闪烁等。
系统库可以包括多个功能模块。例如：表面管理器(surface manager)、媒体库(media libraries)、 三维图形处理库(例如：OpenGL ES)、2D图形引擎(例如：SGL)等。
表面管理器用于对显示子系统进行管理，并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频、视频格式回放和录制以及静态图像文件等。媒体库可以支持多种音视频编码格式，例如:MPEG4、H.264、MP3、AAC、AMR、JPG和PNG等。
三维图形处理库用于实现三维图形绘图、图像渲染、合成和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动、摄像头驱动、音频驱动、传感器驱动。
在移动操作系统中(例如Android、鸿蒙、iOS等)，动画的本质是基于刷新率实时显示界面或界面元素。由于人类的视觉暂留原理，使得用户感觉画面是运动的。但是目前的界面在进行切换时的动画仅仅是简单的动画效果的组合，动画效果单一，不符合物理规律，没有考虑真实使用场景和用户使用习惯。
基于此，本申请实施例提供了一种界面切换的显示方法以及装置，在进行界面切换时，可以根据切换前后的界面元素的界面元素的关系确定动画效果，从而加强了界面元素之间的联系，使得动画效果更加符合物理规律，并且考虑到了真实的使用场景和用户的系统，从而可以提高用户的体验。
下面将首先介绍本申请实施例涉及的几个概念。
“引力”：本申请实施例中将自然界的引力概念引入到了界面元素中。本申请实施例中的界面元素之间可以存在“引力”，由于“引力”的存在，当界面中的一个界面元素发生移动时，则该界面中的其他界面元素中的一个或多个由于受到“引力”的影响可以发生移动。下面详细介绍本申请实施例的“引力”在界面元素中的应用。本申请实施例中的“引力”并不限定在同一个界面中，当界面切换时，界面之间以及界面元素之间也可以存在“引力”，具体说明请参见后文。
图3示出了根据本申请实施例的界面元素受到“引力”影响时“引力”方向的示意图。图3中的(a)示出了移动的界面元素的“引力”作用为“吸引力”的示例场景。图3中的(a)所示，右下方的十字图形示意性地表示移动的界面元素的放大的“引力”中心点。另外，在图3中的(a)中，左上方的十字图形示意性地表示受到移动的界面元素的“引力”影响的另一界面元素的放大的一点。在“引力”动画效果被设置为“吸引力”的情况下，在“吸引力”的作用下，该界面元素的受到“引力”的方向为每个受到影响的界面元素的元素中心点指向移动的界面元素的发生中心点的矢量方向。类似地，图3中的(b)示出了移动的界面元素的“引力”作用为“排斥力”的示例场景。如图3中的(b)所示，右下方的十字图形示意性地表示发生中心点，而左上方的十字图形示意性地表示元素中心点。在“引力”动画效果被设置为“排斥力”的情况下，在“排斥力”的作用下，界面元素的“引力”的方向为移动的界面元素的中心点指向每个受到影响的界面元素的中心点的矢量方向。本申请实施例中对于发生中心点和元素中心点的选取不作限定，例如发生中心点和元素中心点可以是界面元素的几何中心，也可以是界面元素中的任意一点。类似于上文的描述，由于本申请实施例中的“引力”并不限定在同一个界面，则在一些实施例中，“引力”的发生中心点可以是一个界面元素在界面切换前的几何中心，元素中心点可以是该界面元素在切换后的几何中心，具体说明请参见后文。
图4示出了本申请实施例提供的受到“引力”影响的界面元素的移动示意图。
如图4中的(a)所示，在同一界面上显示有界面元素401和界面元素402。电子设备可以使得界面元素401向右移动，界面元素401在向右移动时，由于界面元素402受到“引力”的影响也可以向右移动。
如图4中的(b)所示，电子设备可以使得界面元素401向左移动，界面元素401在向左移动时，由于界面元素402受到“引力”的影响也可以向左移动。
需要说明的是，上述示例中，界面元素401向靠近界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“排斥力”，界面元素401向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402的作用为“吸引力”，但本申请实施例并不限定于此，例如，界面元素401向靠近界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“吸引力”，界面元素401向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402的作用为“排斥力”。
再例如，界面元素401向靠近界面元素402的方向移动或向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“排斥力”。换句话说，当界面元素401移动时，其“引力”对界面元素402作用为“排斥力”，与界面元素401的移动方向无关。
再例如，界面元素401向靠近界面元素402的方向移动或向远离界面元素402的方向移动时，界面元素401的“引力”对界面元素402作用为“吸引力”。换句话说，当界面元素401移动时，其“引力”对界面元素402作用为“吸引力”，与界面元素401的移动方向无关。
本申请实施例中提供的界面切换的显示方法，在界面切换过程中，电子设备可以根据界面元素之间的“引力”确定在界面切换过程中的动画效果，使得界面切换更加自然，下面将介绍界面元素的分类以及界面切换过程中的动画效果。
本申请实施例提供的界面切换的显示方法可以将界面中的不同界面元素分成不同的类型，可以理解的是，不同界面中可以包括相同类型的界面元素，从而电子设备在进行界面切换时，可以根据2个界面中相同类型的界面元素的相对移动位置以及界面元素之间的“引力”确定界面切换时的动画效果，若在界面切换后新增一个或多个类型的界面元素，则该一个或多个类型的界面元素可以不受到“引力”的影响，或者也可以受到“引力”的影响，具体说明请参见后文。
本申请实施例中可以通过以下几种方式划分不同界面的界面元素的类型。
一种可能的实现方式，将界面元素划分为主界面元素和次界面元素以确定不同界面中相同类型的界面元素。换句话说，将界面元素划分为主界面元素和次界面元素两个类型。
例如，图5示出了本申请实施例提供的将界面元素划分为主界面元素和次界面元素的示意图，如图5中的(a)所示，电子设备显示有界面501，电子设备可以在界面501显示界面元素502、界面元素503、界面元素504、界面元素505、界面元素506，其中电子设备可以将界面元素505设置为主界面元素，将界面元素502、界面元素503、界面元素504和界面元素506设置为次界面元素。
类似的，如图5中的(b)所示，电子设备显示有界面507，该界面507和界面501不是同一个界面，电子设备可以在界面507显示界面元素508、界面元素509、界面元素510、界面元素511和界面元素512，其中电子设备可以将界面元素508设置为主界面元素，将界面元素509、界面元素510、界面元素511和界面元素512设置为次界面元素。
电子设备可以根据第一预设规则确定主界面元素和次界面元素，本申请实施例中第一预设规则不作限定，用户或开发者可以自定义第一预设规则。
示例性的，电子设备可以将一个界面中的尺寸最大的界面元素确定为主界面元素。界面元素的尺寸可以使用界面元素的面积或周长表征。
示例性的，电子设备可以将一个界面中的位于黄金分割点的界面元素确定为主界面元素。
示例性的，电子设备可以将位于预设区域的界面元素确定为主界面元素。界面的预设区域可以是用户或开发者自定义的。若该预设区域内包括多个界面元素时，电子设备可以随机确定一个界面元素为主界面元素。
一种可能的实现方式，根据界面元素在界面中的位置划分界面元素的类型以确定不同界面中相同类型的界面元素。
具体的，电子设备可以将位于不同界面的相同位置或相同区域的界面元素确定为同一类型的界面元素。
例如，图6示出了本申请实施例提供的根据界面元素在界面中的位置划分界面元素的类型的示意图，如图6中的(a)所示，电子设备显示有界面601，电子设备可以将界面601分为上部、中部和下部3个区域，其中电子设备在界面601的上部区域显示界面元素602、界面元素603和界面元素604，在界面601的中部区域显示界面元素605，在界面601的下部区域显示界面元素606。如图6中的(b)所示，电子设备显示有界面607，类似的，电子设备可以将界面607分为上部、中部和下部3个区域，其中电子设备在界面607的上部区域显示界面元素608和界面元素609，在界面607的中部区域显示界面元素610和界面元素611，在界面607的下部区域显示界面元素612。由于界面元素602、界面元素603、界面元素604位于界面601的上部区域，界面元素608、界面元素609位于界面607的上部区域，则电子设备可以将界面元素602、界面元素603、界面元素604、界面元素608和界面元素609确定为同一个类型的界面元素。类似的，电子设备可以将界面元素605、界面元素610和界面元素611确定为同一个类型的界面元素，将界面元素606和界面元素612确定为同一个类型的界面元素。
需要说明的是，上文中将界面分为了上部、中部、下部区域，但本申请实施例对此不作限定，例如，还可以将界面分为左部、中部、右部区域。
再例如，如图6中的(c)所示，电子设备显示有界面613，电子设备可以在界面613显示有界面 元素614、界面元素615、界面元素616、界面元素617、界面元素618、界面元素619、界面元素620、界面元素621、界面元素622、界面元素623、界面元素624、界面元素625。如图6中的(d)所示，电子设备显示有界面626，界面613和界面626可以是桌面的不同界面，电子设备可以在界面626显示有界面元素627、界面元素628、界面元素629、界面元素630、界面元素631、界面元素632、界面元素633、界面元素634、界面元素635、界面元素636、界面元素637、界面元素638。由于界面元素614在界面613的位置与界面元素627在界面626的位置相同，则电子设备可以确定界面元素614和界面元素627为同一个类型的界面元素。类似的，电子设备可以确定界面元素615和界面元素628为同一个类型的界面元素，确定界面元素616和界面元素629为同一个类型的界面元素，确定界面元素617和界面元素630为同一个类型的界面元素，确定界面元素618和界面元素631为同一个类型的界面元素，确定界面元素619和界面元素632为同一个类型的界面元素，确定界面元素620和界面元素633为同一个类型的界面元素，确定界面元素621和界面元素634为同一个类型的界面元素，确定界面元素622和界面元素635为同一个类型的界面元素，确定界面元素623和界面元素636为同一个类型的界面元素，确定界面元素624和界面元素637为同一个类型的界面元素，确定界面元素625和界面元素638为同一个类型的界面元素。
一种可能的实现方式，确定每一个界面元素的标签，然后根据界面元素的标签划分界面元素的类型以确定不同界面中相同类型的界面元素。
具体的，电子设备可以确定每一个界面元素的标签，则电子设备可以将不同界面中的具有相同标签的界面元素确定为同一个类型的界面元素。
例如，图7示出了本申请实施例提供的根据界面元素的标签划分界面元素的类型的示意图，如图7中的(a)所示，电子设备显示有界面701，电子设备可以在界面701显示界面元素702、界面元素703、界面元素704、界面元素705、界面元素706，其中电子设备可以确定界面元素702和界面元素706的标签为标签#1，界面元素703和界面元素704的标签为标签#2，界面元素705的标签为标签#3。类似的，如图7中的(b)所示，电子设备显示有界面707，电子设备可以在界面707显示界面元素708、界面元素709、界面元素710、界面元素711、界面元素712，其中电子设备可以确定界面元素709、界面元素711和界面元素712的标签为标签#1，界面元素710的标签为标签#2，界面元素708的标签为标签#3。由于界面元素702、界面元素706、界面元素709、界面元素711、界面元素712的标签相同，则电子设备可以确定界面元素702、界面元素706、界面元素709、界面元素711、界面元素712是同一个类型的界面元素，类似的，还可以确定界面元素703、界面元素704、界面元素710是同一个类型的界面元素，界面元素705和界面元素708是同一个类型的界面元素。
本申请实施例对于确定界面元素的标签的方法不作限定。例如，界面是应用程序的界面，开发者在进行开发时，可以定义每一个界面元素的标签。
再例如，用户可以自定义界面元素的标签。
再例如，电子设备预置有用于确定界面元素的标签的第二预设规则。
一种可能的实现方式，电子设备可以根据计算不同界面的界面元素的相似度，将相似度超过第一阈值的界面元素确定为同一个类型的界面元素。
示例性的，电子设备可以计算不同界面的界面元素的颜色相似度，将颜色相似度超过第一阈值的界面元素确定为同一个类型的界面元素。
例如，电子设备在第一界面显示有界面元素#1、界面元素#2、界面元素#3，在第二界面显示有界面元素#4、界面元素#5、界面元素#6，电子设备可以计算界面元素#1与界面元素#4的颜色相似度为40％，界面元素#1与界面元素#5的颜色相似度为60％，界面元素#1与界面元素#6的颜色相似度为60％，则电子设备可以将界面元素#1、界面元素#5、界面元素#6确定为同一个类型的界面元素。
示例性的，电子设备可以计算不同界面的界面元素的尺寸相似度，将尺寸相似度超过第一阈值的界面元素确定为同一个类型的界面元素。
示例性的，电子设备可以计算不同界面的界面元素的形状相似度，将形状相似度超过第一阈值的界面元素确定为同一个类型的界面元素。
应理解，针对电子设备通过尺寸相似度或形状相似度确定不同界面的同一个类型的界面元素的描述可以参见针对电子设备通过颜色相似度确定不同界面的同一个类型的界面元素的描述，为了简洁，在此不再赘述。
需要说明的是，本申请实施例中对于计算相似度的算法不作限定，例如，计算相似度的算法可以是欧几里得距离(eucledian distance)算法、曼哈顿距离(manhattan distance)算法、明可夫斯基距离(minkowski distance)算法、余弦相似度(cosine similarity)算法、杰卡德相似系数(jaccard similarity coefficient)算法、皮尔森相关系数(pearson correlation coefficient)算法等。
一种可能的实现方式，电子设备可以确定不同界面的界面元素的层级，将相同层级的界面元素确定为同一个类型的界面元素。
电子设备在显示界面元素时，可以确定界面中的每一个界面元素的层级，从而电子设备可以将不同界面中的相同层级的界面元素确定为同一个类型的界面元素。
上面介绍了将不同界面的界面元素划分为同一个类型的界面元素，下面将介绍本申请实施例提供的界面切换时的动画效果。
图8示出了本申请实施例提供的界面切换时的动画效果的示意图。
如图8中的(a)所示，电子设备显示有界面801，电子设备在界面801上显示有界面元素802、界面元素803、界面元素804、界面元素805、其中界面801是切换前的界面。
如图8中的(b)所示，电子设备显示还有界面806，电子设备在界面806上显示有界面元素807、界面元素808、界面元素809、界面元素810，其中界面806是切换后的界面。
如图8中的(a)和(b)所示，界面元素802和界面元素809是同一个类型的界面元素，即类型#1，界面元素803和界面元素810是同一个类型的界面元素，即类型#2，界面元素804和界面元素808是同一个类型的界面元素，即类型#3，界面元素805和界面元素807是同一个类型的界面元素，即类型#4。
电子设备将界面由界面801切换至界面806的过程可以理解为电子设备将同一个类型的界面元素由其在界面801的位置移动至其在界面806的位置。例如，如图8中的(c)所示，图中虚线的界面元素代表不同类型的界面元素在界面801的位置，图中实线的界面元素代表不同类型的界面元素在界面806的位置，则电子设备将界面由界面801切换至界面806的过程是将图8中的(c)中的使用虚线表示的不同类型的界面元素移动至使用实线表示的不同类型的界面元素的位置。
电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图8所示的示例中，以类型#3的界面元素的在界面806的位置的中心点为“引力”发生中心点为例，即“引力”中心点可以是界面元素808的几何中心点。
如图8中的(d)-(e)所示，将界面元素808的几何中心点作为“引力”发生中心点，类型#3的界面元素由于受到“引力”影响，可以由虚线位置移动至实线位置，运动轨迹是直线。针对类型#1的界面元素，类型#1的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#1的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，如图8中的(e)所示，类型#1的界面元素的移动轨迹可以由直线变为曲线。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#2的界面元素的移动轨迹可以是直线，由于受到“引力”的影响，如图8中的(e)所示，类型#2的界面元素的移动轨迹可以是曲线。针对类型#4的界面元素，类型#4的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，如图8中的(d)所示，类型#4的界面元素的移动轨迹可以是直线，由于受到“引力”的影响，如图8中的(e)所示，类型#4的界面元素的移动轨迹可以是曲线。
综上所述，类型#1、类型#2、类型#4的界面元素在移动过程中，其移动轨迹可以受到“引力”的影响而发生弯曲。
在上述示例中，界面801和界面806都包含类型#1、类型#2、类型#3、类型#4的界面元素，但本申请实施例并不限定于此，例如如图8中的(a)和(h)所示，若界面806中还包括类型#5的界面元素811，如图8中的(h)所示，图中虚线所示的类型#5的界面元素代表其在用户触发界面切换时在界面806的位置，图中实线所示的类型#5的界面元素代表其在最终完成界面切换时在界面806的位置，由于类型#5的界面元素是新增的界面元素，其可以不受“引力”的影响，因此类型#5的界面元素的移动轨迹可以是直线。在另一些实施例中，类型#5的界面元素也可以受到“引力”的影响，则其移动轨迹可以是曲线。
在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动轨迹的曲率设置为相同的曲率。以此方式，电子设备用于实现界面切换时的动画效果的处理可以被简化。
在另一些实施例中，电子设备可以基于多种影响因素确定将受到“引力”作用影响的界面元素的移动轨迹。例如，不同界面元素的移动轨迹的弯曲方向以及曲率可以不相同。针对影响因素对于受到“引力”作用影响的界面元素的移动轨迹的影响的描述可以参见后文说明，在此不展开叙述。
可以理解的是，类型#1、类型#2、类型#4的界面元素在移动过程中，移动轨迹的弯曲方向与受到“引力”相关，若受到的“引力”作用为“吸引力”，则移动轨迹的弯曲方向可以是朝向“引力”的发生中心点，若受到的“引力”作用为“排斥力”，则移动轨迹的弯曲方向可以是远离“引力”的发生中心点。
例如，如图8中的(e)所示，“引力”的发生中心点为界面元素808的几何中心点，且类型#1、类型#2、类型#4的界面元素受到的“引力”作用为“吸引力”，则类型#1、类型#2、类型#4的界面元素移动轨迹的弯曲方向朝向界面元素808的几何中心点。
再例如，如图8中的(f)所示，“引力”的发生中心点为界面元素808的几何中心点，且类型#1、类型#2、类型#4的受到的“引力”作用为“排斥力”，则类型#1、类型#2、类型#4的界面元素移动轨迹的弯曲方向远离界面元素808的几何中心点。
可以理解的是，若类型#1、类型#2、类型#4的界面元素在移动过程中，既受到“吸引力”，也受到“排斥力”，则类型#1、类型#2、类型#4的界面元素的移动轨迹可以发生多次弯曲。例如，如图8中的(g)所示，类型#1的界面元素在移动过程中先受到“吸引力”，再受到“排斥力”，则其移动轨迹的弯曲方向可以向朝向界面元素808的几何中心点，然后再远离界面元素808的几何中心点。
本申请实施例中，类型#1、类型#2、类型#4的界面元素不仅移动轨迹可以受到“引力”影响，类型#1、类型#2、类型#4的界面元素的移动速度也可以受到“引力”的影响。
在一些实施例中，电子设备可以将受到“引力”作用影响的界面元素的移动速度设置为相同的速度。在此方式，电子设备用于实现界面切换时的动画效果的处理可以被简化。
在一些实施例中，电子设备可以根据界面元素之间的“引力”确定界面元素的移动速度。
例如，以类型#1的界面元素为例，由图8中的(e)示出的类型#1的界面元素的移动轨迹可知，类型#1的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。
在一些实施例中，发生中心点的“引力”对类型#1的界面元素先作用为“吸引力”然后再作用为“排斥力”。类型#1的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#1的界面元素的移动轨迹发生弯曲，随着类型#1的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#1的界面元素的移动速度可以增加，加速度也可以增加。当类型#1的界面元素移动到预设的位置时，电子设备可以使得发生中心点的“引力”对类型#1的界面元素可以作用为“排斥力”，则类型#1的界面元素可以向远离发生中心点的方向移动，此时类型#1的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#1的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#1的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。
针对上述界面元素的移动过程，图8中的(i)示出了类型#1的界面元素的速度时间曲线，如图8中的(i)所示，类型#1的界面元素在移动过程中速度和加速度可以不断增加，但由于随着类型#1的界面元素逐渐远离“引力”发生中心点，加速度可以减小，速度可以继续增加。
在另一些实施例中，发生中心点的“引力”对类型#1的界面元素作用为“吸引力”。类型#1的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#1的界面元素的移动轨迹发生弯曲，随着类型#1的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#1的界面元素的移动速度可以增加，加速度增加。随着类型#1的界面元素向图8中的(e)所示的实线位置移动，由于类型#1的界面元素受到“吸引力”会阻碍其移动，类型#1的界面元素的移动速度可以逐渐减小直至移动到图8中的(e)所示的实线位置。在类型#1的界面元素的移动速度减小的过程中，由于类型#1的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#1的界面元素可以做变减速移动。
针对上述界面元素的移动过程，图8中的(j)示出了类型#1的界面元素的速度时间曲线，如图8中的(j)所示，类型#1的界面元素在移动过程中速度和加速度可以不断增加，但当“吸引力”阻碍类型#1的界面元素的移动时，类型#1的界面元素的移动速度、加速度可以减小，且随着类型#1的界面元素逐渐远离“引力”发生中心点，类型#1的界面元素的移动速度的减小速度可以变缓。
再例如，以类型#2的界面元素为例，由图8中的(e)示出的类型#1的界面元素的移动轨迹可知，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。
在一些实施例中，发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”然后再作用为“排斥力”。类型#2的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲，随着类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#2的界面元素的移动速度可以增加，加速度也可以增加。当类型#2的界面元素移动到预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。
在另一些实施例中，发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。类型#2的界面元素在“吸引力”的作用下，可以按照图中所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲，随着类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#2的界面元素的移动速度可以增加。随着类型#2的界面元素向图8中的(e)所示的实线位置移动，由于类型#2的界面元素受到“吸引力”会阻碍其移动，类型#2的界面元素的移动速度可以逐渐减小直至移动到图8中的(e)所示的实线位置。在类型#2的界面元素的移动速度减小的过程中，由于类型#2的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#2的界面元素可以做变减速移动。
可以理解的是，类型#2的界面元素的速度时间曲线类似于类型#1的界面元素的速度时间曲线，为了简洁，在此不再赘述。
再例如，以类型#4的界面元素为例，由图8中的(e)可知，类型#4的界面元素在移动过程中，由于受到发生中心点的“引力”作用，且“引力”可以作用为“吸引力”，则类型#4的界面元素可以按照图中所示的移动轨迹向着发生中心点的方向移动，随着类型#4的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，则类型#4的界面元素的移动速度可以增加。随着类型#4的界面元素向图8中的(d)所示的实线位置移动，其受到的“吸引力”会阻碍其移动，则类型#4的界面元素的移动速度可以减慢直至移动至图8中的(e)所示的实线位置。在类型#4的界面元素的移动速度减小的过程中，由于类型#4的界面元素与发生中心点之间的距离增加，其受到的“吸引力”减小，则类型#4的界面元素可以做变减速移动。
可以理解的是，类型#4的界面元素的速度时间曲线类似于图8中的(j)所示的曲线，为了简洁，在此不再赘述。
针对上述界面元素的移动过程，图8中的(k)示出了类型#3的界面元素的速度时间曲线，如图8中的(k)所示，类型#3的界面元素在移动过程可以理解为受到“引力”发生中心点的吸引而移动，随着类型#3的界面元素逐渐靠近“引力”发生中心点，类型#3的界面元素受到的“引力”增加，则类型#3的界面元素在移动过程中速度和加速度可以不断增加。针对上述界面元素的移动过程，图8中的(i)-(k)示出的是界面元素的速度时间曲线，图8中的(l)示出了一种类型#1的界面元素位移时间曲线，其中第一曲线是类型#1的界面元素的未受“引力”的位移时间曲线，第二曲线是类型#1的界面元素受到“引力”的位移时间曲线，由图8中的(l)所示，受到“引力”影响的类型#1的界面元素在移动的初期，在同一时刻的位移可以大于未受到“引力”影响的类型#1的界面元素的位移，随着类型#1的界面元素受到的“引力”阻碍其移动，则在同一时刻未受到“引力”影响的类型#1的界面元素的位移大于受到“引力”影响的类型#1的界面元素的位移。
需要说明的是，在上述示例中，“引力”的发生中心点是固定位置，即界面元素808的几何中心点，但本申请实施例的“引力”的发生中心点的位置是可以移动的。例如可以设定移动中的类型#3的界面元素为“引力”的发生中心点。在上述示例中，以“引力”的发生中心点的数量是1个为例，但本申请实施例对此不作限定，“引力”的发生中心点的数量也可以是多个。
还需要说明的是，在上述示例中，电子设备可以根据不同界面中的相同类型的界面元素确定联动切换动画效果，下面将介绍若将界面元素分为主界面元素和次界面元素时，界面切换的动画效果。
图9示出了本申请实施例提供的界面切换时的动画效果的示意图。
如图9中的(a)所示，电子设备显示有界面901，电子设备可以在界面901显示界面元素902、界面元素903、界面元素904、界面元素905、界面元素906，其中电子设备可以将界面元素905设置为主界面元素，将界面元素902、界面元素903、界面元素904和界面元素906设置为次界面元素。
如图9中的(b)所示，电子设备显示有界面907，该界面907和界面901不是同一个界面，电子设备可以在界面907显示界面元素908、界面元素909、界面元素910、界面元素911和界面元素912，其中电子设备可以将界面元素908设置为主界面元素，将界面元素909、界面元素910、界面元素911和界面元素912设置为次界面元素。
当电子设备从界面901切换至界面908的过程中，电子设备显示界面907，并可以以主界面元素在界面907中的位置的中心点为“引力”发生中心点，将主界面元素从界面901的位置移动至界面907的位置，其他次界面元素由于受到“引力”的影响而移动。
如图9中的(b)所示，电子设备在将界面901切换界面907的过程中，界面元素905逐渐变为界面元素908，且逐渐由界面元素905在界面901中的位置移动至界面908在界面907中的位置。主界面元素的移动轨迹可以是直线也可以是曲线，本申请实施例对此不作限定。
界面中的次界面元素由于受到“引力”的影响开始移动，以界面元素910为例，界面元素为次界面元素，电子设备在将界面切换到界面907时，界面元素910由于受到“引力”的影响，可以从图中的虚线指示的位置移动至最终的位置，起始位置可以是界面907中的任意位置，该位置可以由开发者定义。由于界面元素910受到“引力”的影响，其移动轨迹可以是弯曲的，弯曲的方向可以朝向界面元素908或远离界面元素908，具体描述可以参见针对图8的描述，为了简洁，在此不再赘述。
应理解，针对界面元素909，界面元素911，界面元素912移动的描述，可以参见针对界面元素910的描述。
上文描述了电子设备在进行界面切换时由于“引力”的存在使得界面元素的移动存在关联，下面将介绍影响界面切换的显示动画效果的因素。
(1)距离。
首先介绍本申请实施例确定距离的几种可能的方式。
一种可能的实现方式，确定界面元素的基准点，根据界面元素基准点之间的距离确定界面元素的距离。
例如，如图10中的(a)所示，界面显示有界面元素1001和界面元素1002，电子设备可以选取界面元素1001的几何中心点和界面元素1002的几何中心点为基准点，则界面元素1001和界面元素1002的之间的距离可以是界面元素1001的几何中心点与界面元素1002的几何中心点之间的距离。
需要说明的是，图10中的(a)所示的示例中，电子设备在确定两个界面元素之间的距离时，以该两个界面元素的几何中心点为计算的基准点，但本申请实施例并不限定于此，本申请实施例中在计算两个界面元素之间的距离时，可以选取该两个界面元素中的任意一点作为基准点。例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最短的两个点作为基准点。以图中所示的界面元素1001和界面元素1002为例，可以选取界面元素1001下边界和右边界的交点以及界面元素1002的左边界和上边界的交点作为基准点。
再例如，电子设备在计算两个界面元素之间的距离时，可以选取两个界面元素中距离最长的两个点作为基准点。以图中所示的界面元素1001和界面元素1002为例，可以选取界面元素1001的左边界和上边界的交点以及界面元素1002的下边界和右边界的交点作为基准点。
一种可能的实现方式，确定界面元素之间的横向距离，将界面元素之间的横向距离确定为界面元素之间的距离。
例如，如图10中的(b)所示，界面显示有界面元素1001和界面元素1002，界面元素1001和界面元素1002的横向距离为d2，则电子设备可以将d2确定为界面元素之间的距离。
一种可能的实现方式，确定界面元素之间的纵向距离，将界面元素之间的纵向距离确定为界面元素之间的距离。
例如，如图10中的(c)所示，界面显示有界面元素1001和界面元素1002，界面元素1001和界面元素1002的纵向距离为d3，则电子设备可以将d3确定为界面元素之间的距离。
一种可能的实现方式，确定界面元素之间的横向距离和纵向距离，然后根据横向距离和纵向距离确定界面元素之间的距离。
如图10中的(d)所示，界面元素1001和界面元素1002的横向距离为d4，界面元素1001和界面元素1002的纵向距离为d5。作为一种示例，如图10的(e)所示，基于横向距离d4和纵向距离d5的大小，电子设备可以确定出以横向距离d4和纵向距离d5为两条直角边的直角三角形，该直角三角 形具有斜边。然后，基于界面元素1001和界面元素1002几何中心点的连线，电子设备可以在直角三角形内确定一条线段，则电子设备可以根据三角函数原理确定该线段的长度为d6，即界面元素1001和界面元素1002之间的距离d6。
下面将介绍距离对于界面切换的动画效果的影响。
本申请实施例中引入了万有引力模型，万有引力模型可以通过公式1表达：
由公式(1)可得，两个界面元素之间的“引力”与两个界面元素的“质量”和距离有关。由于本申请实施例针对的是界面元素，因此可以使用公式(2)或公式(3)以界面元素的尺寸替代界面元素的“质量”。
M＝K×R                         (2)
M＝K×r                         (3)
其中，k为常量参数，M为界面元素的“质量”，R为界面元素的尺寸，r为两个界面元素之间的距离。
结合公式(1)-公式(3)，可以将公式(1)可以简化为公式(4)，
由公式(4)可得，界面元素之间的“引力”与界面元素的尺寸成正比，与界面元素之间的距离成反比。图11示出了本申请实施例提供的不同距离界面元素界面切换时的动画效果的示意图。
如图11所示，界面1101和界面1104上有类型#1的界面元素和类型#2的界面元素，其中虚线表示的是类型#1的界面元素和类型#2的界面元素在界面1101的位置，实线表示的是类型#1的界面元素和类型#2的界面元素在界面1104的位置。
电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图11所示的示例中，以类型#1的界面元素的在界面1101的位置的中心点为“引力”发生中心点为例。
如图11中的(a)和(b)所示，将类型#1的界面元素在界面1101的几何中心点作为“引力”发生中心点，假设在界面1101中，类型#2的界面元素与发生中心之间的距离为d1，且类型#1的界面元素和类型#2的界面元素的尺寸相同，两个界面元素之间的“引力”为f1。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，类型#2的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，其移动轨迹可以是曲线。
类型#2的界面元素的移动轨迹的曲率与类型#2的界面元素受到的“引力”有关。若类型#2的界面元素受到的“引力”增大，其移动轨迹的曲率增大，若类型#2的界面元素受到的“引力”减小，其移动轨迹的曲率减小。
如图11中的(b)所示，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点。
如图11中的(c)和(d)所示，在界面1101中，类型#2的界面元素与发生中心点之间距离变为d2，d2＞d1，由公式(2)可得，两个界面元素之间的“引力”变为f2，且f2＜f1，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点，但移动轨迹的曲率小于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。
如图11中的(b)和(d)所示，图11中的(d)示出的类型#2的界面元素的移动轨迹的曲率小于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。
需要说明的是，上述示例中以类型#2的界面元素受到的“引力”作用为“吸引力”为例，但本申请实施例并不限定于此。例如，类型#2的界面元素受到的“引力”作用为“排斥力”，或类型#2的界面元素受到的“引力”先作用为“排斥力”再作用为“吸引力”，或类型#2的界面元素受到的“引力”先作用为“吸引力”再作用为“排斥力”，其移动轨迹的曲率都会因为受到“引力”大小的改变而改变。
上面描述了类型#2的界面元素的移动轨迹的曲率由于距离的变化，下面将介绍距离对于移动速度的影响。
如图11中的(b)和(d)所示，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。
在一些实施例中，若发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。图11中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图11中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图11中的(b)的类型#2的界面元素受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素移动速度。
随着图11中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图11中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。
随着类型#2的界面元素向图11中的(d)和(b)所示的实线位置移动，类型#2的界面元素与发生中心点之间的距离增大，则类型#2的界面元素受到“吸引力”会阻碍其移动，使得类型#2的界面元素的加速度呈负值，移动速度减小直至移动至实线位置。但图11中的(b)的类型#2的界面元素由于受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的加速度小于图11中的(d)的类型#2的界面元素的加速度，换句话说，图11中的(b)的类型#2的界面元素的移动速度的减小幅度大于图11中的(d)的类型#2的界面元素的移动速度的减小幅度。
在类型#2的界面元素与发生中心点之间的距离减小的移动过程中，图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素的移动速度，而图11中的(b)的类型#2的界面元素的移动速度的减小幅度大于图11中的(d)的类型#2的界面元素的移动速度的减小幅度，则在一些场景下，图11中的(b)的类型#2的界面元素和图11中的(d)的类型#2的界面元素可以同时达到实线位置，或在另一些场景下，图11中的(b)的类型#2的界面元素可以早于图11中的(d)的类型#2的界面元素达到实线位置，或在另一些场景下，图11中的(b)的类型#2的界面元素可以晚于图11中的(d)的类型#2的界面元素达到实线位置。
在另一些实施例中，若发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”再作用为“排斥力”。图11中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图11中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图11中的(b)的类型#2的界面元素受到的“吸引力”大于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图11中的(b)的类型#2的界面元素的移动速度快于图11中的(d)的类型#2的界面元素移动速度。
随着图11中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图11中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图11中的(b)的类型#2的界面元素的加速度可以大于图11中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。
类似于上文中的描述，随着类型#2的界面元素移动至预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。由于图11中的(b)的类型#2的界面元素由于受到的“排斥力”大于图11中的(d)的类型#2的界面元素受到的“排斥力”，图11中的(b)的类型#2的界面元素的加速度大于图11中的(d)的类型#2的界面元素的加速度，则图11中的(b)的类型#2的界面元素达到实线位置的时间可以早于图11中的(d)的类型#2的界面元素达到实线位置的时间。
上文示例中的界面元素在移动过程中受到的“引力”可以作用为“吸引力”或“排斥力”，在一些实施例中，电子设备可以根据界面元素在移动过程中与发生中心点之间的距离确定受到的“引力”的效果。例如，在切换前的界面中，界面元素与发生中心点之间的距离为d，若界面元素在移动过程中，界面元素与发生中心点之间的距离小于d，则界面元素受到的“引力”作用为“排斥力”；若界面元素在移动过程中，界面元素与发生中心点之间的距离大于d，则界面元素受到的“引力”作用为“吸引力”。
(2)界面元素的尺寸。
由公式(2)可得，两个界面元素之间的“引力”，可以与界面元素的尺寸成正比，与界面元素之间的距离成反比。
本申请实施例中可以使用界面元素的面积、界面元素的周长等表征界面元素的尺寸。
图12示出了本申请实施例提供的不同尺寸的界面元素界面切换时的动画效果的示意图。
如图12所示，界面1201和界面1204上有类型#1的界面元素和类型#2的界面元素，其中虚线表示的是类型#1的界面元素和类型#2的界面元素在界面1201的位置，实线表示的是类型#1的界面元素和类型#2的界面元素在界面1204的位置。
电子设备在移动界面元素时，可以确定一个或多个“引力”发生中心点，在图12所示的示例中，以类型#1的界面元素的在界面1201的位置的中心点为“引力”发生中心点为例。
如图12中的(a)和(b)所示，将类型#1的界面元素在界面1201的几何中心点作为“引力”发生中心点，假设在界面1201中，类型#2的界面元素与发生中心之间的距离为d1，类型#1的界面元素和类型#2的界面元素的尺寸相同，均为R1，在两个界面元素之间的距离是d1，尺寸是R1时，两个界面元素之间的“引力”为f1。针对类型#2的界面元素，类型#2的界面元素在由虚线位置移动至实线位置时，若没有“引力”的影响，类型#2的界面元素的移动轨迹可以是直线，但由于受到“引力”的影响，其移动轨迹可以是曲线。
类型#2的界面元素的移动轨迹的曲率与类型#2的界面元素受到的“引力”有关。若类型#2的界面元素受到的“引力”增大，其移动轨迹的曲率增大，若类型#2的界面元素受到的“引力”减小，其移动轨迹的曲率减小。
如图12中的(c)和(d)所示，若类型#1的界面元素的尺寸由R1增大为R2，类型#2的界面元素的尺寸以及两个界面元素之间的尺寸不变，由公式(2)可得，两个界面元素之间的“引力”可以增大为f2，若类型#2的界面元素受到的“引力”作用为“吸引力”，类型#2的界面元素的移动轨迹的弯曲方向朝向发生中心点，但移动轨迹的曲率大于图11中的(b)示出的类型#2的界面元素的移动轨迹的曲率。
需要说明的是，上述示例中以类型#2的界面元素受到的“引力”作用为“吸引力”为例，但本申请实施例并不限定于此。例如，类型#2的界面元素受到的“引力”作用为“排斥力”，或类型#2的界面元素受到的“引力”先作用为“排斥力”再作用为“吸引力”，或类型#2的界面元素受到的“引力”先作用为“吸引力”再作用为“排斥力”，其移动轨迹的曲率都会因为受到“引力”大小的改变而改变。
还需要说明的是，上述示例中计算类型#1的界面元素和类型#2的界面元素之间的“引力”采用的是类型#1的界面元素和类型#2的界面元素在界面1201中的尺寸，但是本申请实施例对此不作限定，例如，可以采用类型#1的界面元素和类型#2的界面元素在界面1204中的尺寸，或可以采用类型#1的界面元素在界面1201中的尺寸以及类型#2的界面元素在界面1204中的尺寸，或可以采用类型#1的界面元素在界面1204中的尺寸以及类型#2的界面元素在界面1201中的尺寸。
上面描述了类型#2的界面元素的移动轨迹的曲率由于界面元素尺寸的变化而变化，下面将介绍界面元素的尺寸对于移动速度的影响。
如图12中的(b)和(d)所示，类型#2的界面元素在移动过程中与“引力”发生中心点的距离可以先变小再变大。
在一些实施例中，若发生中心点的“引力”对类型#2的界面元素作用为“吸引力”。图12中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图12中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图12中的(b)的类型#2的界面元素受到的“吸引力”小于图12中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素移动速度。
随着图12中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图12中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。
随着类型#2的界面元素向图12中的(d)和(b)所示的实线位置移动，类型#2的界面元素与发生中心点之间的距离增大，则类型#2的界面元素受到“吸引力”会阻碍其移动，使得类型#2的界面元素 的加速度呈负值，移动速度减小直至移动至实线位置。但图12中的(b)的类型#2的界面元素由于受到的“吸引力”小于图11中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的加速度大于图12中的(d)的类型#2的界面元素的加速度，换句话说，图12中的(b)的类型#2的界面元素的移动速度的减小幅度小于图12中的(d)的类型#2的界面元素的移动速度的减小幅度。
在类型#2的界面元素与发生中心点之间的距离减小的移动过程中，图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素的移动速度，而图12中的(b)的类型#2的界面元素的移动速度的减小幅度小于图12中的(d)的类型#2的界面元素的移动速度的减小幅度，则在一些场景下，图12中的(b)的类型#2的界面元素和图12中的(d)的类型#2的界面元素可以同时达到实线位置，或在另一些场景下，图12中的(b)的类型#2的界面元素可以早于图12中的(d)的类型#2的界面元素达到实线位置，或在另一些场景下，图12中的(b)的类型#2的界面元素可以晚于图12中的(d)的类型#2的界面元素达到实线位置。
在另一些实施例中，若发生中心点的“引力”对类型#2的界面元素先作用为“吸引力”再作用为“排斥力”。图12中的(b)和(d)中的类型#2的界面元素在“吸引力”的作用下，可以分别按照图12中的(b)和(d)所示的移动轨迹向着发生中心点的方向移动，使得类型#2的界面元素的移动轨迹发生弯曲。但图12中的(b)的类型#2的界面元素受到的“吸引力”小于图12中的(d)的类型#2的界面元素受到的“吸引力”，则图12中的(b)的类型#2的界面元素的移动速度慢于图12中的(d)的类型#2的界面元素移动速度。
随着图12中的(b)和(d)中的类型#2的界面元素与发生中心点之间的距离减小，“吸引力”可以增加，图12中的(b)和(d)中的类型#2的界面元素的移动速度可以增加。但图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度。可以理解的是，由于图12中的(b)的类型#2的界面元素的加速度可以小于图12中的(d)的类型#2的界面元素的加速度，则两者之间的移动速度的差值也可以增大。
类似于上文中的描述，随着类型#2的界面元素移动至预设的位置时，电子设备可以使得发生中心点的“引力”对类型#2的界面元素可以作用为“排斥力”，则类型#2的界面元素可以向远离发生中心点的方向移动，此时类型#2的界面元素由于受到“排斥力”的影响，移动速度可以增加。随着类型#2的界面元素与发生中心点之间的距离增加，“排斥力”可以减小，类型#2的界面元素的加速度可以减小，移动速度继续增加直至移动至实线位置。由于图12中的(b)的类型#2的界面元素由于受到的“排斥力”小于图12中的(d)的类型#2的界面元素受到的“排斥力”，图12中的(b)的类型#2的界面元素的加速度小于图12中的(d)的类型#2的界面元素的加速度，则图12中的(b)的类型#2的界面元素达到实线位置的时间可以晚于图12中的(d)的类型#2的界面元素达到实线位置的时间。
(3)界面元素移动的方向。
上文示例中的“引力”可以作用为“吸引力”或“排斥力”。界面元素受到的“引力”作用为“吸引力”还是“排斥力”可以与其移动的方向相关。
参考图8中的(c)和(d)，假设以运动中的类型#3的界面元素作为“引力”的发生中心点。针对类型#1的界面元素，类型#3的界面元素在由界面801切换至界面806的过程中向左移动，类型#1的界面元素在由界面801切换至界面806的过程中向右下移动。由类型#3的界面元素和类型#1的界面元素的移动轨迹可以看出，两者在移动过程中，距离可以先变小再变大。类型#3的界面元素和类型#1的界面元素之间的距离变小的过程可以理解为类型#1的界面元素受到的“引力”作用为“吸引力”，从而类型#1的界面元素与类型#3的界面元素之间的距离变小，且随着距离的减小，类型#1的界面元素的移动速度可以加快。当达到临界点时(例如，临界点可以是类型#1的界面元素位于类型#3的界面元素正上方对应的点)，类型#1的界面元素受到的“引力”可以作用为“排斥力”，则类型#1的界面元素和类型#3的界面元素之间的距离可以增大，且随着距离的增大，类型#1的界面元素的移动速度可以减缓直至移动到实线位置。可以理解的是，针对类型#2的界面元素的描述可以参见针对类型#1的界面元素的描述。
继续参考图8中的(c)和(d)，假设以运动中的类型#3的界面元素作为“引力”的发生中心点。针对类型#4的界面元素，类型#3的界面元素在由界面801切换至界面806的过程中向左移动，类型#4的界面元素在由界面801切换至界面806的过程中向左上移动。类型#3的界面元素和类型#4的界面元素的移动方向是相近的。类型#4的界面元素向左上移动可以理解为类型#4的界面元素受到的“引力”为 吸引力。
(4)摩擦力
本申请实施例中，将自然界中的摩擦力引入到了界面元素中，使得动画效果更加贴近自然效果。
本申请实施例中的“摩擦力”可以是“滑动摩擦力”，“滑动摩擦力”可以理解为界面元素在移动过程中受到的“摩擦力”，“滑动摩擦力”会阻碍界面元素的移动，使得界面元素的移动速度发生变化。
首先介绍本申请实施例中几种确定“摩擦力”的方式。
一种可能的实现方式，电子设备可以随机确定界面元素的“摩擦力”。例如，将界面元素#1的“摩擦力”定义为f#1，界面元素#2的“摩擦力”定义为f#2。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“摩擦力”。界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“摩擦力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“摩擦力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“摩擦力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“摩擦力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“摩擦力”越大；示例性的，若界面元素的颜色的RGB分量的离散度越高，其界面元素的“动摩擦因数”越大，则其“摩擦力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“摩擦力”，然后根据每一个对应的“摩擦力”求和得到界面元素的“摩擦力”。
还应理解，上述根据界面元素的颜色确定界面元素的“摩擦力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“摩擦力”。例如，不同的尺寸可以对应有不同的“摩擦力”，越大的界面元素，其“摩擦力”也可以越大。
可以理解的是，界面元素受到的“摩擦力”的方向与移动方向相反，因此“摩擦力”可以影响界面元素的移动速度。
参考图12中的(b)的类型#2的界面元素的移动，若未定义类型#2的界面元素的“摩擦力”，其位移时间曲线可以是图13所示的曲线#1，若定义了类型#2的界面元素的“摩擦力”，由于受到“摩擦力”的影响，类型#2的界面元素的移动速度减慢，则其到达实现位置的时间增加，其位移时间曲线可以是图13所示的曲线#2。
(5)重力
本申请实施例中，将自然界中的重力引入到了界面元素中，使得动画效果更加贴近自然效果。
在针对(4)的介绍中，电子设备定义了界面元素的“摩擦力”。为了更加符合物理规律，本申请实施例中，除了定义界面元素的“摩擦力”，还可以定义界面元素的“重力”以及动摩擦因数，从而可以根据界面元素的“重力”以及动摩擦因数确定界面因素移动时的“摩擦力”。在确定界面元素的“摩擦力”后，电子设备可以根据界面元素的“摩擦力”以及其受到的“引力”确定界面元素的移动时的速度变化，具体描述可以参见上文，在此不再赘述。
本申请实施例中，在确定界面元素的“摩擦力”时，可以通过以下几种方式确定界面元素的“重力”。
一种可能的实现方式，电子设备可以随机确定界面元素的“重力”。例如，将界面元素#1的“重力”定义为G#1，界面元素#2的“重力”定义为G#2。
一种可能的实现方式，电子设备可以根据界面元素的层级定义界面元素的“重力”。同一个界面的界面元素的层级可能不同，则电子设备可以根据界面元素的层级确定界面元素的“重力”。
一种可能的实现方式，电子设备可以根据界面元素的颜色确定界面元素的“重力”。界面元素的颜色可以是RGB颜色，电子设备可以根据界面元素的颜色的RGB分量计算界面元素的“重力”。例如，界面元素#1包括颜色#1，颜色#1的R分量为131，G分量为134，B分量为13，则电子设备可以将上述3个分量的和278确定为界面元素#1的“最大静摩擦力”的大小。再例如，电子设备可以根据界面元素的颜色的RGB分量的离散度按照预设规则确定界面元素的“重力”，示例性的，若界面元素的颜色的RGB分量的离散度越高，其“重力”越大。
应理解，若界面元素包括多个颜色时，可以先分别计算每一个颜色对应的“重力”，然后根据每一 个对应的“重力”求和得到界面元素的“重力”。
还应理解，上述根据界面元素的颜色确定界面元素的“重力”的方式仅为示例，本申请实施中可以通过任何合适的函数关系表征界面元素的颜色与界面元素的“摩擦力”的对应关系。
一种可能的实现方式，电子设备可以根据界面元素的尺寸确定界面元素的“重力”。例如，不同的尺寸可以对应有不同的“重力”，越大的界面元素，其“重力”也可以越大。
需要说明的是，若界面元素是文件夹，该文件夹包括多个界面元素时，该文件夹的“重力”可以是通过该多个界面元素的“重力”相加得到。
(5)划分界面元素的类型的方式。
本申请实施例中可以将界面元素划分为不同的类型，根据划分界面元素类型的方式的不同，界面切换的动画效果可以不同。
示例性的，若将界面元素划分为主界面元素和次界面元素，则主界面元素可以是“引力”发生中心点，次界面元素由于受到“引力”的影响而移动。界面切换的动画效果可以参见针对图9的描述。
示例性的，若将界面元素划分为2个或2个以上的类型且不区分主次界面元素时，电子设备可以确定一个或多个“引力”发生中心，界面切换的动画效果可以参见针对图8的描述。
上文介绍了影响因素对于联动切换动画效果的影响，本申请实施例中影响联动切换动画效果的因素可以互相结合以影响界面切换的动画效果。
示例性的，电子设备可以根据界面元素的尺寸和“摩擦力”确定界面切换的动画效果。
根据上文描述，界面元素的尺寸越大，其受到的“引力越大”，若定义了界面元素的“摩擦力”，则由于受到“摩擦力”的影响，界面元素的移动速度可以减慢。
例如，图14示出了本申请实施例提供的界面切换时的动画效果示意图。
如图14中的(a)和(b)所示，电子设备在界面1401和界面1402上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素，其中虚线表示的是上述界面元素在界面1401的位置，实线表示的是上述界面元素在界面1402的位置。以“引力”发生中心点为类型#1的界面元素在界面1402的位置的几何中心点为例，其中在界面1401中，类型#2的界面元素和发生中心点之间的距离与类型#3的界面元素和发生中心点之间的距离相同，在界面1402中，类型#2的界面元素和发生中心点之间的距离与类型#3的界面元素和发生中心点之间的距离相同。
若没有定义界面元素的“摩擦力”，由于类型#3的界面元素的尺寸大于类型#2的界面元素的尺寸，上述两个界面元素在由虚线位置移动到实线位置的过程中，类型#3的界面元素的移动速度快于类型#2的界面元素的移动速度，且类型#3的界面元素的移动轨迹的曲率大于类型#2的界面元素的移动轨迹的曲率，即类型#3的界面元素的移动距离大于类型#2的界面元素的移动距离。
若定义了界面元素的“摩擦力”，不同界面元素受到的“摩擦力”可以不同，则在一些实施例中，类型#3的界面元素的移动轨迹的曲率可以与类型#2的界面元素的移动轨迹的曲率相同，即类型#3的界面元素的移动距离等于类型#2的界面元素的移动距离。在一些实施例中，类型#3的界面元素的移动速度慢于类型#2的界面元素的移动速度。
示例性的，电子设备可以根据距离和“摩擦力”确定界面切换的动画效果。
根据上文描述，距离越小，其受到的“引力越大”，若定义了界面元素的“摩擦力”，则由于受到“摩擦力”的影响，界面元素的移动速度可以减慢。
例如，图15示出了本申请实施例提供的界面切换时的动画效果示意图。
如图15中的(a)和(b)所示，电子设备在界面1501和界面1502上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素，其中虚线表示的是上述界面元素在界面1501的位置，实线表示的是上述界面元素在界面1502的位置。以“引力”发生中心点为类型#1的界面元素在界面1402的位置的几何中心点为例，其中在界面1501中，类型#3的界面元素和发生中心点之间的距离小于类型#2的界面元素和发生中心点之间的距离，在界面1402中，类型#3的界面元素和发生中心点之间的距离小于类型#2的界面元素和发生中心点之间的距离相同，类型#1的界面元素、类型#2的界面元素、类型#3的界面元素的尺寸相同。
若没有定义界面元素的“摩擦力”，由于类型#3的界面元素与发生中心点之间的距离小于类型#2的界面元素与发生中心点之间的距离，且类型#3的界面元素与类型#2的界面元素的尺寸相同，则类型#3的界面元素受到的“引力”大于类型#2的界面元素受到的“引力”，上述两个界面元素在由虚线位置移动 到实线位置的过程中，类型#3的界面元素的移动速度快于类型#2的界面元素的移动速度，且类型#3的界面元素的移动轨迹的曲率大于类型#2的界面元素的移动轨迹的曲率，即类型#3的界面元素的移动距离大于类型#2的界面元素的移动距离。
若定义了界面元素的“摩擦力”，不同界面元素受到的“摩擦力”可以不同，则在一些实施例中，类型#3的界面元素的移动轨迹的曲率可以与类型#2的界面元素的移动轨迹的曲率相同，即类型#3的界面元素的移动距离等于类型#2的界面元素的移动距离。在一些实施例中，类型#3的界面元素的移动速度慢于类型#2的界面元素的移动速度。
示例性的，电子设备可以根据界面元素的尺寸和“重力”确定界面切换时的动画效果。
示例性的，电子设备可以根据距离和“重力”确定界面切换时的动画效果。
应理解，由于可以根据“重力”以及动摩擦因数确定界面元素的“摩擦力”，因此针对根据界面元素的尺寸和“重力”确定界面切换时的动画效果以及根据距离和“重力”确定界面切换时的动画效果的描述，可以参考针对根据界面元素的尺寸和“摩擦力”确定界面切换时的动画效果以及根据距离和“摩擦力”确定界面切换时的动画效果的描述。
需要说明的是，上述示例以两个因素结合为例，但本申请实施例并不限定于此，电子设备还可以根据两个以上的因素确定界面切换时的动画效果。
上文介绍了影响界面切换时的动画效果的因素，下面将介绍本申请实施例提供的几种界面切换的形式。
图16示出了本申请实施例提供的一种界面切换的形式的示意图。
如图16中的(a)所示，电子设备显示有界面1601，并在界面1601上显示有控件1602，例如控件1602可以是应用图标。电子设备可以响应于检测到用户点击控件1602的操作，将界面由界面1601切换至控件1602对应的界面，即图16中的(b)-(d)所示的界面1603。
如图16中的(b)-(d)所示，电子设备可以响应于检测到用户点击控件1602的操作，以控件1602的位置为发起点逐步增大界面1603的面积以替换界面1601，其中界面1603为控件1602对应的界面。
图16中的(b)-(d)，电子设备在由界面1601切换至界面1603的过程中，电子设备以控件1602的位置为发起点逐步增大界面1603的面积，但本申请实施例并不限定于此，例如如图16中的(e)-(g)所示，电子设备也可以以屏幕的中心为发起点逐步增大界面1603的面积以替换界面1601。
在一些实施例中，界面切换过程中的界面切换速度可以与控件1602相关。
示例性的，界面切换速度可以与控件1602的尺寸相关。如图16中的(a)-(d)所示，假设控件1602的尺寸为R1，当用户点击控件1602，电子设备可以显示界面1603，在t1时刻，界面1603的尺寸为R2，即如图16中的(b)所示的尺寸，在t2时刻，界面1603的尺寸为R3，即如图16中的(c)所示的尺寸。若如图16中的(i)所示，控件1602的尺寸增加为R4，当用户点击控件1602，电子设备可以显示界面1603，且t1时刻，界面1603的尺寸R5＞R2，即如图16中的(j)所示的尺寸，在t3时刻，界面1603的尺寸R6＞R3，即如图16中的(k)所述的尺寸。换句话说，当控件1603的尺寸增加，界面切换的速度也可以增加。
需要说明的是，上述示例仅以控件1603的尺寸越大，界面切换的速度越快为例，但本申请实施例并不限定于此，例如，在另一些实施例中，控件1603的尺寸越大，界面切换的速度越慢。
在一些实施例中，界面切换过程中的界面尺寸时间曲线可以与控件1602相关。
例如，图16中的(m)示出了界面1603的尺寸时间曲线，其中第三曲线为控件1602的尺寸为R1对应的尺寸时间曲线，第四曲线为控件1602的尺寸为R4对应的尺寸时间曲线。由图16中的(m)可知，若控件1602的尺寸为增大，界面1603最初在显示在界面中的尺寸也可以增大，且由于控件1602的尺寸改变，虽然界面1603最终铺满界面的时间不变，但其中的尺寸时间曲线的曲率是不同的。
还需要说明的是，控件1602的尺寸不仅影响界面切换过程中的界面切换速度，还可以影响界面切换过程中的界面透明度的变化。
在一些实施例中，界面切换过程中的界面的透明度的变化速度可以与控件1602的尺寸相关。
如图16中的(a)-(d)所示，假设控件1602的尺寸为R1，当用户点击控件1602，电子设备可以显示界面1603，在t1时刻，即如图16中的(b)所示的界面1603的透明度为T1，在t2时刻，即如图16中的(c)所示的界面1603的透明度为T2。若如图16中的(i)所示，控件1602的尺寸增加为R4，当用户点击控件1602，电子设备可以显示界面1603，且t1时刻，即如图16中的(j)所示的界面 1603的透明度为T3，T3＜T1，在t2时刻，即如图16中的(k)所示的界面1603的透明度为T4，T4＜T2。
在一些实施例中，界面切换过程中的透明度时间曲线可以与控件1602的尺寸相关。
针对上述界面切换过程，图16中的(n)示出了界面1603的透明度时间曲线，其中第五曲线为控件1602的尺寸为R1对应的透明度时间曲线，第六曲线为控件1602的尺寸为R4对应的透明度时间曲线。由图16中的(n)可知，若控件1602的尺寸为增大，其透明度时间曲线的曲率增大，最终透明度降为0的时间可以不变。
图17示出了本申请实施例提供的另一种界面切换的形式的示意图。
如图17中的(a)所示，电子设备显示有界面1701，电子设备可以响应于检测到用户向左滑动的操作，进行界面的切换，界面切换的过程可以如图17中的(b)和(c)所示。
如图17中的(b)和(c)所示，电子设备响应于检测到用户向左滑动的操作，可以使得界面1702从右侧逐步滑入，界面1701从左侧逐步滑出，并最终显示界面1702。
界面1702的移动可以理解为受到界面1701的影响而移动，在一些实施例中，界面1701和界面1702在移动过程中，如图17中的(b)和(c)所示，界面1701的初速度可以快于界面1702的初速度，则界面1701和界面1702之间的距离可以先变大，然后界面1702的速度可以增加至超过界面1701的速度，则界面1701可界面1702之间的距离可以再变小，然后两者之间的距离变小至预设距离后，该预设距离可以是0，界面1701和界面1702的速度保持一致，并最终完成界面的切换。
针对上述界面的移动过程，图17中的(h)示出了一种界面的位移时间曲线，其中第七曲线为界面1702的位移时间曲线，第八曲线为界面1701的位移时间曲线，由图17中的(h)所示，两条曲线在同一时刻的位移差值可以理解为界面1701和界面1702之间的距离，因此由图可知，界面1701和界面1702在移动过程中，两者之间的距离可以先变大，然后在减小至0。两者之间的距离减小为0可以理解为已完成了界面的切换。
图17中的(i)示出了另一种界面的位移时间曲线，其中第九曲线为界面1701的位移时间曲线，第十曲线为界面1702的位移时间曲线，由图17中的(i)所示，两条曲线在同一时刻的位移差值可以理解为界面1701和界面1702之间的距离，若在未移动时界面1701和界面1702之间的距离可以是0，因此由图可知，界面1701和界面1702在移动过程中，界面1702在同一时刻的位移向大于界面1701在该时刻的位移，则界面1702可以覆盖在界面1701之上，随着继续移动，界面1702覆盖在界面1701之间的面积可以减小，即两者之间的距离增大，当两种之间的距离增大为0时完成了界面的切换。
在另一些实施例中，界面1702的移动速度可以快于界面1701的移动速度，则界面1701可以与界面1702发生部分重叠，并最终完成界面的切换。
例如，界面1701包括5个界面元素，界面1702包括3个界面元素，且考虑界面元素的“重力”和动摩擦因素，假设界面1701中的5个界面元素中的每一个界面元素与界面1702中的3个界面元素中的每一个界面元素的“重力”、动摩擦因数相同，则界面1701的“摩擦力”＞界面1702的“摩擦力”，在两者之间的“引力”相等的情况下，界面1702的加速度＞界面1701的加速度，则界面1702的速度可以快于界面1701的移动速度，从而两个界面发生部分重叠。
在另一些实施例中，界面1702的移动速度可以慢于界面1701的移动速度，则界面1701与界面1702之间的距离可以一直增大，并最终完成界面的切换。
图17中的(b)和(c)，电子设备响应于检测到用户向左滑动的操作，将界面1701切换为界面1702，但本申请实施例并不限定于此，例如电子设备也可以响应于检测到用户向除左以外的其他方向滑动，进行界面切换。如图17中的(d)-(f)所示，电子设备可以响应于检测到用户向下滑动的操作，可以使得界面1702从上侧逐步滑入，界面1701从下侧逐步滑出，并最终显示界面1702。在图17中的(d)-(f)所示，界面1702可以覆盖在界面1701之上。
如图16和图17所示的界面切换的形式，电子设备在进行界面切换时会出现一个新的界面以替代切换前的界面，但本申请实施例对此不作限定，例如，在一些实施例中，电子设备可以通过切换界面中的界面元素以实现界面切换的效果。示例性的，图18示出了本申请实施例提供的另一种界面切换的形式。如图18中的(a)，电子设备显示有界面1801，并在界面1801上显示有类型#1的界面元素、类型#2的界面元素、类型#3的界面元素。电子设备可以响应于检测到用户切换界面的操作，电子设备可以在界面1801调整类型#1的界面元素、类型#2的界面元素和类型#3的界面元素的位置以实现界面 切换的效果。
本申请实施例中将自然界中多个力的概念引入到了界面元素中，使得在进行界面切换时，界面元素之间可以联动，且联动的动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
下面将结合应用场景介绍本申请实施例提供的界面切换的方法。
图19示出了本申请实施例提供的一组GUI。
图19所示的应用场景为具有层级结构的界面，即可以认为是在同一个应用程序中的界面的切换。如图19中的(a)所示，电子设备显示有界面1901，界面1901是设置界面，电子设备可以在界面1901上显示多个界面元素，例如文本界面元素1902、搜索栏、卡片等界面元素。电子设备可以响应于检测到用户点击蓝牙1903的操作，可以逐步从右侧显示界面1904。
如图19中的(b)和(c)所示，电子设备响应于检测到用户点击蓝牙1903的操作，可以从右侧逐步显示界面1904，并最终在屏幕上显示界面1904。界面1904是蓝牙的设置界面。电子设备可以在界面1904上显示多个界面元素，例如文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909。
电子设备在由界面1901切换至界面1904的过程中，文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909之间的移动可以符合上文所述的界面切换时的动画效果。
示例性的，电子设备在由界面1901切换至界面1904的过程中，在划分界面元素时，可以将文本界面元素1902和文本界面元素1905划分为主界面元素，其他的在界面1901或界面1904的界面元素为次界面元素，则界面元素1906、界面元素1907、界面元素1908、界面元素1909可以理解为由于受到了文本界面元素1905的“引力”的移动。下面结合图19中的(d)-(f)介绍文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动过程。
需要说明的是，为了便于体现文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动过程，图19中的(d)-(f)仅示出了界面1905以及文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909。
如图19中的(d)所示，文本界面元素1905是主界面元素，文本界面元素1905可以先于次界面元素移动，而次界面元素移动由于受到文本界面元素1905的“引力”的作用发生移动。因此，在同一时间段内，文本界面元素1905的移动距离大于界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动距离。在一些实施例中，界面元素1906、界面元素1907、界面元素1908、界面元素1909在同一时间段内的移动距离相同，移动的速度也可以相同。
在另一些实施例中，界面元素1906与文本界面元素1905之间的距离＜界面元素1907与文本界面元素1905之间的距离＜界面元素1908与文本界面元素1905之间的距离＜界面元素1909与文本界面元素1905之间的距离，则界面元素1906受到的“引力”＞界面元素1907受到的“引力”＞界面元素1908受到的“引力”＞界面元素1909受到的“引力”，因此如图19中的(e)所示，在同一时间段内界面元素1906的移动距离＞界面元素1907的移动距离＞界面元素1908的移动距离＞界面元素1909的移动距离，且界面元素1906的移动速度＞界面元素1907的移动速度＞界面元素1908的移动速度＞界面元素1909的移动速度。
随着文本界面元素1905、界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动至目标位置，最终电子设备可以显示如图19中的(f)所示的GUI。
需要说明的是，界面元素1906、界面元素1907、界面元素1908、界面元素1909的移动轨迹可以是直线，也可以是曲线，曲线的弯曲方向可以朝向文本界面元素1905，或曲线的弯曲方向可以远离界面元素1905。
还需要说明的是，上述仅以距离影响次界面元素的移动为例，但本申请实施例并不限定于此，上文所述的其他因素也可以影响次界面元素的移动。
示例性的，界面元素的尺寸可以影响次界面元素的移动。由图19中的(f)所示，界面元素1907的尺寸大于界面元素1906的尺寸，而界面元素1906与文本界面元素1905之间的距离＜界面元素1907与文本界面元素1905之间的距离，在一些实施例中，界面元素1906受到的“引力”可以＜界面元素1907受到的“引力”，因此，在同一时间段内，界面元素1907的移动距离＞界面元素1906的移动距离，且界面元素1907的移动速度＞界面元素1906的移动速度。
示例性的，“摩擦力”可以影响次界面元素的移动。由图19中的(f)所示，界面元素1907与文本界面元素1905之间的距离＜界面元素1908与文本界面元素1905之间的距离，且界面元素1907的尺寸与界面元素1908的尺寸相同，则界面元素1907受到的“引力”＞界面元素1908受到的“引力”。若定义界面元素1908的“摩擦力”＜界面元素1906的“摩擦力”，在一些实施例中，由于界面元素1908的“摩擦力”＜界面元素1906的“摩擦力”因此，在同一时间段内，界面元素1908的移动距离＞界面元素1907的移动距离，且界面元素1908的移动速度＞界面元素1907的移动速度。
在另一些实施例中，若界面元素1907受到的“引力”小于界面元素1907的“摩擦力”，则界面元素1907可以先不移动，电子设备可以增大界面元素1907受到的“引力”或减小界面元素1907的“摩擦力”，则界面元素1907可以开始向目的位置移动，从而使得界面元素1907晚于其他界面元素的移动，换句话说，界面元素1907的移动存在时延。
在另一些实施例中，界面元素1907的时延也可以理解为“引力”的传播需要时间，由于界面元素1907距离界面元素1908较远，则界面元素1907受到“引力”的传播时间较长，则界面元素1907的移动存在时延。
需要说明的是，在由界面1901切换至界面1904的过程中，不仅界面1907中的多个界面元素由于“引力”的存在发生联动，界面1901和界面1904也存在动画切换效果，例如，界面1901和界面1904之间的距离可以先变大再变小，具体描述可以参见针对图17的描述。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
图20示出了本申请实施例提供的一组GUI。
图20所示的是跨应用程序的界面切换场景。如图20中的(a)所示，电子设备显示有界面2001，界面2001是短信应用程序的界面，电子设备可以在界面2001上显示多个界面元素，例如短信2002。电子设备可以响应于检测到用户点击短信2002的操作，可以显示如图20中的(b)所示的GUI。
如图20中的(b)和(c)所示，电子设备响应于检测到用户点击短信2002的操作，可以跳转显示短信2002对应的界面，即界面2003。界面2003是音乐应用程序的界面。电子设备可以在界面2003上显示多个界面元素，例如文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007。
电子设备在由界面2001切换至界面2003的过程中，文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007之间的移动以及界面2003的尺寸变化、透明度变化等可以符合上文所述的界面切换时的动画效果。
示例性的，电子设备在由界面2001切换至界面2003的过程中，在划分界面元素时，可以将短信2002和图片界面元素2005划分为主界面元素，其他的在界面2001或界面2003的界面元素为次界面元素，则文本界面元素2004、文本界面元素2006、控件界面元素2007可以理解为由于受到了图片界面元素2005的“引力”的移动。
可以理解的是，文本界面元素2004、图片界面元素2005、文本界面元素2006、控件界面元素2007的类似于针对图19的描述，为了简洁，在此不再赘述。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
图21示出了本申请实施例提供的一组GUI。
如图21中的(a)-(b)所示，电子设备显示有界面2101，电子设备可以在界面2101上显示天气卡片，由于电子设备在界面2101上显示的是一整张天气卡片，因此也可以将界面2101称为天气卡片2101。当电子设备检测到用户退出天气卡片2101的操作时，电子设备可以缩小天气卡片2101的尺寸。
如图21中的(c)所示，当天气卡片2101的尺寸缩小到阈值时，电子设备可以改变天气卡片2101显示的内容，并且可以将天气卡片2101设置为主界面元素，则天气卡片2103、由于受到“引力”的影响可以从天气卡片2101的上方逐步靠近天气卡片2101，天气卡片2104、天气卡片2105可以从天气卡片2101的下方逐步靠近天气卡片2101。
天气卡片2103、天气卡片2104、天气卡片2105的移动过程可以与上文所述的影响因素有关。
示例性的，由于天气卡片2103、天气卡片2104与天气卡片2101之间的距离小于天气卡片2105与天气卡片2101之间的距离，且天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同，则天气卡片2103、天气卡片2104受到的“引力”大于天气卡片2105受到的“引力”，则天气卡片2103、天气卡片2104的移动速度可以大于天气卡片2105的移动速度，天气卡片2103、天气卡片2104在相同时间段内移动的距离大于天气卡片2105移动的距离，且天气卡片2104与天气卡片2101之间的距离小于天气卡片2104与天气卡片2105之间的距离。
示例性的，由于天气卡片2101的尺寸不断减小，天气卡片2103、天气卡片2104、天气卡片2105受到的“引力”和移动速度也可以不断减小，当天气卡片2101的尺寸缩小至与天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同时，天气卡片2103、天气卡片2104、天气卡片2105可以移动到目标位置并不再继续移动。
可以理解的是，电子设备还可以结合上述所述的任意影响因素确定上述天气卡片的移动效果，为了简洁，在此不再赘述。
如图21中的(d)所示，随着天气卡片2101的尺寸的进一步缩小，其尺寸可以与天气卡片2103、天气卡片2104、天气卡片2105的尺寸相同且界面2102中的相邻的两个天气卡片之间的距离可以相等。
在另一些实施例中，天气卡片2101、天气卡片2103、天气卡片2104、天气卡片2105中的相邻啷个天气卡片之间的距离可以不相等。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
图22示出了本申请实施例提供的一组GUI。
如图22中的(a)所示，电子设备显示有界面2201，界面2201为日历界面，电子设备可以在界面2201上显示有文本界面元素2202、文本界面元素2203、文本界面元素2204以及12个用于表示不同月份的界面元素。当电子设备检测到用户向左滑动的操作，响应于该操作，电子设备可以改变文本界面元素2202和文本界面元素2203的内容，并切换12个用于表示不同月份的界面元素。
示例性的，电子设备在切换12个用于表示不同月份的界面元素时，可以以1月、4月、7月、10月对应的界面元素为主界面元素，则其他界面元素由于受到1月、4月、7月、10月对应的界面元素的“引力”的影响而发生移动，其移动的动画效果可以根据上文所述的因素确定。
示例性的，电子设备在切换12个用于表示不同月份的界面元素时，可以将1月、4月、7月、10月对应的界面元素划分为类型#1的界面元素，将2月、5月、8月、11月对应的界面元素划分为类型#2的界面元素，将3月、6月、9月、12月对应的界面元素划分为类型#3的界面元素，并可以以类型#1的界面元素为“引力”发生中心点，则类型#2的界面元素和类型#3的界面元素由于受到类型#1的界面元素的“引力”的影响而发生移动，其移动的动画效果可以根据上文所述的因素确定。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
上文示例性的介绍了几种界面切换的应用场景，下面将介绍界面切换的动画控制逻辑以及界面元素移动时的位移时间曲线。
图23示出了根据本申请实施例的界面切换的动画效果的动画过程和相关控制逻辑的示意图。在电子设备的操作系统中，动画本质上就是根据刷新率实时显示当前的界面或者控件，利用人类的视觉暂留原理，使得用户感觉所显示的画面就是运动的。因此，如图23所示，电子设备可以首先确定动画的初态2310和动画的终态2320。另外，电子设备可以确定从联动动画的初态2310变换到联动动画的终态2320的过程持续的动画时间2305。再者，电子设备还可以确定动画类型2330和动画变换形式2340。例如，动画类型2330可以包括界面元素的位移动画2332、缩放动画2334、旋转动画2336、透明动画2338等，而动画变换形式2340可以通过插值器2342和估值器2344来控制，例如在固定的动画时间2305里进行相关变换速度的控制等，对于本申请实施例而言，变换速度可以是界面元素的移动速度。
在本申请实施例中，为了实现界面切换的动画效果，主要是涉及到动画类型2330中的位移动画2332、缩放动画2334、透明动画2338，但是应当理解，其他的联动动画类型也可以可能的。如上文描述的，本申请实施例中界面切换的动画效果产生的位移动画效果可以是在界面切换时，次界面元素受 到主界面元素的影响而发生移动。在一些实施例中，次界面元素可以先朝向主界面元素移动，然后再以相反的方向移动直至达到目的位置。在另一些实施例中，次界面源可以朝向主界面源的方向移动一定距离后停止。
针对界面元素先朝向某一个方向移动，然后再以相反的方向复位这一情况，两段动画可以分别定义时长和插值器，应用侧可以按需进行调节。应理解，电子设备可以采用已知的或未来发现的任何适当的位移时间曲线来控制界面元素的移动细节。在一些实施例中，电子设备可以选择使用贝塞尔曲线或弹性力曲线作为界面元素的移动曲线。例如，电子设备可以使用二阶贝塞尔曲线来控制界面元素先朝向某一个方向移动，并且使用弹性力曲线来控制界面元素的复位，或者反之亦然。当然，在其他实施例中，电子设备也可以使用贝塞尔曲线或弹性力曲线之一来控制向某一个方向移动以及控制界面元素的复位。以此方式，电子设备可以基于贝塞尔曲线或弹性力曲线来方便地控制界面元素的移动，使得联动动画效果更加符合用户在生活中对于“吸引力”和“排斥力”的习惯认知，从而进一步改进用户体验。下文将结合图24来描述电子设备基于二阶贝塞尔曲线来控制界面元素朝向某一个方向移动的示例，以及描述电子设备基于弹性力曲线来控制界面元素复位的示例。
图24中的(a)示出了根据本申请实施例的界面元素的位移随时间变化曲线为贝塞尔曲线的示意图。在图24中的(a)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。在一些实施例中，用于控制界面元素移动的插值器可以使用常见的曲线插值器。
具体地，电子设备可以通过选择二阶贝塞尔曲线的两个二阶的点，从而达到界面元素的不同移动效果。以此方式，位移时间曲线与时间的相互配合将会产生运动的韵律感。电子设备调整位移时间曲线可以使界面元素实现加速和减速，而不是以恒定的速率移动。
需要说明的是，本申请实施例仅以二阶贝塞尔曲线作为位移时间曲线描述了一些示例，但是本申请实施例不限于此，而是可以等同地将任何曲线形式作为位移时间曲线来实现界面元素的移动。例如，这样的曲线形式包括但不限于一阶贝塞尔曲线、三阶或更高阶贝塞尔曲线、其他已知的或未来发现的其他曲线形式、或者直线。
图24中的(b)示出了根据本申请实施例的界面元素的位移随时间变化义曲线为临界阻尼弹性力曲线的示意图。一般地，弹性力曲线在不同的操作场景可以使用不同的状态，也即，临界阻尼、欠阻尼和过阻尼。在不同的阻尼状态下，位移时间的弹性力曲线可以是不一样的。具体地，三种情况如下：阻尼的平方等于4倍的质量乘以刚性，这是临界阻尼。进一步地，如果阻尼大就是过阻尼，刚性大就是欠阻尼。特别地，阻尼的平方小于4倍质量乘以刚性为欠阻尼，而阻尼的平方大于4倍的质量乘以刚性为过阻尼。在图24中的(b)示出的位移时间曲线图中，横坐标表示时间，纵坐标表示位移(或距离)。应当理解，尽管图24中的(b)将本申请实施例的界面元素复位的位移时间曲线示例性地描绘为临界阻尼弹性力曲线，但是本申请实施例不限于此，而是等同地适用于任何其他的曲线，例如还可以是如图24中的(c)示出的欠阻尼弹性力曲线或如图24中的(d)示出的过阻尼弹性力曲线。
在一些实施例中，弹性引擎差值其的相关设置如下：
代码类的实现：
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)
调用距离：
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()；
弹簧引擎动画类：
动画类实例:
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)
动画类调用实例：
1.HWSpringAnimation animation＝HWSpringAnimation(listView,DynamicAnimation.TRANSLATION_Y,400F,40F,0,1000F)；
2.animation.start()；
图25示出了根据本申请实施例的界面切换的动画效果相关联的界面切换框架与应用侧之间的关系的示意图，电子设备切换的界面可以是系统界面，也可以是第三方应用程序的界面。如图25所示，界面切换框架2501可以提供动画效果能力。界面切换框架2501可以采用AAR形式2502、JAR形式2503和系统接口2504。应用侧可以通过集成2505和/或调用2507的方式来使用界面切换框架2501提供的动画效果。也就是说，界面切换框架2501可以采用AAR、JAR、系统接口的形式来提供动画效果的能力，应用2506集成之后可以应用在领域内需要的各种场景。
图26示出了根据本申请实施例的用于实现动画效果能力或功能的系统框架的示意图。在一些实施例中，联动框架的动效能力的是基于电子设备的操作系统(例如，安卓或者鸿蒙)的整体架构来实现的，可以包含主流的4层的逻辑处理，数据处理的流程从底层往上呈现给用户。用户可以主要在应用程序层使用和体验动效的功能。在本申请实施例中，界面和联动框架的能力交互关系如图26所描绘。具体地，如图26所示，该系统框架可以包括应用程序层2610、应用程序框架层2630、硬件抽象层2650、以及内核层2670。应用程序层2610可以包括应用2612。应用上可以进行界面切换2614。应用程序框架层2630可以包括系统服务2632和扩展服务2634。系统服务2632可以包括各种系统服务，例如Service2633。扩展服务2634可以包括各种扩展服务，例如HwSDK 2635。硬件抽象层(HAL)2650可以包括HAL3.0 2652和算法2654，本申请实施例对于算法不作限定。内核层2670可以包括驱动2672和物理设备2674。物理设备2674可以向驱动2672提供原始参数流，而驱动2672可以向物理设备2674提供功能处理参数流。如图26进一步示出的，用于实现界面切换框架2625的联动框架2626可以实现在应用程序层2610与应用程序框架层2630之间。UI框架2626可以包括平台能力2622和系统能力2624，两者可以用于提供界面切换框架2625。界面切换框架2625进而可以提供给应用程序层2610的界面切换2614。
图27示出了根据本申请实施例的界面切换的动画效果能力或功能实现的三种方式的具体说明的示意图。如图27所示，AAR格式2701与电子设备的系统之间的关系2702为：AAR格式2701是以二进制方式的能力打包的，提供给系统中应用侧集成的能力，可以自由控制版本节奏，不跟随系统。JAR格式2703与电子设备的系统之间的关系2704为：JAR格式2703是以二进制方式的能力打包的，提供给系统中所有部件的能力，可以自由控制版本节奏，不跟随系统。系统接口2705与电子设备的系统之间的关系2706为：系统接口2705是系统版本中的框架层的接口，提供给系统中所有部件的能力，跟随系统升级。更具体地，集成方式可以是指AAR和JAR包的方式，调用方式可以是指系统接口的方式。因此，本申请实施例应用的场景是不限于任何特定场景的，只是界面切换的动画效果的能力的展现方式可能不一致。也就是说，本申请前文描述的各种方法的功能可以通过AAR格式文件、JAR格式文件和/或电子设备的系统接口来实现。以此方式，界面切换的动画效果的能力或功能可以简单和方便地被实现并提供给电子设备的应用程序。
下面将介绍本申请实施例界面切换框架的相关设置。
表1为本申请实施例提供的模型表。
表1联动模型表
本申请实施例中的界面切换框架可以包括多个模型，其中自定义模型可以是由开发者自定义的，开发者可以通过自定义模型影响界面元素的移动。
例如，界面切换框架包括引力模型和摩擦力模型，则电子设备在进行界面切换确定界面元素的动画效果时，可以基于界面元素的受到的“引力”和“摩擦力”确定界面元素的动画效果。
表2为本申请实施例提供的动画效果参数。
表2动画参数表
本申请实施例中可以通过改变动画参数以调整动画效果的实现细节，例如，电子设备的屏幕大，动画效果的变化幅度也可以增大，以保证用户可以看清动画效果的细节。
需要说明的是，上述动画参数表仅为示例，本申请实施例中的动画参数可以包括上述部分或全部的参数，还可以包括其他参数，例如屏幕材质。
本申请实施例还针对不同的联动模型提供了不同的参数设置。
例如，表3所示为引力模型的参数配置。
表3引力模型参数表
其中，时间参数可以指示产生“引力”的时间。范围参数可以指示“引力”的范围。影响因子可以影响“引力”的大小，范围参数、时间参数等，例如影响因子可以是界面元素之间的距离、界面元素的尺寸等上文示出的影响因素。
在一些实施例中，本申请实施例中，可以将其他联动模型量化为影响因子，从而电子设备可以通过影响因子改变引力模型中的参数，进而确定界面元素的动画效果。
电子设备在进行界面切换确定界面元素的移动动画效果，可以确定上述的界面切换框架的相关设置，然后电子设备解析上述界面切换框架中的相关设置以确定界面元素的动画效果，从而可以完成界面切换。
上文介绍了界面切换时界面元素的动画效果，界面切换的应用场景、界面切换框架设置等，下面将介绍本申请实施例提供的界面显示方法的示意性流程图。
图28示出了本申请实施例提供的界面切换的显示方法的示意性流程图，如图28所示，该方法包括：
S2801，显示第一界面。
示例性的，电子设备可以显示第一界面，该界面包括M个界面元素，M≥1且为整数。
例如，如图5所示，电子设备可以显示界面501，并在界面501显示有多个界面元素。
S2802，检测到用户切换第二界面的操作。
示例性的，电子设备可以检测到用户切换第二界面的操作。
例如，如图16中的(a)所示，电子设备检测到用户点击界面元素1602的操作。
再例如，图17中的(a)所示，电子设备检测到用户向左滑动的操作。
需要说明的是，本申请实施例中对于切换第二界面的操作的方式不作限定，例如用户还可以通过隔空手势、语音指令等切换第二界面。
第二界面是切换后的界面，其中第二界面包括N个界面元素，N≥1且为整数。
S2803，响应于用户的操作，根据M个界面元素和N个界面元素确定第一联动切换动画效果。
在一些实施例中，电子设备根据M个界面元素确定第一主界面元素和第一主界面元素的位置；根据N个界面元素确定第二主界面元素、N-1个第二次界面元素、第二主界面元素的位置；根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的动画效果；根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果。
例如，如图9所示，电子设备确定界面901中的界面元素905、界面907中的界面元素908为主界面元素。在由界面901切换至界面907的过程中，主界面元素由在界面901的位置移动到了在界面907的位置，则电子设备可以确定界面元素908的动画效果，即移动轨迹和移动速度，移动轨迹可以是曲线或直线，移动速度可以是预设的。界面907中的其他界面元素为次界面元素，次界面元素在界面907中的位置是确定好的，次界面元素在向确定好的位置移动时，由于受到界面元素908的影响，其移动轨迹和移动速度可以发生改变，即动画效果发生改变。
在一些实施例中，根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果，包括：
根据第一界面切换参数确定每一个次界面元素的动画效果。
第一界面切换参数包括以下中的至少一项：第二主界面元素的尺寸、每一个次界面元素的尺寸、第二主界面元素与每一个次界面元素之间的距离、每一个次界面元素的限制参数、第二主界面元素的动画效果。每一个次界面元素的限制参数可以理解为电子设备设定的限制每一个次界面元素移动的参数。例如，每一个次界面元素的限制参数可以是每一个次界面元素的“摩擦力”和/或“重力”。
示例性的，若第一界面切换参数为第二主界面元素与每一个次界面元素之间的距离，则电子设备根据第二主界面元素和每一个次界面元素的距离确定每一个次界面元素的动画效果。
例如，如图9所示，由于界面元素908与界面元素910之间的距离小于界面元素908与界面元素911之间的距离，则界面元素910的移动速度可以大于界面元素911的移动速度，界面元素910的移动轨迹的曲率可以大于界面元素911的移动轨迹的曲率。
示例性的，若第一界面切换参数为第二主界面元素的动画效果，则电子设备可以根据第二主界面元素的动画效果和每一个次界面元素确定每一个次界面元素的动画效果。
例如，如图9所示，电子设备确定第二主界面元素的动画效果后，即确定了第二主界面元素的移动轨迹和移动速度，则电子设备可以使得次界面元素的移动轨迹的曲率与第二主界面元素的移动轨迹的曲率相同，次界面元素的移动速度与第二主界面元素的移动速度相同。
应理解，上文所述仅为示例，针对第一界面切换参数的具体描述可以参见上文，在此不再赘述。
在一些实施例中，电子设备根据M个界面元素确定第一主界面元素和第一主界面元素的位置，包括：
电子设备根据第一界面的视觉中心确定第一主界面元素和所述第一主界面元素的位置；
电子设备根据N个界面元素确定第二主界面元素和第二主界面元素的位置，包括：
电子设备根据第二界面的视觉中心确定第二主界面元素和第二主界面元素的位置。
在一些实施例中，电子设备根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的动画效果，包括：
电子设备根据第一主界面元素的位置和第二主界面元素的位置确定第二主界面元素的移动轨迹和第二主界面的移动速度。
在一些实施例中，该方法还包括：
电子设备根据M个界面元素确定M-1个次界面元素；
电子设备根据第二主界面元素和N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：
电子设备根据所述第二主界面元素、N-1个次界面元素中的每一个次界面元素、M-1个次界面元素中的每一个界面元素确定N-1个次界面元素中的每一个次界面元素的动画效果。
例如，电子设备在由第一界面切换至第二界面时，可以将N-1个次界面元素初始位置设定为M-1个次界面元素中的一个或多个界面元素在第一界面的位置。
在一些实施例中，响应于操作，根据M个界面元素和N个界面元素确定联动切换动画效果，包括：
将M个界面元素和N个界面元素划分为L个类型的界面元素，其中L≥1且为整数；确定L个类型的界面元素的每一个类型的界面元素在第一界面和第二界面的位置；在第二界面元素确定第一位置集，第一位置集包括第二界面中的任意的一个或多个位置；根据第一位置集、每一个类型的界面元素在第一界面的位置和每一个类型的界面元素在第二界面的位置确定N个界面元素的动画效果。
在一些实施例中，第一位置集包括的一个或多个位置为N个界面元素中的一个或多个界面元素在第二界面对应的位置。
例如，如图8所示，电子设备将界面801和界面806中的界面元素划分为4个类型的界面元素。电子设备可以分别确定4个类型的界面元素在界面801和界面806的位置，并确定第一位置集，第一位置集中的位置是“引力”的发生中心点，该第一位置集中的位置可以是固定位置，也可以是移动位置，如图8所示，类型#3的界面元素在界面806的位置为第一位置，或类型#3的界面元素移动过程中对应的位置为第一位置。电子设备在确定“引力”发送中心点，即第一位置后，4个类型的界面元素可以由在界面801的位置移动至在界面806的位置。针对界面元素移动的描述可以参见上文，为了简洁，在此不再赘述。
可选的，在一些实施例中，根据第一位置、每一个类型的界面元素在第一界面的位置和每一个类型的界面元素在第二界面的位置确定N个界面元素的动画效果，包括：
根据第二界面切换参数确定N个界面元素的动画效果。
第二界面切换参数包括以下中的至少一项：该一个或多个界面元素的尺寸、每一个类型的界面元素的尺寸、第一位置集中的一个或多个位置与每一个类型的界面元素之间的距离、每一个类型的界面元素的限制参数、第一界面元素的动画效果。每一个类型的界面元素的限制参数可以理解为电子设备设定的限制每一个类型的界面元素移动的参数。例如，每一个类型的界面元素的限制参数可以是每一个类型的界面元素的“摩擦力”和/或“重力”。
示例性的，若第二界面切换参数为第一位置与每一个类型的界面元素之间的距离，则电子设备根据第一位置与每一个类型的界面元素之间的距离确定每一个类型的界面元素的动画效果。
例如，如图11所示，以类型#1的界面元素在界面1104的位置为第一位置为例，若类型#2的界面元素与第一位置的距离由d1变为d2，则类型#2的界面元素的移动轨迹的曲率可以变小，移动速度也可以变小。
示例性的，若第二界面切换参数为第一界面元素的动画效果，则电子设备可以根据第一界面元素的动画效果和每一个类型的界面元素确定每一个类型的界面元素的动画效果。
例如，如图8所示，以第一界面元素为类型#3的界面元素为例，若类型#3的界面原的移动速度增加，类型#1的界面元素、类型#2的界面元素、类型#3的界面元素的速度也可以增加。
应理解，上文所述仅为示例，针对第二界面切换参数的具体描述可以参见上文，在此不再赘述。
在一些实施例中，将M个界面元素和N个界面元素划分为L个类型的界面元素，包括：
根据相似度将M个界面元素和N个界面元素划分为L个类型的界面元素。
在一些实施例中，相似度包括颜色相似度、尺寸相似度、形状相似度。
在一些实施例中，将M个界面元素和N个界面元素划分为L个类型的界面元素，包括：
确定M个界面元素在第一界面的位置和N个界面元素在第二界面的位置；
根据M个界面元素在第一界面的位置和N个界面元素在第二界面的位置将M个界面元素和N个界面元素划分为L个类型的界面元素。
在一些实施例中，将M个界面元素和N个界面元素划分为L个类型的界面元素，包括：
确定M个界面元素和N个界面元素的标签；
根据M个界面元素和N个界面元素的标签将M个界面元素和N个界面元素划分为L个类型的界面元素。
应理解，针对将M和界面元素和N个界面元素划分为L个类型的界面元素的描述可以参加上文，为了简洁，在此不再赘述。
S2804，根据第一联动切换动画效果将第一界面切换至第二界面。
电子设备确定第一联动切换动画效果后可以将第一界面切换至第二界面，其中包括了界面的切换动画，即如图16和图17所示的GUI，以及界面元素的切换动画。
在一些实施例中，N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。
在一些实施例中，方法还包括：
若检测到电子设备的类型由第一类型变为第二类型，将第一界面切换效果切换为第二界面切换效果；
根据第一联动切换动画效果将第一界面切换至第二界面，包括：
根据第二联动切换动画效果将第一界面切换至第二界面。
本申请实施例中，当电子设备切换界面时，可以将界面中的多个界面元素联立以及切换前后的界面联立，实现联动的动画效果，动画效果符合自然规律，提高了用户体验和用户的观感，使得用户的操作更加接近真实世界的感受。
本申请实施例还提供了一种电子设备，包括用于实现上述方法实施例涉及的各步骤的功能模块。需要说明的是，上述方法实施例涉及的各步骤的所有相关内容均可以援引到对应功能模块的功能描述，在此不再赘述。本申请实施例提供的电子设备，用于执行上述界面显示的方法，因此可以达到与上述相同的效果。
本申请实施例还提供了一种电子设备，包括：处理器、存储器、应用程序以及计算机程序。上述各器件可以通过一个或多个通信总线连接。其中，该一个或多个计算机程序被存储在上述存储器中并被配置为被该一个或多个处理器执行，该一个或多个计算机程序包括指令，上述指令可以用于使电子设备执行上述各实施例中电子设备的各个步骤。
示例性的，上述处理器具体可以为图1所示的处理器110，上述存储器具体可以为图1所示的内部存储器120和/或与电子设备连接的外部存储器。
本申请实施例还提供一种芯片，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如前文中任一种可能的实现方式中所述的界面显示的方法被执行。
本实施例还提供一种计算机可读存储介质，该计算机可读存储介质中存储有计算机指令，当该计算机指令在电子设备上运行时，使得电子设备执行上述相关方法步骤实现上述实施例中的界面显示的方法。
本实施例还提供了一种计算机程序产品，当该计算机程序产品在计算机上运行时，使得计算机执行上述相关步骤，以实现上述实施例中的界面显示的方法。
以上实施例中所用，根据上下文，术语“当…时”或“当…后”可以被解释为意思是“如果…”或“在…后”或“响应于确定…”或“响应于检测到…”。类似地，根据上下文，短语“在确定…时”或“如果检测到(所陈述的条件或事件)”可以被解释为意思是“如果确定…”或“响应于确定…”或“在检测到(所陈述的条件或事件)时”或“响应于检测到(所陈述的条件或事件)”。
本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分 或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以所述权利要求的保护范围为准。

Claims (22)

  1. 一种界面切换的显示方法，其特征在于，所述方法包括：
    电子设备显示第一界面，所述第一界面包括M个界面元素，M≥1且为整数；
    所述电子设备检测到用户切换第二界面的操作，所述第二界面包括N个界面元素，N≥1且为整数；
    所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果；
    所述电子设备根据所述第一联动切换动画效果将所述第一界面切换至所述第二界面。
  2. 根据权利要求1所述的方法，其特征在于，所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果，包括：
    所述电子设备根据所述M个界面元素确定第一主界面元素和所述第一主界面元素的位置；
    所述电子设备根据所述N个界面元素确定第二主界面元素、所述第二主界面元素的位置、N-1个次界面元素；
    所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定第二主界面元素的动画效果；
    所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果。
  3. 根据权利要求2所述的方法，其特征在于，所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：
    所述电子设备根据第一界面切换参数确定所述每一个次界面元素的动画效果，其中所述第一界面切换参数包括以下中的至少一项：所述第二主界面元素的尺寸、所述每一个次界面元素的尺寸、所述第二主界面元素与所述每一个次界面元素之间的距离、所述每一个次界面元素的限制参数、所述第二主界面元素的动画效果。
  4. 根据权利要求2或3所述的方法，其特征在于，所述电子设备根据所述M个界面元素确定第一主界面元素和所述第一主界面元素的位置，包括：
    所述电子设备根据所述第一界面的视觉中心确定所述第一主界面元素和所述第一主界面元素的位置；
    所述电子设备根据所述N个界面元素确定第二主界面元素和所述第二主界面元素的位置，包括：
    所述电子设备根据所述第二界面的视觉中心确定所述第二主界面元素和所述第二主界面元素的位置。
  5. 根据权利要求2至4中任一项所述的方法，其特征在于，所述每一个次界面元素的动画效果包括所述每一个次界面元素的移动轨迹和/或所述每一个次界面元素的移动速度，其中所述每一个次界面元素的移动轨迹是弯曲的。
  6. 根据权利要求2至5中任一项所述的方法，其特征在于，所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定第二主界面元素的动画效果，包括：
    所述电子设备根据所述第一主界面元素的位置和所述第二主界面元素的位置确定所述第二主界面元素的移动轨迹和所述第二主界面的移动速度。
  7. 根据权利要求2至6中任一项所述的方法，其特征在于，所述方法还包括：
    所述电子设备根据所述M个界面元素确定M-1个次界面元素；
    所述电子设备根据所述第二主界面元素和所述N-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果，包括：
    所述电子设备根据所述第二主界面元素、所述N-1个次界面元素中的每一个次界面元素、所述M-1个次界面元素中的每一个次界面元素确定所述N-1个次界面元素中的每一个次界面元素的动画效果。
  8. 根据权利要求1所述的方法，其特征在于，所述电子设备响应于所述操作，根据所述M个界面元素和所述N个界面元素确定第一联动切换动画效果，包括：
    所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，其中L≥1 且为整数；
    所述电子设备确定所述L个类型的界面元素的每一个类型的界面元素在所述第一界面和所述第二界面的位置；
    所述电子设备在所述第二界面中确定第一位置集，所述第一位置集包括所述第二界面中的任意的一个或多个位置；
    所述电子设备根据所述第一位置集、所述每一个类型的界面元素在所述第一界面的位置和所述每一个类型的界面元素在所述第二界面的位置确定所述N个界面元素的动画效果。
  9. 根据权利要求8所述的方法，其特征在于，所述第一位置集包括的一个或多个位置为所述N个界面元素中的一个或多个界面元素在所述第二界面对应的位置。
  10. 根据权利要求9所述的方法，其特征在于，所述电子设备根据所述第一位置集、所述每一个类型的界面元素在所述第一界面的位置和所述每一个类型的界面元素在所述第二界面的位置确定所述N个界面元素的动画效果，包括：
    所述电子设备根据第二界面切换参数确定所述N个界面元素的动画效果，其中所述第二界面切换参数包括以下中的至少一项：所述一个或多个界面元素的尺寸、所述每一个类型的界面元素的尺寸、所述第一位置集中的一个或多个位置与所述每一个类型的界面元素之间的距离、所述每一个类型的界面元素的限制参数、所述第一界面元素的动画效果。
  11. 根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：
    所述电子设备根据相似度将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。
  12. 根据权利要求11所述的方法，其特征在于，所述相似度包括颜色相似度、尺寸相似度、形状相似度。
  13. 根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：
    所述电子设备确定所述M个界面元素在所述第一界面的位置和所述N个界面元素在所述第二界面的位置；
    所述电子设备根据所述M个界面元素在所述第一界面的位置和所述N个界面元素在所述第二界面的位置将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。
  14. 根据权利要求8至10中任一项所述的方法，其特征在于，所述电子设备将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素，包括：
    所述电子设备确定所述M个界面元素和所述N个界面元素的标签；
    所述电子设备根据所述M个界面元素和所述N个界面元素的标签将所述M个界面元素和所述N个界面元素划分为L个类型的界面元素。
  15. 根据权利要求1至14中任一项所述的方法，其特征在于，所述N个界面元素的位移时间曲线为贝塞尔曲线或弹性力曲线。
  16. 根据权利要求1至15中任一项所述的方法，其特征在于，所述方法通过AAR格式文件、JAR格式文件或所述电子设备的系统接口中的至少一项来实现。
  17. 根据权利要求1至16中任一项所述的方法，其特征在于，所述方法还包括：
    若检测到所述电子设备的类型由第一类型变为第二类型，将所述第一联动切换效果切换为第二联动切换效果；
    所述电子设备根据所述第一联动切换动画效果将所述第一界面切换至所述第二界面，包括：
    所述电子设备根据所述第二联动切换动画效果将所述第一界面切换至所述第二界面。
  18. 一种电子设备，其特征在于，包括：用于实现如权利要求1至17中任一项所述的方法的模块。
  19. 一种电子设备，其特征在于，包括一个或多个处理器；一个或多个存储器；所述一个或多个存储器存储有一个或多个计算机程序，所述一个或多个计算机程序包括指令，当所述指令被所述一个或多个处理器执行时，使得如权利要求1至17中任一项所述的方法被执行。
  20. 一种芯片，其特征在于，所述芯片包括处理器和通信接口，所述通信接口用于接收信号，并将所述信号传输至所述处理器，所述处理器处理所述信号，使得如权利要求1至17中任一项所述的方法被执行。
  21. 一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机指令，当所述计算机指令在计算机上运行时，使得如权利要求1至17中任一项所述的方法被执行。
  22. 一种包含指令的计算机程序产品，其特征在于，当所述计算机程序产品在计算机上运行时，使得所述计算机执行如权利要求1至17中任一项所述的方法。
PCT/CN2023/107679 2022-07-22 2023-07-17 一种界面切换的显示方法以及电子设备 WO2024017183A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202210867784.2 2022-07-22
CN202210867784.2A CN117472482A (zh) 2022-07-22 2022-07-22 一种界面切换的显示方法以及电子设备

Publications (1)

Publication Number Publication Date
WO2024017183A1 true WO2024017183A1 (zh) 2024-01-25

Family

ID=89617147

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2023/107679 WO2024017183A1 (zh) 2022-07-22 2023-07-17 一种界面切换的显示方法以及电子设备

Country Status (2)

Country Link
CN (1) CN117472482A (zh)
WO (1) WO2024017183A1 (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591644A (zh) * 2010-12-13 2012-07-18 微软公司 未知可视布局位置的静态定义
CN110637281A (zh) * 2017-05-16 2019-12-31 苹果公司 用于无缝过渡用户界面行为的设备、方法和图形用户界面
CN113918264A (zh) * 2021-11-11 2022-01-11 湖南快乐阳光互动娱乐传媒有限公司 界面切换方法、装置、电子设备及存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102591644A (zh) * 2010-12-13 2012-07-18 微软公司 未知可视布局位置的静态定义
CN110637281A (zh) * 2017-05-16 2019-12-31 苹果公司 用于无缝过渡用户界面行为的设备、方法和图形用户界面
CN113918264A (zh) * 2021-11-11 2022-01-11 湖南快乐阳光互动娱乐传媒有限公司 界面切换方法、装置、电子设备及存储介质

Also Published As

Publication number Publication date
CN117472482A (zh) 2024-01-30

Similar Documents

Publication Publication Date Title
WO2020187157A1 (zh) 一种控制方法和电子设备
CN110569095B (zh) 显示页面元素的方法和电子设备
CN110830645B (zh) 一种操作方法和电子设备及计算机存储介质
CN113805745A (zh) 一种悬浮窗的控制方法及电子设备
CN110442277B (zh) 显示预览窗口信息的方法及电子设备
CN113099146A (zh) 一种视频生成方法、装置及相关设备
CN111263002A (zh) 一种显示方法和电子设备
WO2023093169A1 (zh) 拍摄的方法和电子设备
WO2022228042A1 (zh) 显示方法、电子设备、存储介质和程序产品
WO2024017183A1 (zh) 一种界面切换的显示方法以及电子设备
CN116781813A (zh) 电子设备及其控制方法
WO2022143335A1 (zh) 一种动效处理方法及相关装置
WO2024017185A1 (zh) 一种界面显示的方法以及电子设备
CN115390738A (zh) 卷轴屏开合方法及相关产品
CN115933952A (zh) 一种触控采样率调节方法及相关装置
CN115480629A (zh) 一种多界面显示的方法和电子设备
RU2809207C2 (ru) Способ обеспечения эффекта обратной связи для пользовательской операции и электронное устройство
WO2024152676A1 (zh) 一种窗口管理方法以及电子设备
WO2024139115A1 (zh) 一种显示方法以及电子设备
WO2023130977A1 (zh) 用户界面显示方法、电子设备、介质以及程序产品
WO2024099206A1 (zh) 一种图形界面处理方法以及装置
WO2024152910A1 (zh) 一种录像方法以及电子设备
WO2024012354A1 (zh) 一种显示方法及电子设备
WO2024193470A1 (zh) 一种管理服务的方法以及折叠屏电子设备
WO2024109198A1 (zh) 窗口调整方法及相关装置

Legal Events

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

Ref document number: 23842246

Country of ref document: EP

Kind code of ref document: A1