Display method of switch control and electronic equipment

Abstract

The embodiment of the invention provides a display method of a switch control and electronic equipment. In the method, a switch control comprises a track and a first icon, the first icon slides in the track, and a second icon is displayed on the first icon; wherein when the first icon is located at a first position in the track, the switch control is in an on state or an off state, and the shape of the second icon is a first shape; and when the first icon is located at a second position in the track, the switch control is in a closed state or an open state, and the shape of the second icon is a second shape. When the first icon slides in the track, the shape of the second icon linearly changes along with the sliding offset of the first icon. Therefore, a visual effect which can be interested by a user is added on the display of the switch control, and the use experience of the user is improved.

Description

[0001] This application is a divisional application. The name of the original application is display method and electronic device of switch control. The application number of the original application is 202210652634.X. The original application date is June 10, 2022. All the contents of the original application are incorporated into this application by reference. Technical Field

[0002] The present application relates to the technical field of intelligent terminals, and in particular to a display method of a switch control and an electronic device. Background Art

[0003] Switch, in English, is often translated as switch, slide switch, toggle switch, etc. As a directly operable control in the terminal interface, the switch control provides users with two mutually exclusive options (such as on / off, yes / no, start / disable) for selection.

[0004] The most important function of a switch control is to immediately turn on or off a function and clearly show the switch status to the user. Therefore, it is particularly important to add visual effects that interest users to the switch control. Summary of the invention

[0005] In order to solve the above technical problems, the embodiments of the present application provide a display method of a switch control and an electronic device. In the method, a visual effect that can interest the user is added to the switch control, thereby improving the user's experience of using the switch control.

[0006] In a first aspect, an embodiment of the present application provides a method for displaying a switch control. The switch control includes a track and a first icon, the first icon slides in the track, and a second icon is displayed on the first icon; when the first icon is located at a first position in the track, the switch control is in an on state or a off state, and the shape of the second icon is a first shape; when the first icon is located at a second position in the track, the switch control is in a off state or an on state, and the shape of the second icon is a second shape. The display method of the switch control is applied to an electronic device, including: during the sliding of the first icon in the track, the shape of the second icon changes linearly with the sliding offset of the first icon.

[0007] For example, the track may be Figure 4 As shown in the background track 201, the first icon may be Figure 4 The circular handle 202 shown in FIG. 1 , the second icon may be Figure 4 IO identification shown in .

[0008] Exemplarily, the first position and the second position may be two ends of the sliding area in the track. Figure 6a, the first position is the position of the round handle at time T0, and the second position may be the position of the round handle at time T7. Figure 6a The first position is the position of the circular handle at time T7, and the second position may be the position of the circular handle at time T0.

[0009] Exemplarily, when the first icon slides in the track, the shape and size of the second icon is linearly related to the sliding offset of the first icon. Another exemplary embodiment, when the first icon slides in the track, the size of the second icon in a certain direction (such as width or height) is linearly related to the sliding offset of the first icon.

[0010] The sliding offset of the first icon may refer to an offset of the first icon relative to an initial position (such as the first position or the second position).

[0011] In this way, when the first icon in the switch control slides, the shape of the second icon displayed on the first icon changes linearly with the sliding offset of the first icon, thereby increasing the visual effect that can interest the user and improving the user's experience of using the switch control.

[0012] According to the first aspect, when the first icon is located at the first position, the color of the track and the second icon is the first color; when the first icon is located at the second position, the color of the track and the second icon is the second color; the display method also includes: when the first icon slides from the third position to the first position, the color of the track and the second icon gradually changes from the second color to the first color; when the first icon slides from the third position to the second position, the color of the track and the second icon gradually changes from the first color to the second color; wherein the third position is the midpoint between the first position and the second position.

[0013] In this way, when the first icon slides in the track, the first icon slides to the midpoint of the track to trigger the color change effect of the switch control, further improving the user's visual experience.

[0014] According to the first aspect, or any implementation of the first aspect above, the heights of the first shape and the second shape are equal; during the sliding of the first icon in the track, the shape change of the second icon is linearly related to the sliding offset of the first icon, including: during the sliding of the first icon in the track, the width of the second icon changes linearly with the sliding offset of the first icon.

[0015] According to the first aspect, or any implementation of the first aspect above, when the switch control is in an off state, the shape of the second icon is a circle; when the switch control is in an on state, the shape of the second icon is a rounded rectangle.

[0016] In this way, the "I" and "O" symbols used to indicate the on or off state on the mechanical switch are applied to the display of the switch control, respectively used to indicate the on or off state of the function (terminal function or application function, etc.), thereby improving the user's perception of the status of the switch control.

[0017] According to the first aspect, or any implementation of the first aspect above, the center points of the first icon and the second icon coincide with each other, so that the appearance of the switch control is more beautiful.

[0018] According to the first aspect, or any implementation of the first aspect above, the display method further includes: in response to a click operation on the switch control, the electronic device slides the first icon of the switch control from the first position to the second position, or slides the first icon from the second position to the first position. In this way, the user can trigger the switching of the switch control state by a click operation.

[0019] According to the first aspect, or any implementation of the first aspect above, the electronic device responds to a click operation on a switch control, and the first icon slides from a first position to a second position, or the first icon slides from the second position to the first position, including: the electronic device responds to the touch operation on the switch control, reducing the size of the first icon and the second icon; the electronic device responds to cancellation of the touch operation, and the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position, and enlarges and restores the size of the first icon and the second icon.

[0020] In this way, during the state switching of the switch control, the shrinking and enlarging animations of the first icon and the second icon of the switch control are added, further improving the user's visual experience and usage experience.

[0021] According to the first aspect, or any implementation of the first aspect above, the first icon slides from the first position to the second position, including: after the first icon slides from the first position to the boundary of the track along the first direction, the first icon slides to the second position along the second direction. Correspondingly, the first icon slides from the second position to the first position, including: after the first icon slides from the second position to the boundary of the track along the second direction, the first icon slides to the first position along the first direction. The first direction is the direction from the first position to the second position, and the second direction is the direction from the second position to the first position. In this way, in the process of the first icon sliding in the track, the animation effect of the first icon sliding and rebounding is added, further enhancing the user's visual experience.

[0022] According to the first aspect, or any implementation of the first aspect above, the key frame curve of the first icon sliding animation is a displacement change curve of over-damped vibration.

[0023] According to the first aspect, or any implementation of the first aspect above, in response to a click operation on a switch control, a first icon slides from a first position to a second position, or the first icon slides from a second position to a first position, including: in response to a click operation on a hot zone of the switch control, the first icon slides from a first position to a second position, or the first icon slides from a second position to a first position; wherein the hot zone size of the switch control is larger than the size of the switch control, and the hot zone area of ​​the switch control includes or partially includes a text description area corresponding to the switch control. In this way, the hot zone of the switch control is enlarged, making it easier for users to operate the switch control.

[0024] According to the first aspect, or any implementation of the first aspect above, the display method further includes: the electronic device responds to a sliding operation in the switch control, and the first icon slides in the track according to the operation offset; the electronic device responds to the sliding operation stopping, and the first icon stops sliding; the electronic device responds to the sliding operation canceling, and the first icon moves to the first position or the second position. In this way, the user can also trigger the switching of the switch control state through the sliding operation. Moreover, the sliding animation of the first icon presents the state of sliding with the hand, which enhances the user's sense of control over the switch control.

[0025] According to the first aspect, or any implementation of the first aspect above, the electronic device responds to a sliding operation in the switch control, and the first icon slides in the track according to the operation offset, including: the electronic device responds to the touch operation on the switch control, and the size of the first icon and the second icon is reduced; the electronic device responds to the sliding operation in the switch control, and the circular handle slides in the track according to the operation offset; the electronic device responds to the cancellation of the sliding operation, and the first icon moves to the first position or the second position, including: in response to the cancellation of the sliding operation, the first icon moves to the first position or the second position, and the size of the first icon and the second icon is enlarged and restored. In this way, in the process of switching the state of the switch control, the reduction and enlargement animation effects of the first icon and the second icon of the switch control are added, which further enhances the user's visual experience and usage experience.

[0026] According to the first aspect, or any implementation of the first aspect above, the electronic device responds to the cancellation of the sliding operation, and the first icon moves to the first position or the second position, including: the electronic device responds to the cancellation of the sliding operation, obtains the current position of the first icon in the track; when the current position is the first position or the second position, the first icon stops sliding; when the current position is between the first position and the third position, the first icon moves from the current position to the first position; when the current position is between the second position and the third position, the first icon moves from the current position to the second position; wherein the third position is the midpoint between the first position and the second position. In this way, when the user controls the switch control by touching the sliding operation or pressing the sliding operation, the display animation of the switch control is related to the position where the user leaves the hand. Moreover, no matter when the user leaves the hand, the switch control can maintain or switch its switch state.

[0027] According to the first aspect, or any implementation of the first aspect above, the first icon moves from the current position to the first position, including: after the first icon slides from the current position to the boundary of the track along the second direction, the first icon slides to the first position along the first direction; correspondingly, the first icon moves from the current position to the second position, including: after the first icon slides from the current position to the boundary of the track along the first direction, the first icon slides to the second position along the second direction; wherein the first direction is the direction from the first position to the second position, and the second direction is the direction from the second position to the first position. In this way, during the sliding of the first icon with the hand, if the first icon has not slid to the first position or the second position when the user leaves the hand, the sliding animation of the first icon is displayed, and the animation effect of the sliding rebound of the first icon is added, further enhancing the user's visual experience.

[0028] According to the first aspect, or any implementation of the first aspect above, the key frame curve of the first icon sliding animation is a displacement change curve of over-damped vibration; wherein, the first icon sliding animation is an animation of the first icon moving from a current position to a first position or a second position.

[0029] According to the first aspect, or any implementation of the first aspect above, the electronic device responds to a sliding operation in a switch control, and the first icon slides in a track according to an operation offset, including: the electronic device responds to a sliding operation in a hot zone of the switch control, and the first icon slides in the track according to the operation offset; wherein the hot zone size of the switch control is larger than the size of the switch control, and the hot zone area of ​​the switch control includes or partially includes a text description area corresponding to the switch control. In this way, the hot zone of the switch control is enlarged, making it easier for users to operate the switch control.

[0030] According to the first aspect, or any implementation of the first aspect above, the display color and / or transparency of the switch control matches the display mode of the electronic device, so that the switch control has stronger applicability and better visual effect for users.

[0031] In a second aspect, an embodiment of the present application provides an electronic device. The electronic device includes: one or more processors; a memory; and one or more computer programs, wherein the one or more computer programs are stored in the memory, and when the computer programs are executed by the one or more processors, the electronic device executes the display method of the switch control of the first aspect and any one of the first aspects.

[0032] The second aspect and any implementation of the second aspect correspond to the first aspect and any implementation of the first aspect respectively. The technical effects corresponding to the second aspect and any implementation of the second aspect can refer to the technical effects corresponding to the above-mentioned first aspect and any implementation of the first aspect, which will not be repeated here.

[0033] In a third aspect, an embodiment of the present application provides a computer-readable storage medium. The computer-readable storage medium includes a computer program, and when the computer program is executed on an electronic device, the electronic device executes the display method of the switch control of the first aspect and any one of the first aspects.

[0034] The third aspect and any implementation of the third aspect correspond to the first aspect and any implementation of the first aspect, respectively. The technical effects corresponding to the third aspect and any implementation of the third aspect can refer to the technical effects corresponding to the first aspect and any implementation of the first aspect, which will not be repeated here.

[0035] In a fourth aspect, an embodiment of the present application provides a computer program product, including a computer program, which, when executed, enables a computer to execute a method for displaying a switch control as described in the first aspect or any one of the items in the first aspect.

[0036] The fourth aspect and any implementation of the fourth aspect correspond to the first aspect and any implementation of the first aspect, respectively. The technical effects corresponding to the fourth aspect and any implementation of the fourth aspect can refer to the technical effects corresponding to the above-mentioned first aspect and any implementation of the first aspect, which will not be repeated here.

[0037] In a fifth aspect, the present application provides a chip, the chip comprising a processing circuit and a transceiver pin, wherein the transceiver pin and the processing circuit communicate with each other through an internal connection path, and the processing circuit executes the display method of the switch control as in the first aspect or any one of the first aspects, to control the receiving pin to receive a signal, and to control the sending pin to send a signal.

[0038] The fifth aspect and any implementation of the fifth aspect correspond to the first aspect and any implementation of the first aspect, respectively. The technical effects corresponding to the fifth aspect and any implementation of the fifth aspect can refer to the technical effects corresponding to the first aspect and any implementation of the first aspect, which will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] Figure 1 is a schematic diagram of the hardware structure of an electronic device shown as an example;

[0040] Figure 2 A schematic diagram of the software structure of an electronic device is shown as an example;

[0041] Figure 3 is a schematic diagram of an exemplary mechanical switch;

[0042] Figure 4 is a schematic diagram of a switch control shown as an example;

[0043] Figure 5a-Figure 5b is a schematic diagram of the dimensions of a switch control shown as an example;

[0044] Figure 6a-Figure 6b A schematic diagram showing changes in the switch control is shown as an example;

[0045] Figure 7a is a schematic diagram showing an exemplary IO logo width and a circular handle offset;

[0046] Figure 7b Schematic diagram showing the corresponding relationship between the IO mark width and the circular handle offset;

[0047] Figure 8 is a schematic diagram of a damped vibration curve shown as an example;

[0048] Fig. 9 This is a diagram showing an example of the duration of the animation displayed by a switch control.

[0049] Figure 10a-Figure 10e A schematic diagram showing changes in the switch control is shown as an example;

[0050] Fig.11 A schematic diagram showing changes in the switch control is shown as an example;

[0051] Fig.12 is a schematic diagram of a switch control hot zone shown as an example;

[0052] Fig.13 A schematic diagram of the system level provided for an embodiment of the present application;

[0053] Fig.14 is a schematic diagram of an application scenario shown as an example;

[0054] Fig.15 is a schematic diagram of an application scenario shown as an example;

[0055] Figure 16a-16b A schematic diagram of module interaction provided in an embodiment of the present application;

[0056] Fig.16c A schematic diagram of the module structure provided in the embodiment of the present application;

[0057] Fig.17 A schematic diagram of the display process of the switch control provided in the embodiment of the present application;

[0058] Figure 18a-18b is a schematic diagram of an application scenario shown as an example;

[0059] Fig.19 The figure is a schematic diagram of an exemplary application scenario. DETAILED DESCRIPTION

[0060] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0061] The term "and / or" in this article is merely a description of the association relationship of associated objects, indicating that three relationships may exist. For example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone.

[0062] The terms "first" and "second" in the description and claims of the embodiments of the present application are used to distinguish different objects rather than to describe a specific order of objects. For example, a first target object and a second target object are used to distinguish different target objects rather than to describe a specific order of target objects.

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

[0064] In the description of the embodiments of the present application, unless otherwise specified, the meaning of "multiple" refers to two or more than two. For example, multiple processing units refer to two or more processing units; multiple systems refer to two or more systems.

[0065] like Figure 1 The figure shows a schematic diagram of the structure of the electronic device 100. Optionally, the electronic device 100 may be a terminal, which may also be referred to as a terminal device. The terminal may be a device with a camera such as a cellular phone or a tablet computer, or a large-screen device such as a smart screen, which is not limited in this application. It should be understood that Figure 1 The electronic device 100 shown is only one example of an electronic device, and the electronic device 100 may have more or fewer components than shown in the figure, may combine two or more components, or may have a different configuration of components. Figure 1 The various components shown in the EMBODIMENTS 2000 may be implemented in hardware, software, or a combination of hardware and software, including one or more signal processing and / or application specific integrated circuits.

[0066] 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, a mobile communication module 150, a wireless communication module 160, an audio module 170, a speaker 170A, a receiver 170B, a microphone 170C, an earphone interface 170D, a sensor module 180, a button 190, a motor 191, an indicator 192, a camera 193, a display screen 194, and a subscriber identification module (SIM) card interface 195, etc. The sensor module 180 may include a pressure sensor, a gyroscope sensor, an acceleration sensor, a temperature sensor, a motion sensor, an air pressure sensor, a magnetic sensor, a distance sensor, a proximity light sensor, a fingerprint sensor, a touch sensor, an ambient light sensor, a bone conduction sensor, etc.

[0067] The processor 110 may include one or more processing units, for example, the processor 110 may include an application processor (AP), a modem processor, a graphics processor (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Different processing units may be independent devices or integrated into one or more processors.

[0068] The controller may be the nerve center and command center of the electronic device 100. The controller may generate an operation control signal according to the instruction operation code and the timing signal to complete the control of fetching and executing instructions.

[0069] A memory may also be provided in the processor 110 for storing instructions and data. In some embodiments, the memory in the processor 110 is a cache memory.

[0070] The 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.

[0071] The charging management module 140 is used to receive charging input from a charger. The charger can be a wireless charger or a wired charger. While the charging management module 140 is charging the battery 142, it can also power 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 powers the processor 110, the internal memory 121, the external memory, the display screen 194, the camera 193, and the wireless communication module 160.

[0072] 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.

[0073] Antenna 1 and antenna 2 are used to transmit and receive electromagnetic wave signals. Each antenna in electronic device 100 can be used to cover a single or multiple communication frequency bands. Different antennas can also be reused to improve the utilization of the antennas.

[0074] The mobile communication module 150 may provide solutions for wireless communications including 2G / 3G / 4G / 5G, etc., applied to the electronic device 100. The mobile communication module 150 may include at least one filter, a switch, a power amplifier, a low noise amplifier (LNA), etc.

[0075] The wireless communication module 160 can provide wireless communication solutions for application in the electronic device 100, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication technology (NFC), infrared technology (IR), etc.

[0076] In some embodiments, antenna 1 of electronic device 100 is coupled to mobile communication module 150, and antenna 2 is coupled to wireless communication module 160, so that electronic device 100 can communicate with the network and other devices through wireless communication technology.

[0077] The electronic device 100 implements display functions through a GPU, a display screen 194, and an application processor, etc. The processor 110 may include one or more GPUs that execute program instructions to generate or change display information.

[0078] The display screen 194 is used to display images, videos, etc. The display screen 194 includes a display panel. In some embodiments, the electronic device 100 may include 1 or N display screens 194, where N is a positive integer greater than 1.

[0079] The electronic device 100 can realize the shooting function through the ISP, the camera 193, the video codec, the GPU, the display screen 194, and the application processor. The ISP is used to process the data fed back by the camera 193. The camera 193 is used to capture a static image or a video. In some embodiments, the electronic device 100 may include 1 or N cameras 193, where N is a positive integer greater than 1.

[0080] 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 via the external memory interface 120 to implement a data storage function.

[0081] The internal memory 121 can be used to store computer executable program codes, which include instructions. The processor 110 executes various functional applications and data processing of the electronic device 100 by running the instructions stored in the internal memory 121, such as enabling the electronic device 100 to implement the display method of the switch control in the embodiment of the present application. The internal memory 121 may include a program storage area and a data storage area. Among them, the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc. The data storage area may store data created during the use of the electronic device 100 (such as audio data, a phone book, etc.), etc. In addition, the internal memory 121 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0082] The electronic device 100 can implement audio functions such as music playing and recording through the audio module 170, the speaker 170A, the receiver 170B, the microphone 170C, the headphone jack 170D, and the application processor.

[0083] The audio module 170 is used to convert digital audio information into analog audio signal output, and is also used to convert analog audio input into digital audio signals. The audio module 170 can also be used to encode and decode audio signals. In some embodiments, the audio module 170 can be arranged in the processor 110, or some functional modules of the audio module 170 can be arranged in the processor 110.

[0084] The touch sensor is also called a "touch panel". The touch sensor can be set on the display screen 194. The touch sensor and the display screen 194 form a touch screen, also called a "touch screen". The touch sensor is used to detect a touch operation acting on or near it. The touch sensor can pass the detected touch operation to the application processor to determine the type of touch event. Visual output related to the touch operation can be provided through the display screen 194.

[0085] The pressure sensor is used to sense the pressure signal and can convert the pressure signal into an electrical signal. In some embodiments, the pressure sensor can be arranged on the display screen 194. The electronic device 100 can also calculate the touch position according to the detection signal of the pressure sensor.

[0086] The gyro sensor may be used to determine the motion posture of the electronic device 100. In some embodiments, the angular velocity of the electronic device 100 around three axes (ie, x, y, and z axes) may be determined by the gyro sensor.

[0087] The accelerometer can detect the magnitude of the acceleration of the electronic device 100 in all directions (generally three axes). When the electronic device 100 is stationary, the accelerometer can detect the magnitude and direction of gravity. The accelerometer can also be used to identify the posture of the electronic device, and is applied to applications such as horizontal and vertical screen switching, pedometers, etc.

[0088] The key 190 includes a power key (or power key), a volume key, etc. The key 190 may be a mechanical key or a touch key. The electronic device 100 may receive key input and generate key signal input related to user settings and function control of the electronic device 100.

[0089] The software system of the electronic device 100 may adopt a layered architecture, an event-driven architecture, a micro-core architecture, a micro-service architecture, or a cloud architecture. The embodiment of the present application takes the Android system of the layered architecture as an example to exemplify the software structure of the electronic device 100.

[0090] Figure 2 It is a software structure block diagram of the electronic device 100 according to an embodiment of the present application.

[0091] The layered architecture of the electronic device 100 divides the software into several layers, each with clear roles and division of labor. The layers communicate with each other through software interfaces. In some embodiments, the Android system is divided into four layers, from top to bottom, namely, the application layer, the application framework layer, the Android runtime (Android Runtime) and the system library, and the kernel layer.

[0092] The application layer can include a series of application packages.

[0093] like Figure 2 As shown, the application package may include Activity, Settings, Gallery, Calendar, Call, Map, Navigation, WLAN, Bluetooth, Music, Video, Short Message and other applications.

[0094] Among them, Activity is an application component that provides a screen that users can use to interact in order to complete a task. In an Android application, an Activity is usually a separate screen that can display some controls and can also listen to and process user events to respond.

[0095] The application framework layer provides an application programming interface (API) and a programming framework for the applications in the application layer. The application framework layer includes some predefined functions.

[0096] like Figure 2As shown, the application framework layer may include an activity manager, a window manager, a content provider, a view system, a resource manager, a notification manager, and a switch control module, etc.

[0097] The Activity Manager Service (AMS) is responsible for managing Activities and is responsible for starting, switching, and scheduling components in the system, as well as managing and scheduling applications.

[0098] The window manager is used to manage window programs. The window manager can obtain the display screen size, determine whether there is a status bar, lock the screen, capture the screen, etc.

[0099] Content providers are used to store and retrieve data and make it accessible to applications. The data may include videos, images, audio, calls made and received, browsing history and bookmarks, phone books, etc.

[0100] The view system includes visual controls, such as controls for displaying text, controls for displaying images, etc. The view system can be used to build applications. A display interface can be composed of one or more views. For example, a display interface including a text notification icon can include a view for displaying text and a view for displaying images.

[0101] The resource manager provides various resources for applications, such as localized strings, icons, images, layout files, video files, and so on.

[0102] The notification manager enables applications to display notification information in the status bar. It can be used to convey notification-type messages and can disappear automatically after a short stay without user interaction. For example, the notification manager is used to notify download completion, message reminders, etc. The notification manager can also be a notification that appears in the system top status bar in the form of a chart or scroll bar text, such as notifications of applications running in the background, or a notification that appears on the screen in the form of a dialog window. For example, a text message is displayed in the status bar, a prompt sound is emitted, an electronic device vibrates, an indicator light flashes, etc.

[0103] In this embodiment, the switch control module is used to implement the display method of the switch control described in detail below. Specifically, the switch control module can be used to implement the circular handle and IO logo shrinking animation, circular handle and IO logo moving animation, IO logo shape change animation, background track and IO logo color change animation, circular handle and IO logo rebound animation, circular handle and IO logo enlargement animation, and circular handle and IO logo follow-up movement animation mentioned below.

[0104] Android Runtime includes core libraries and virtual machines. Android Runtime is responsible for scheduling and management of the Android system.

[0105] The core library consists of two parts: one part is the function that needs to be called by the Java language, and the other part is the Android core library.

[0106] The application layer and the application framework layer run in a virtual machine. The virtual machine executes the Java files of the application layer and the application framework layer as binary files. The virtual machine is used to perform functions such as object life cycle management, stack management, thread management, security and exception management, and garbage collection.

[0107] The system library may include multiple functional modules, such as surface manager, media library, 3D graphics processing library (such as OpenGL ES), 2D graphics engine (such as SGL), etc.

[0108] The surface manager is used to manage the display subsystem and provide the fusion of 2D and 3D layers for multiple applications.

[0109] 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, PNG, etc.

[0110] The 3D graphics processing library is used to implement 3D graphics drawing, image rendering, compositing, and layer processing.

[0111] A 2D graphics engine is a drawing engine for 2D drawings.

[0112] The kernel layer is the layer between hardware and software. The kernel layer includes at least display driver, Wi-Fi driver, sensor driver, etc. Among them, the hardware includes at least processor, display, Wi-Fi module, sensor, etc.

[0113] Understandably, Figure 2 The layers in the software structure shown and the components included in each layer do not constitute a specific limitation on the electronic device 100. In other embodiments of the present application, the electronic device 100 may include more or fewer layers than shown, and each layer may include more or fewer components, which is not limited in the present application.

[0114] It is understandable that in order to implement the display method of the switch control in the embodiment of the present application, the electronic device includes hardware and / or software modules corresponding to the execution of each function. In combination with the algorithm steps of each example described in the embodiments disclosed herein, the present application can be implemented in the form of hardware or a combination of hardware and computer software. Whether a function is executed in the form of hardware or computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application in combination with the embodiments, but such implementation should not be considered to be beyond the scope of the present application.

[0115] For ease of understanding, the display method of the switch control provided in the embodiment of the present application is specifically explained below with reference to the accompanying drawings.

[0116] Figure 3 A schematic diagram of an open state and a schematic diagram of a closed state of a mechanical switch are shown.

[0117] In the technical specifications compiled by the International Electrotechnical Commission (IEC), "I" and "O" are proposed as symbols for power on and off cycles. my country has also clearly defined that the symbol "I" represents a closed circuit (i.e., open), and the symbol "O" represents a disconnected circuit (i.e., closed). Figure 3 As shown in the figure, the mechanical switch is marked with two symbols "I" and "O", which are used to indicate the on state and off state of the mechanical switch respectively. When the user presses the end of the mechanical switch marked with the symbol "O", the circuit controlled by the mechanical switch is disconnected. At this time, the mechanical switch indicates the off state of the circuit. Figure 3 (1); When the user presses the end of the mechanical switch marked with the symbol "I", the circuit controlled by the mechanical switch is closed. At this time, the mechanical switch indicates the open state of the circuit, which can be referred to Figure 3 Therefore, the user can perform relevant operations on the mechanical switch according to the "I" and "O" symbols marked on the mechanical switch to control the closing or opening of the corresponding circuit.

[0118] In an embodiment of the present application, the "I" and "O" symbols on the mechanical switch used to indicate the on or off state are applied to the display of the switch control on the terminal interface, and are used to indicate the on or off state of the function (terminal function or application function, etc.), respectively, so as to enhance the user's perception of the status of the switch control.

[0119] Figure 4 Zhong (1) and Figure 4 (2) shows schematic diagrams of the switch control provided in this embodiment in the closed state and the open state respectively.

[0120] Reference Figure 4, the switch control 20 includes a background track 201, a circular handle 202, an IO logo 203 and a circular stroke 2021. Among them, the circular stroke 2021 is the stroke of the circular handle 202. It should be pointed out that the circular handle 202 and the circular stroke 2021 can be understood as a whole, and the relative positions of the two will not change. Exemplarily, the color of the circular handle 202 is white.

[0121] like Figure 4 As shown, the IO mark 203 is displayed on the circular handle 202, and the center point of the IO mark 203 coincides with the center point of the circular handle 202. Moreover, the color of the IO mark 203 is the same as the color of the background track 201.

[0122] The circular handle 202 can slide (or move) in the horizontal direction of the background track 201. As the circular handle 202 slides in different positions in the background track, the display form of the IO mark 203 is different. That is, as the circular handle 202 slides in the background track, the display form of the IO mark 203 gradually changes. The IO mark 203 can be understood as a rounded rectangle. As the circular handle 202 slides in the background track, the width of the IO mark 203 gradually changes, while the height does not change.

[0123] like Figure 4 As shown in (1), when the circular handle 202 slides to the left end of the sliding area of ​​the background track 201, the display form of the IO logo 203 is O-shaped (equal in width and height), which can also be called a dot shape, and the switch control is in the closed state; Figure 4 As shown in (2), when the circular handle 202 slides to the right end of the sliding area of ​​the background track 201, the display form of the IO mark 203 is I-shaped (width and height are not equal), which can also be called a vertical bar shape, and the switch control is in the on state. When the circular handle 202 is located between the left and right ends of the sliding area of ​​the background track 201, the display form of the IO mark 203 is between the O shape and the I shape (the height remains unchanged), and a detailed explanation can be found below.

[0124] The sliding area of ​​the background track 201 can be understood as the area preset in the background track that allows the circular handle to slide. When the circular handle 202 slides to the left end of the sliding area of ​​the background track 201, it can be understood that the left boundary of the circular handle 202 is tangent to the left boundary of the sliding area of ​​the background track 201; when the circular handle 202 slides to the right end of the sliding area of ​​the background track 201, it can be understood that the right boundary of the circular handle 202 is tangent to the right boundary of the sliding area of ​​the background track 201. In addition, it can be understood that the length of the sliding area of ​​the background track 201 is less than the length of the background track 201 in the horizontal direction.

[0125] The following is an optional implementation manner to explain the size of the switch control provided in this embodiment.

[0126] Combination Figure 5a and Figure 5b , the background track 201 is a rounded rectangle, and the size of its rounded corners is half the height of the background track 201. Among them, the length of the background track 201 in the horizontal direction (that is, the width of the background track 201) is 42dp, and the length of the background track 201 in the vertical direction (that is, the height of the background track 201) is 24dp. Among them, the distance between the left border of the sliding area of ​​the background track 201 and the left border of the background track 201 is 3dp, and the distance between the right border of the sliding area of ​​the background track 201 and the right border of the background track 201 is 3dp. It can be concluded that the length of the sliding area of ​​the background track 201 in the horizontal direction is 36dp.

[0127] Combination Figure 5a and Figure 5b , the diameter of the circular handle 202 is 18dp. Exemplarily, the width of the circular stroke 2021 of the circular handle 202 is 1dp.

[0128] like Figure 5a As shown, when the switch control is in the off state, the circular handle 202 slides to the left end of the sliding area of ​​the background track 201, and the display form of the IO logo 203 is O-shaped (or dot-shaped), and the diameter of the IO logo 203 is 6dp, that is, the width and height of the IO logo 203 are both 6dp, and the rounded corner size is half of the width of the rounded rectangle (that is, 3dp).

[0129] like Figure 5b As shown, when the switch control is in the on state, the circular handle 202 slides to the right end of the sliding area of ​​the background track 201, and the display form of the IO logo 203 is I-shaped (or vertical bar shape). At this time, the height of the IO logo 203 is 6dp, the width is 1.5dp, and the rounded corner size is half of the width of the rounded rectangle (i.e. 0.75dp).

[0130] The embodiment of the present application provides a method for displaying a switch control. The user can control the switch control through different operations to turn the switch control on or off. For example, the user can control the switch control through a click operation or a slide operation (or drag operation). The following uses a click operation and a slide operation as examples to explain the method for displaying a switch control provided in the present embodiment.

[0131] Scene 1

[0132] In this scenario, a click operation is taken as an example to explain the display method of the switch control.

[0133] (i) When the switch control is in the off state, the user clicks the switch control. In response to the user's operation on the switch control, the display state of the switch control switches from the off state to the on state. The change process of the switch control can be referred to Figure 6a shown.

[0134] like Figure 6a As shown, at time T0, the switch control is in the closed state. At this time, the circular handle is located at the left end of the sliding area of ​​the background track. When the user clicks the switch control, it can be any area of ​​the switch control, and the switch control executes the switching process from the closed state to the open state. Among them, the animation effects (which can be referred to as dynamic effects) displayed in the switching process from the closed state to the open state of the switch control include but are not limited to: the shrinking dynamic effect of the circular handle and the IO logo, the moving dynamic effect of the circular handle and the IO logo, the shape transformation dynamic effect of the IO logo, the color change dynamic effect of the background track and the IO logo, the rebound dynamic effect of the circular handle and the IO logo, and the enlargement dynamic effect of the circular handle and the IO logo. It should be pointed out that some of the above-mentioned dynamic effects can occur simultaneously.

[0135] Reference Figure 6a , when the user presses or touches the switch control with his finger, the circular handle and IO logo perform a shrinking animation. Exemplarily, the circular handle and IO logo perform an animation effect of reducing the size from 100% to 94%, and the animation duration is 50ms. The switch control after the circular handle and IO logo are reduced can refer to the switch control at time T1. Exemplarily, the key frame curve used in the shrinking animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system. Among them, the key frame curve, also known as key frame interpolation, is a key technology for animation production in three-dimensional processes. It is actually a supplementary frame automatically calculated by the computer between two key frames, which has a certain degree of controllability. By adjusting the key frame curve, different animation effects can be achieved.

[0136] When the user's finger leaves the switch control, the circular handle and IO logo movement effects, as well as the IO logo shape change effects are triggered. Figure 6a The switch control at time T2. The circular handle and IO logo move to the right along the horizontal center line of the background track, and the shape of the IO logo changes as the position moves. The width of the IO logo gradually decreases, the height remains unchanged, and the rounded corners of the IO logo are always half of the width.

[0137] Continue to refer to Figure 6aAt time T3, the circular handle and the IO mark move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction. Compared with time T2, the circular handle and the IO mark are located further to the right in the background track, and the width of the IO mark is smaller.

[0138] It should be noted that, during the movement of the circular handle and the IO logo and the shape transformation of the IO logo, the center point of the IO logo always coincides with the center point of the circular handle. The width of the IO logo is proportional to the offset of the circular handle in the sliding area of ​​the background track.

[0139] For example, assuming that when the switch is in the off state, the offset of the circular handle in the background track is 0, then according to the switch control size given in the above embodiment, when the switch control is in the on state, the offset of the circular handle in the background track is 18. Figure 7a As shown, when the switch state is in the off state, the center of the circular handle is at point O, and at this time the offset d of the circular handle in the background track is 0. When the center of the circular handle moves to point M, the offset d of the circular handle in the background track is MO. Wherein MO represents the distance between point M and point O. As shown in 7b, the width w of the IO logo is inversely proportional to the offset d of the circular handle in the sliding area of ​​the background track. The larger the offset d, the smaller the width w of the IO logo. Wherein, when the offset d = 0dp, the width w of the IO logo is 6dp, and the switch control is in the off state; when the offset d = 18dp, the width w of the IO logo is 1.5dp, and the switch control is in the on state.

[0140] Combination Figure 6a and Figure 7b , from time T0 to time T7, as the circular handle gradually moves to the right in the background track, the offset of the circular handle in the background track gradually increases, and the width of the IO mark gradually decreases. Among them, at time T0, the switch control is in the off state, the offset of the circular handle in the background track is 0, and the width of the IO mark is 6dp; at times T3 and T4, the offset of the circular handle in the background track is 9, and the width of the IO mark is 3.75dp; at time T7, the switch control is in the on state, the offset of the circular handle in the background track is 18, and the width of the IO mark is 1.5dp.

[0141] It should be pointed out that if Figure 7b The mapping relationship between the width w of the IO logo and the offset d of the circular handle in the sliding area of ​​the background track shown does not take into account the shrinking effect of the IO logo. If the shrinking effect of the IO logo is taken into account, the width of the IO logo can be multiplied by the corresponding shrinking ratio, which will not be repeated here.

[0142] Continue to refer to Figure 6a At time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction, and the color change effect of the background track and IO logo is triggered. Figure 6a At time T4, the color of the background track and IO mark begins to change. For example, when the switch is in the off state, the color of the background track and IO mark is #E5E5E5; when the switch is in the on state, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system). Figure 6a At T7, the switch state is turned on, and the color change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #E5E5E5 gradually changes to the color #256FFF. For example, the key frame curve used in the color change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of Android.

[0143] It should be noted that the color of the background track and the color of the IO logo are always consistent. In addition, the time difference between time T4 and time T3 is extremely small, which is related to the response time of color drawing, and the user cannot perceive the time difference with the naked eye.

[0144] In an optional implementation, the color change effect of the background track and IO logo can also be replaced by: the color and transparency change effect of the background track and IO logo, which is not limited in this embodiment. Similarly, at time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, move to the midpoint of the background track in the horizontal direction, and the color and transparency change effect of the background track and IO logo is triggered. Figure 6a At time T4, the color and transparency of the background track and IO mark begin to change. For example, when the switch is in the off state, the color of the background track and IO mark is #E5E5E5, and the transparency is 10%; when the switch is in the on state, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system), and the transparency is 100%. Continue to refer to Figure 6aAt T7, the switch state is turned on, and the color and transparency change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #E5E5E5 gradually changes to the color #256FFF, and the transparency changes from 10% to 100%. Exemplarily, the key frame curve used in the color and transparency change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of the Android system.

[0145] In this embodiment, the key frame curve used in the moving animation of the circular handle and the IO mark may be an elastic curve, wherein the mathematical principle of the elastic curve is damped vibration.

[0146] The resistance encountered by an object moving in a fluid is proportional to its speed:

[0147] f1=-γ*v;

[0148] Among them, f1 is the friction resistance, v is the velocity, γ is the damping coefficient, and the direction of resistance is opposite to the direction of velocity.

[0149] From Hooke's law we know that:

[0150] f2 = -k*x;

[0151] Among them, f2 is the elastic restoring force, k is the spring stiffness coefficient, and x is the spring deformation length.

[0152] According to Newton's second law:

[0153] F = m*a;

[0154] Among them, F is the external force, m is the mass of the object, and a is the acceleration of the object.

[0155] The external force F is the resultant force of the elastic restoring force f2 and the friction resistance f1, so:

[0156] F = -γ*vk*x.

[0157] Therefore, m*a=-γ*vk*x.

[0158] Converting the above formula into differential equation form, we can get:

[0159]

[0160] In the differential equation, the damping coefficient β and the natural frequency θ are introduced to obtain the second-order differential equation of damped vibration:

[0161] in,

[0162] When β2 <θ 2 When , the damped vibration is underdamped vibration, and the corresponding relationship between the elastic displacement of the object and time can be expressed as Figure 8 As shown in (1); when β 2 >θ 2 When , the damped vibration is over-damped vibration, and the corresponding relationship between the elastic displacement of the object and time can be expressed as Figure 8 As shown in (2); when β 2 =θ 2 When , the damped vibration is critically damped vibration, and the corresponding relationship between the elastic displacement of the object and time can be expressed as Figure 8 As shown in (3).

[0163] (1) The condition for underdamped vibration is γ 2 <4mk, i.e. damping ratio

[0164] The displacement formula for underdamped vibration is: x(t) = e αt (c1 cosωt+c2 sinωt); where,

[0165] c1=p0, v0 is the initial velocity of the object, p0 is the initial displacement of the object relative to the equilibrium point, t is the time, and x(t) is the elastic displacement of the object.

[0166] (2) The condition for overdamped vibration is γ 2 >4mk, i.e. damping ratio

[0167] The displacement formula for overdamped vibration is: in,

[0168] c1=p0-c2,

[0169] (3) The condition for critical damping vibration is γ 2 =4mk, i.e. damping ratio

[0170] The displacement formula for critical damping vibration is: x(t) = (c1 + c2t)e αt ;in, c1=p0, c2=v0-α×p0.

[0171] In this embodiment, the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO mark corresponds to over-damped vibration, wherein the damping coefficient γ is set to 24, the spring stiffness coefficient k is set to 300, and the object mass m is 1 by default.

[0172] Since the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to the over-damped vibration, as the circular handle moves in the background track, the circular handle moves to the right boundary of the background track and then rebounds, that is, the circular handle touches the right boundary of the background track and then moves in the opposite direction, so as to present the rebound effect of the circular handle and the IO logo. Among them, the elastic curve used in the key frame curve of the rebound animation can also correspond to the over-damped vibration mentioned above.

[0173] Continue to refer to Figure 6a At time T5, the circular handle continues to move to the right in the sliding area of ​​the background track. When it moves to the right end of the sliding area of ​​the background track, it will not stop moving, but continue to move to the right until it moves to the right boundary of the background track. Please refer to the dotted box in the schematic diagram of the switch control at time T6. At this time, the circular handle touches the wall and rebounds (that is, moves in the opposite direction), and moves back to the left in the background track to the right end of the sliding area of ​​the background track. Please refer to the schematic diagram of the switch control at time T7. Among them, the circular handle moves to the right boundary of the background track, which can be understood as the right boundary of the circular handle being tangent to the right boundary of the background track, or it can be understood as the right boundary of the stroke of the circular handle being tangent to the right boundary of the background track. This embodiment does not limit this.

[0174] In an optional embodiment, after the circular handle moves to the right end of the sliding area of ​​the background track, the width of the IO logo no longer changes while the circular handle continues to move rightward to the right boundary of the background track and while the circular handle bounces back after hitting the wall.

[0175] Optionally, after the circular handle moves to the right end of the sliding area of ​​the background track, the color of the IO logo and the background track no longer changes while the circular handle continues to move rightward to the right boundary of the background track and while the circular handle bounces back after hitting the wall.

[0176] In another optional embodiment, after the circular handle moves to the right end of the sliding area of ​​the background track, the circular handle continues to move rightward to the right boundary of the background track, and the circular handle rebounds after hitting the wall, the width of the IO mark still changes. Wherein, after the circular handle moves to the right end of the sliding area of ​​the background track, the circular handle continues to move rightward to the right boundary of the background track, and the circular handle rebounds after hitting the wall, the width of the IO mark first decreases and then increases.

[0177] Continue to refer to Figure 6a At time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction.

[0178] In a possible implementation, during the rebound of the circular handle and the IO logo, the circular handle and the IO logo perform a magnification effect. For example, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0179] In another possible implementation, after the circular handle and the IO logo rebound to the right end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in animation effect. Exemplarily, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0180] Exemplarily, the key frame curve used in the enlargement animation of the circular handle and the IO logo may be a Bezier curve, such as a native sharp curve of the Android system.

[0181] At this point, the display state of the switch control is switched from the closed state to the open state.

[0182] (ii) When the switch control is in the on state, the user clicks the switch control, and in response to the user's operation on the switch control, the display state of the switch control switches from the on state to the off state. Figure 6b shown.

[0183] like Figure 6b As shown, at time T0, the switch control is in the on state. At this time, the circular handle is located at the right end of the sliding area of ​​the background track. When the user clicks the switch control, it can be any area of ​​the switch control, and the switch control executes the switching process from the on state to the off state. Among them, the animation effects displayed in the switching process from the on state to the off state of the switch control include but are not limited to: the shrinking effect of the circular handle and the IO logo, the moving effect of the circular handle and the IO logo, the shape transformation effect of the IO logo, the color change effect of the background track and the IO logo, the rebound effect of the circular handle and the IO logo, and the enlargement effect of the circular handle and the IO logo. It should be pointed out that some of the above-mentioned effects can occur simultaneously.

[0184] Reference Figure 6b When the user presses or touches the switch control, the circular handle and IO logo perform a shrinking animation. Exemplarily, the circular handle and IO logo perform an animation effect of shrinking from 100% to 94%, and the animation duration is 50ms. The switch control after the circular handle and IO logo are reduced can refer to the switch control at time T1. Exemplarily, the key frame curve used in the shrinking animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system.

[0185] When the user's finger leaves the switch control, the circular handle and IO logo movement effects, as well as the IO logo shape change effects are triggered. Figure 6a The switch control at time T2. The circular handle and IO logo move to the left along the horizontal center line of the background track, and the shape of the IO logo changes as the position moves. The width of the IO logo gradually increases, the height remains unchanged, and the rounded corners of the IO logo are always half of the width.

[0186] Continue to refer to Figure 6b At time T3, the circular handle and the IO mark move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction. Compared with time T2, the circular handle and the IO mark are located further to the left in the background track, and the width of the IO mark is larger.

[0187] It should be noted that, during the movement of the circular handle and the IO logo and the shape transformation of the IO logo, the center point of the IO logo always coincides with the center point of the circular handle. The width of the IO logo is proportional to the offset of the circular handle in the sliding area of ​​the background track.

[0188] Combination Figure 6a and Figure 7b , from T0 to T7, as the circular handle gradually moves to the left in the background track, the offset of the circular handle in the background track gradually decreases, and the width of the IO logo gradually increases. Among them, at T0, the switch control is in the on state, the offset of the circular handle in the background track is 18, and the width of the IO logo is 1.5dp; at T3 and T4, the offset of the circular handle in the background track is 9, and the width of the IO logo is 3.75dp; at T7, the switch control is in the off state, the offset of the circular handle in the background track is 0, and the width of the IO logo is 6dp.

[0189] It should be pointed out that if Figure 7b The mapping relationship between the width w of the IO logo and the offset d of the circular handle in the sliding area of ​​the background track shown does not take into account the shrinking effect of the IO logo. If the shrinking effect of the IO logo is taken into account, the width of the IO logo can be multiplied by the corresponding shrinking ratio, which will not be repeated here.

[0190] Continue to refer to Figure 6b At time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction, and the color change effect of the background track and IO logo is triggered. Figure 6bAt time T4, the color of the background track and IO mark begins to change. For example, when the switch state is on, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system); when the switch state is off, the color of the background track and IO mark is #E5E5E5. Figure 6b At T7, the switch state is in the off state, and the color change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #256FFF gradually changes to the color #E5E5E5. Exemplarily, the key frame curve used in the color change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of Android.

[0191] It should be noted that the color of the background track and the color of the IO logo are always consistent. In addition, the time difference between time T4 and time T3 is extremely small, which is related to the response time of color drawing, and the user cannot perceive the time difference with the naked eye.

[0192] In an optional implementation, the color change effect of the background track and IO logo can also be replaced by: the color and transparency change effect of the background track and IO logo, which is not limited in this embodiment. Similarly, at time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, move to the midpoint of the background track in the horizontal direction, and the color and transparency change effect of the background track and IO logo is triggered. Figure 6b At time T4, the color and transparency of the background track and IO mark begin to change. For example, when the switch state is on, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system), and the transparency is 100%; when the switch state is in the state, the color of the background track and IO mark is #E5E5E5, and the transparency is 10%. Continue to refer to Figure 6b At T7, the switch state is in the off state, and the color and transparency change animation of the background track and IO logo are displayed between T4 and T7, for example, the color #256FFF gradually changes to the color #E5E5E5, and the transparency changes from 100% to 10%. Exemplarily, the key frame curve used in the color and transparency change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of the Android system.

[0193] In this embodiment, the key frame curve used in the moving animation of the circular handle and the IO mark can be an elastic curve. The elastic curve used in the key frame curve of the moving animation of the circular handle and the IO mark corresponds to over-damped vibration, the damping coefficient γ is set to 24, the spring stiffness coefficient k is set to 300, and the object mass m is 1 by default.

[0194] Since the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to the over-damped vibration, as the circular handle moves in the background track, the circular handle moves to the left boundary of the background track and then rebounds, that is, the circular handle touches the left boundary of the background track and then moves in the opposite direction, so as to present the rebound effect of the circular handle and the IO logo. Among them, the elastic curve used in the key frame curve of the rebound animation can also correspond to the over-damped vibration mentioned above.

[0195] Continue to refer to Figure 6b At time T5, the circular handle continues to move to the left in the sliding area of ​​the background track. When it moves to the left end of the sliding area of ​​the background track, it will not stop moving, but continue to move to the left until it moves to the left boundary of the background track. Please refer to the schematic diagram of the switch control at time T6. At this time, the circular handle touches the wall and rebounds, and moves back to the right in the background track to the left end of the sliding area of ​​the background track. Please refer to the schematic diagram of the switch control at time T7. Among them, the circular handle moves to the left boundary of the background track, which can be understood as the left boundary of the circular handle being tangent to the left boundary of the background track, or it can be understood as the left boundary of the stroke of the circular handle being tangent to the left boundary of the background track. This embodiment does not limit this.

[0196] In an optional embodiment, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO logo no longer changes while the circular handle continues to move leftward to the left boundary of the background track and while the circular handle rebounds upon hitting the wall.

[0197] Optionally, after the circular handle moves to the left end of the sliding area of ​​the background track, the color of the IO logo and the background track no longer changes while the circular handle continues to move leftward to the left boundary of the background track and while the circular handle bounces back after hitting the wall.

[0198] In another optional embodiment, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO mark still changes during the process of the circular handle continuing to move leftward to the left boundary of the background track, and the process of the circular handle rebounding after hitting the wall. In which, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO mark first increases and then decreases during the process of the circular handle continuing to move leftward to the left boundary of the background track, and the process of the circular handle rebounding after hitting the wall.

[0199] Continue to refer to Figure 6b At time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction.

[0200] In a possible implementation, during the rebound of the circular handle and the IO logo, the circular handle and the IO logo perform a magnification effect. For example, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0201] In another possible implementation, after the circular handle and the IO logo rebound to the left end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in animation effect. Exemplarily, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0202] Exemplarily, the key frame curve used in the enlargement animation of the circular handle and the IO logo may be a Bezier curve, such as a native sharp curve of the Android system.

[0203] At this point, the display state of the switch control is switched from the on state to the off state.

[0204] In this scenario, the user can control the switch control by clicking. The user's pressing or touching operation triggers the shrinking animation of the circular handle and IO logo of the switch control, and the user's lifting of the hand triggers the display state switching animation of the switch control, including: the moving animation of the circular handle and IO logo, the shape transformation animation of the IO logo, the color change animation of the background track and IO logo, the rebound animation of the circular handle and IO logo, and the enlargement animation of the circular handle and IO logo.

[0205] For example, Fig. 9 As shown, when the user clicks to trigger the display state switch of the switch control, the duration of the shrinking animation of the circular handle and the IO logo is 50ms, and the total duration of the moving animation of the circular handle and the IO logo, the shape transformation animation of the IO logo, the color change animation of the background track and the IO logo, the rebound animation of the circular handle and the IO logo, and the enlargement animation of the circular handle and the IO logo is 200ms.

[0206] Scene 2

[0207] In this scenario, a user operation of sliding is taken as an example to explain the display method of the switch control.

[0208] (i) When the switch control is in the off state, the user presses and slides the switch control, or the user touches and slides the switch control, and in response to the user's operation on the switch control, the display state of the switch control switches from the off state to the on state.

[0209] In one case, the user presses and slides the switch control, or the user touches and slides the switch control, and releases the hand when the circular handle slides to the right end of the sliding area of ​​the background track. The change process of the switch control can refer to Fig.10a shown.

[0210] like Fig.10a As shown, at time T0, the switch control is in the off state. At this time, the circular handle is located at the left end of the sliding area of ​​the background track. When the user presses, slides or touches the sliding switch control, it can be pressed or touched and slid in any area of ​​the switch control, and the switch control executes the switching process from the off state to the on state. Among them, the animation effects displayed in the switching process from the off state to the on state of the switch control include but are not limited to: the shrinking effect of the circular handle and the IO logo, the moving effect of the circular handle and the IO logo, the shape transformation effect of the IO logo, the color change effect of the background track and the IO logo, and the enlargement effect of the circular handle and the IO logo. It should be pointed out that some of the above-mentioned effects can occur simultaneously.

[0211] Reference Fig.10a , when the user presses or touches the switch control with his finger, the circular handle and IO logo perform a shrinking animation. Exemplarily, the circular handle and IO logo perform an animation effect of shrinking from 100% to 94%. The switch control after the circular handle and IO logo are reduced can refer to the switch control at time T1. Exemplarily, the key frame curve used in the shrinking animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system. In this scenario, the animation duration of the circular handle and IO logo shrinking from 100% to 94% can be 50ms. At this time, as long as the user keeps pressing or touching the finger and does not slide the finger, the switch control always maintains the display form of the switch control at time T1.

[0212] Continue to refer to Fig.10a When the user slides his finger to the right, the moving effects of the circular handle and IO logo, as well as the shape change effects of the IO logo are triggered. Among them, the moving effects of the circular handle and IO logo, as well as the shape change effects of the IO logo, are related to the finger sliding operation, that is, the moving effects of the circular handle and IO logo, as well as the shape change effects of the IO logo present a hand-following state. It can be understood that the moving position of the circular handle and IO logo, as well as the degree of reduction in the width of the IO logo, are related to the amplitude of the finger sliding.

[0213] Reference Fig.10aIn the switch control at time T2, as the user slides his finger, the circular handle and the IO logo move to the right along the horizontal center line of the background track, and the shape of the IO logo changes as the position moves. The width of the IO logo gradually decreases, the height remains unchanged, and the rounded corners of the IO logo are always half of the width.

[0214] Continue to refer to Fig.10a As the user slides his finger, at time T3 the circular handle and the IO mark move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction. Compared with time T2, the circular handle and the IO mark are located further to the right in the background track, and the width of the IO mark is smaller.

[0215] It should be noted that, during the movement of the circular handle and the IO logo and the shape transformation of the IO logo, the center point of the IO logo always coincides with the center point of the circular handle. The width of the IO logo is proportional to the offset of the circular handle in the sliding area of ​​the background track.

[0216] Combination Fig.10a and Figure 7b From T0 to T7, the circular handle gradually moves to the right in the background track as the finger slides, the offset of the circular handle in the background track gradually increases, and the width of the IO mark gradually decreases. Among them, at T0, the switch control is in the off state, the offset of the circular handle in the background track is 0, and the width of the IO mark is 6dp; at T3 and T4, the offset of the circular handle in the background track is 9, and the width of the IO mark is 3.75dp; at T7, the switch control is in the on state, the offset of the circular handle in the background track is 18, and the width of the IO mark is 1.5dp.

[0217] It should be pointed out that if Figure 7b The mapping relationship between the width w of the IO logo and the offset d of the circular handle in the sliding area of ​​the background track shown does not take into account the shrinking effect of the IO logo. If the shrinking effect of the IO logo is taken into account, the width of the IO logo can be multiplied by the corresponding shrinking ratio, which will not be repeated here.

[0218] Continue to refer to Fig.10a As the user slides his finger, at time T3 the circular handle and the IO logo move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction, and the color change effect of the background track and the IO logo is triggered. Fig.10aAt time T4, the color of the background track and IO mark begins to change. For example, when the switch is in the off state, the color of the background track and IO mark is #E5E5E5; when the switch is in the on state, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system). Fig.10a At T7, the switch state is turned on, and the color change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #E5E5E5 gradually changes to the color #256FFF. For example, the key frame curve used in the color change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of Android.

[0219] It should be noted that the color of the background track and the color of the IO logo are always consistent. In addition, the time difference between time T4 and time T3 is extremely small, which is related to the response time of color drawing, and the user cannot perceive the time difference with the naked eye.

[0220] In an optional implementation, the color change effect of the background track and IO logo can also be replaced by: the color and transparency change effect of the background track and IO logo, which is not limited in this embodiment. Similarly, at time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, move to the midpoint of the background track in the horizontal direction, and the color and transparency change effect of the background track and IO logo is triggered. Fig.10a At time T4, the color and transparency of the background track and IO mark begin to change. For example, when the switch is in the off state, the color of the background track and IO mark is #E5E5E5, and the transparency is 10%; when the switch is in the on state, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system), and the transparency is 100%. Continue to refer to Fig.10a At T7, the switch state is turned on, and the color and transparency change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #E5E5E5 gradually changes to the color #256FFF, and the transparency changes from 10% to 100%. Exemplarily, the key frame curve used in the color and transparency change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of the Android system.

[0221] Continue to refer to Fig.10aAs the user's finger slides, the circular handle continues to move rightward in the sliding area of ​​the background track at time T5, and moves to the right end of the sliding area of ​​the background track. You can refer to the switch control at time T6. At time T6, the circular handle and IO logo are in a reduced state.

[0222] Continue to refer to Fig.10a , when the user's finger leaves the switch control, the enlargement animation of the circular handle and IO logo is triggered. At time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction. Exemplarily, the circular handle and IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms. Exemplarily, the key frame curve used in the enlargement animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system.

[0223] At this point, the display state of the switch control is switched from the closed state to the open state.

[0224] In another case, the user presses and slides the switch control, or the user touches and slides the switch control and releases the hand before the circular handle slides to the right end of the sliding area of ​​the background track. Fig.10b It should be noted that the difference between this situation and the above situation is that the timing when the user lets go of the phone is different.

[0225] Reference Fig.10b As the user's finger slides, the circular handle continues to move to the right in the sliding area of ​​the background track at time T5. Assuming that the user's finger leaves the switch control after time T5, since the circular handle has not slid to the right end of the sliding area of ​​the background track at this time, the movement effect of the circular handle and the IO logo, as well as the shape transformation effect of the IO logo are triggered.

[0226] It should be pointed out that before the user leaves the hand, the moving animation of the circular handle and the IO logo, as well as the shape transformation animation of the IO logo, all show changes with the hand. After the user leaves the hand, the key frame curve used for the moving animation of the circular handle and the IO logo can be an elastic curve. Among them, the mathematical principle of the elastic curve is damped vibration. In this embodiment, the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to over-damped vibration. Among them, the damping coefficient γ is set to 24, the spring stiffness coefficient k is set to 300, and the object mass m defaults to 1. Since the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to over-damped vibration, as the circular handle moves in the background track, the circular handle moves to the right boundary of the background track and then rebounds, that is, the circular handle touches the right boundary of the background track and then moves in the opposite direction to present the rebound effect of the circular handle and the IO logo. Among them, the elastic curve used in the key frame curve of the rebound animation can also correspond to the over-damped vibration mentioned above.

[0227] Continue to refer to Fig.10b After the user lets go of the circular handle, the circular handle continues to move to the right in the sliding area of ​​the background track. When it moves to the right end of the sliding area of ​​the background track, it does not stop moving, but continues to move to the right until it moves to the right boundary of the background track. Please refer to the dotted box in the schematic diagram of the switch control at time T6. At this time, the circular handle touches the wall and rebounds, and moves back to the left in the background track to the right end of the sliding area of ​​the background track. Please refer to the schematic diagram of the switch control at time T7. Among them, the circular handle moves to the right boundary of the background track, which can be understood as the right boundary of the circular handle being tangent to the right boundary of the background track, or it can be understood as the right boundary of the stroke of the circular handle being tangent to the right boundary of the background track. This is not limited in this embodiment.

[0228] In an optional embodiment, after the circular handle moves to the right end of the sliding area of ​​the background track, the width of the IO logo no longer changes while the circular handle continues to move rightward to the right boundary of the background track and while the circular handle bounces back after hitting the wall.

[0229] In another optional embodiment, after the circular handle moves to the right end of the sliding area of ​​the background track, the circular handle continues to move rightward to the right boundary of the background track, and the circular handle rebounds after hitting the wall, the width of the IO mark still changes. Wherein, after the circular handle moves to the right end of the sliding area of ​​the background track, the circular handle continues to move rightward to the right boundary of the background track, and the circular handle rebounds after hitting the wall, the width of the IO mark first decreases and then increases.

[0230] Continue to refer to Fig.10bAt time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction.

[0231] In a possible implementation, during the rebound of the circular handle and the IO logo, the circular handle and the IO logo perform a magnification effect. For example, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0232] In another possible implementation, after the circular handle and the IO logo rebound to the right end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in animation effect. Exemplarily, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0233] Exemplarily, the key frame curve used in the enlargement animation of the circular handle and the IO logo may be a Bezier curve, such as a native sharp curve of the Android system.

[0234] At this point, the display state of the switch control is switched from the closed state to the open state.

[0235] (ii) When the switch control is in the on state, the user presses and slides the switch control, or the user touches and slides the switch control, and in response to the user's operation on the switch control, the display state of the switch control switches from the on state to the off state.

[0236] In one case, the user presses and slides the switch control, or the user touches and slides the switch control, and releases the hand when the circular handle slides to the left end of the sliding area of ​​the background track. The change process of the switch control can be referred to Fig.10c shown.

[0237] like Fig.10c As shown, at time T0, the switch control is in the off state. At this time, the circular handle is located at the right end of the sliding area of ​​the background track. When the user presses, slides or touches the sliding switch control, the press, slide or touch slide can be performed in any area of ​​the switch control, and the switch control executes the switching process from the off state to the on state. Among them, the animation effects displayed in the switching process from the off state to the on state of the switch control include but are not limited to: the shrinking effect of the circular handle and the IO logo, the moving effect of the circular handle and the IO logo, the shape transformation effect of the IO logo, the color change effect of the background track and the IO logo, and the enlargement effect of the circular handle and the IO logo. It should be pointed out that some of the above-mentioned effects can occur simultaneously.

[0238] Reference Fig.10c, when the user presses or touches the switch control with his finger, the circular handle and IO logo perform a shrinking animation. Exemplarily, the circular handle and IO logo perform an animation effect of shrinking from 100% to 94%. The switch control after the circular handle and IO logo are reduced can refer to the switch control at time T1. Exemplarily, the key frame curve used in the shrinking animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system. In this scenario, the animation duration of the circular handle and IO logo shrinking from 100% to 94% can be 50ms. At this time, as long as the user keeps pressing or touching the finger and does not slide the finger, the switch control always maintains the display form of the switch control at time T1.

[0239] Continue to refer to Fig.10c When the user slides his finger to the left, the circular handle and IO logo movement effects, as well as the IO logo shape change effects are triggered. Among them, the circular handle and IO logo movement effects, as well as the IO logo shape change effects, are related to the finger sliding operation, that is, the circular handle and IO logo movement effects, as well as the IO logo shape change effects present a hand-following state. It can be understood that the movement position of the circular handle and IO logo, as well as the degree of increase in the width of the IO logo, are related to the amplitude of the finger sliding.

[0240] Reference Fig.10c In the switch control at time T2, as the user slides his finger, the circular handle and the IO logo move to the left along the horizontal center line of the background track, and the shape of the IO logo changes as the position moves. The width of the IO logo gradually increases, the height remains unchanged, and the rounded corners of the IO logo are always half of the width.

[0241] Continue to refer to Fig.10c As the user slides his finger, at time T3 the circular handle and the IO mark move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction. Compared with time T2, the circular handle and the IO mark are further to the left in the background track, and the width of the IO mark is larger.

[0242] It should be noted that, during the movement of the circular handle and the IO logo and the shape transformation of the IO logo, the center point of the IO logo always coincides with the center point of the circular handle. The width of the IO logo is proportional to the offset of the circular handle in the sliding area of ​​the background track.

[0243] Combination Fig.10c and Figure 7bFrom T0 to T7, the circular handle gradually moves to the left in the background track as the finger slides, the offset of the circular handle in the background track gradually decreases, and the width of the IO logo gradually increases. Among them, at T0, the switch control is in the on state, the offset of the circular handle in the background track is 18, and the width of the IO logo is 1.5dp; at T3 and T4, the offset of the circular handle in the background track is 9, and the width of the IO logo is 3.75dp; at T7, the switch control is in the off state, the offset of the circular handle in the background track is 0, and the width of the IO logo is 6dp.

[0244] It should be pointed out that if Figure 7b The mapping relationship between the width w of the IO logo and the offset d of the circular handle in the sliding area of ​​the background track shown does not take into account the shrinking effect of the IO logo. If the shrinking effect of the IO logo is taken into account, the width of the IO logo can be multiplied by the corresponding shrinking ratio, which will not be repeated here.

[0245] Continue to refer to Fig.10c As the user slides his finger, at time T3 the circular handle and the IO logo move to the midpoint of the sliding area of ​​the background track, that is, to the midpoint of the background track in the horizontal direction, and the color change effect of the background track and the IO logo is triggered. Fig.10a At time T4, the color of the background track and IO mark begins to change. For example, when the switch state is on, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system); when the switch state is off, the color of the background track and IO mark is #E5E5E5. Fig.10c At T7, the switch state is in the off state, and the color change animation of the background track and IO logo is displayed between T4 and T7, for example, the color #256FFF gradually changes to the color #E5E5E5. Exemplarily, the key frame curve used in the color change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of Android.

[0246] It should be noted that the color of the background track and the color of the IO logo are always consistent. In addition, the time difference between time T4 and time T3 is extremely small, which is related to the response time of color drawing, and the user cannot perceive the time difference with the naked eye.

[0247] In an optional implementation, the color change effect of the background track and IO logo can also be replaced by: the color and transparency change effect of the background track and IO logo, which is not limited in this embodiment. Similarly, at time T3, the circular handle and IO logo move to the midpoint of the sliding area of ​​the background track, that is, move to the midpoint of the background track in the horizontal direction, and the color and transparency change effect of the background track and IO logo is triggered. Fig.10c At time T4, the color and transparency of the background track and IO mark begin to change. For example, when the switch is on, the color of the background track and IO mark is #256FFF (or the color tone when the control is activated in the Android system), and the transparency is 100%; when the switch is off, the color of the background track and IO mark is #E5E5E5, and the transparency is 10%. Continue to refer to Fig.10a At T7, the switch state is in the off state, and the color and transparency change animation of the background track and IO logo are displayed between T4 and T7, for example, the color #256FFF gradually changes to the color #E5E5E5, and the transparency changes from 100% to 10%. Exemplarily, the key frame curve used in the color and transparency change animation of the background track and IO logo can be a fastOutSlowIn curve, such as the native standard curve of the Android system.

[0248] Continue to refer to Fig.10c As the user's finger slides, the circular handle continues to move leftward in the sliding area of ​​the background track at time T5, and moves to the left end of the sliding area of ​​the background track. You can refer to the switch control at time T6. At time T6, the circular handle and IO logo are in a reduced state.

[0249] Continue to refer to Fig.10c , when the user's finger leaves the switch control, the enlargement animation of the circular handle and IO logo is triggered. At time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction. Exemplarily, the circular handle and IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms. Exemplarily, the key frame curve used in the enlargement animation of the circular handle and IO logo can be a Bezier curve, such as the native sharp curve of the Android system.

[0250] At this point, the display state of the switch control is switched from the on state to the off state.

[0251] In another case, the user presses and slides the switch control, or the user touches and slides the switch control and releases the hand before the circular handle slides to the left end of the sliding area of ​​the background track. Fig.10dIt should be noted that the difference between this situation and the above situation is that the timing when the user lets go of the phone is different.

[0252] It should be pointed out that before the user leaves the hand, the moving animation of the circular handle and the IO logo, as well as the shape transformation animation of the IO logo, all show changes with the hand. After the user leaves the hand, the key frame curve used for the moving animation of the circular handle and the IO logo can be an elastic curve. Among them, the mathematical principle of the elastic curve is damped vibration. In this embodiment, the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to over-damped vibration. Among them, the damping coefficient γ is set to 24, the spring stiffness coefficient k is set to 300, and the object mass m defaults to 1. Since the elastic curve used in the key frame curve of the moving animation of the circular handle and the IO logo corresponds to over-damped vibration, as the circular handle moves in the background track, the circular handle moves to the left boundary of the background track and then rebounds, that is, the circular handle touches the left boundary of the background track and then moves in the opposite direction to present the rebound effect of the circular handle and the IO logo. Among them, the elastic curve used in the key frame curve of the rebound animation can also correspond to the over-damped vibration mentioned above.

[0253] Continue to refer to Fig.10d After the user lets go of the circular handle, the circular handle continues to move to the left in the sliding area of ​​the background track. When it moves to the left end of the sliding area of ​​the background track, it does not stop moving, but continues to move to the left until it moves to the left boundary of the background track. Please refer to the dotted box in the schematic diagram of the switch control at time T6. At this time, the circular handle touches the wall and rebounds, and moves back to the right in the background track to the left end of the sliding area of ​​the background track. Please refer to the schematic diagram of the switch control at time T7. Among them, the circular handle moves to the left boundary of the background track, which can be understood as the left boundary of the circular handle being tangent to the left boundary of the background track, or it can be understood as the left boundary of the stroke of the circular handle being tangent to the left boundary of the background track. This is not limited in this embodiment.

[0254] In an optional embodiment, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO logo no longer changes while the circular handle continues to move leftward to the left boundary of the background track and while the circular handle rebounds upon hitting the wall.

[0255] In another optional embodiment, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO mark still changes during the process of the circular handle continuing to move leftward to the left boundary of the background track, and the process of the circular handle rebounding after hitting the wall. In which, after the circular handle moves to the left end of the sliding area of ​​the background track, the width of the IO mark first increases and then decreases during the process of the circular handle continuing to move leftward to the left boundary of the background track, and the process of the circular handle rebounding after hitting the wall.

[0256] Continue to refer to Fig.10d At time T7, the size of the circular handle and IO logo in the switch control is restored to the size before reduction.

[0257] In a possible implementation, during the rebound of the circular handle and the IO logo, the circular handle and the IO logo perform a magnification effect. For example, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0258] In another possible implementation, after the circular handle and the IO logo rebound to the left end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in animation effect. Exemplarily, the circular handle and the IO logo perform an animation effect of restoring the size from 94% to 100%, and the animation duration is 50ms.

[0259] Exemplarily, the key frame curve used in the enlargement animation of the circular handle and the IO logo may be a Bezier curve, such as a native sharp curve of the Android system.

[0260] At this point, the display state of the switch control is switched from the on state to the off state.

[0261] (III) When the switch control is in the on state or the off state, the user presses and slides the switch control back and forth, or the user touches and slides the switch control back and forth, and in response to the user's operation on the switch control, the display state of the switch control switches or does not switch. At this time, the display state of the switch control is related to the final position of the circular handle in the sliding area of ​​the background track. After the user's operation, if the circular handle is located at the left end of the sliding area of ​​the background track, the switch control is in the off state, and if the circular handle is located at the right end of the sliding area of ​​the background track, the switch control is in the on state.

[0262] Reference Fig.10e At time T1, the circular handle and the IO logo are in a reduced state and are located at the left end of the sliding area of ​​the background track. At this time, the user's finger can slide to the right to adjust the display state of the switch control.

[0263] Continue to refer to Fig.10e At time T6, the circular handle and the IO logo are in a reduced state and are located at the right end of the sliding area of ​​the background track. At this time, the user's finger can slide to the left to adjust the display state of the switch control.

[0264] Reference Fig.10e , at time T2 to T5, the circular handle and the IO logo are in a reduced state, neither located at the left end of the sliding area of ​​the background track nor at the right end of the sliding area of ​​the background track. At this time, the user's finger can slide left or right to adjust the display state of the switch control.

[0265] If the user releases the circular handle when it slides to the right end of the sliding area of ​​the background track, the enlargement effect of the circular handle and the IO logo is triggered, and the size of the circular handle and the IO logo in the switch control is restored to the size before the reduction. At this time, the display state of the switch control is turned on.

[0266] If the user releases the circular handle when it slides to the left end of the sliding area of ​​the background track, the enlargement animation of the circular handle and the IO logo is triggered, and the size of the circular handle and the IO logo in the switch control is restored to the size before the reduction. At this time, the display state of the switch control is closed.

[0267] If the user does not release the circular handle when it slides to the left or right end of the sliding area of ​​the background track, when the circular handle is located in the right half of the sliding area of ​​the background track, the circular handle and the IO logo continue to move to the right in the sliding area of ​​the background track. When it moves to the right end of the sliding area of ​​the background track, it will not stop moving, but continue to move to the right until it moves to the right boundary of the background track, and bounce back against the wall, moving back to the left in the background track to the right end of the sliding area of ​​the background track. And during the rebound process, or after rebounding to the right end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in animation, and the size is restored to the size before reduction. At this time, the display state of the switch control is on.

[0268] If the user does not release the circular handle when it slides to the left or right end of the sliding area of ​​the background track, when the circular handle is located in the left half of the sliding area of ​​the background track, the circular handle and the IO logo continue to move to the left in the sliding area of ​​the background track. When it moves to the left end of the sliding area of ​​the background track, it will not stop moving, but continue to move to the left until it moves to the left boundary of the background track, and bounce back against the wall, and move back to the right in the background track to the left end of the sliding area of ​​the background track. And during the rebound process, or after rebounding to the left end of the sliding area of ​​the background track, the circular handle and the IO logo perform a zoom-in effect, and the size is restored to the size before reduction. At this time, the display state of the switch control is off.

[0269] In this scenario, the user can control the switch control by pressing and sliding or touching and sliding. Among them, the user operation triggers the shrinking animation of the circular handle and IO logo of the switch control, the moving animation of the circular handle and IO logo, the shape change animation of the IO logo, the color change animation of the background track and IO logo, the rebound animation of the circular handle and IO logo, and the enlargement animation of the circular handle and IO logo. Exemplarily, the duration of the shrinking animation of the circular handle and IO logo and the enlargement animation of the circular handle and IO logo can be 50ms, and the duration of other animations is related to the duration of the user operation.

[0270] Scene 3

[0271] In this scenario, the user presses or touches the switch control to trigger the circular handle and IO logo to shrink. If the user presses or touches for a preset time, the user releases the touch to directly trigger the circular handle and IO logo to enlarge. At this time, the display state of the switch control does not change.

[0272] Reference Fig.11 In (1), at time T0, the switch control is in the off state, and the user presses or touches the switch control to trigger the circular handle and IO logo to shrink, for example, the size shrinks from 100% to 94%. You can refer to the schematic diagram of the switch control at time T1. If the user releases the switch control after the user presses or touches the switch control for a preset time, the user releases the switch control to trigger the circular handle and IO logo to enlarge, for example, the size enlarges from 94% to 100%. You can refer to the schematic diagram of the switch control at time T2.

[0273] Reference Fig.11 In (2), at time T0, the switch control is in the on state, and the user presses or touches the switch control to trigger the circular handle and IO logo to shrink, for example, the size shrinks from 100% to 94%. You can refer to the schematic diagram of the switch control at time T1. If the user releases the switch control after the user presses or touches the switch control for a preset time, the user releases the switch control to trigger the circular handle and IO logo to enlarge, for example, the size enlarges from 94% to 100%. You can refer to the schematic diagram of the switch control at time T2.

[0274] The duration of the circular handle and IO logo shrinking animation and the circular handle and IO logo enlarging animation may be 50ms. For example, the key frame curve used in the circular handle and IO logo shrinking animation and the circular handle and IO logo enlarging animation may be a Bezier curve, such as the native sharp curve of the Android system.

[0275] In a specific implementation, the hot zone size of the switch control is larger than the area size of the background track. Exemplarily, the hot zone area of ​​the switch control includes not only the area of ​​the background track, but also includes or partially includes the text description area corresponding to the switch control. In this way, the user can perform control operations on the switch control at any position in the hot zone of the switch control.

[0276] like Fig.12 As shown, when the user performs a click operation, a press-slide operation, or a touch-slide operation at any position in the hot zone of the switch control, the switch control can be controlled. In this way, the user operation is more convenient, especially for users with imprecise operation, and the user experience is improved.

[0277] For the relevant explanation about the user controlling the switch control based on the click operation, the press sliding operation or the touch sliding operation, please refer to the previous text for details, which will not be repeated here.

[0278] In order to implement the display method of the above switch control in the terminal, an arr package can be developed in advance based on UIkit (a lightweight, modular front-end framework), and the arr package is used to implement the switch control described above. Among them, the application calls the arr package during compilation, and then after the application is installed, the above switch control can be displayed in the interface of the application. In this embodiment, the functional module corresponding to the arr package is temporarily referred to as a switch control module.

[0279] Reference Fig.13 The switch control module provides an adaptation interface to the application and inherits from the system control (SwitchEx). It can realize the above-mentioned shrinking / enlarging animation of the circular handle and IO logo, the movement and rebound animation of the circular handle and IO logo, the shape transformation animation of the IO logo, the color change animation of the background track and IO logo, and the hand-following movement animation of the circular handle and IO logo.

[0280] The switch control module provides the application with an adaptation interface corresponding to a plurality of display modes, so as to display the display effects corresponding to the different display modes.

[0281] For example, Fig.14 As shown, the switch control module can provide adaptation interfaces corresponding to the "switch available state" and the "switch unavailable state" respectively, so as to display the display effects corresponding to the "switch available state" and the "switch unavailable state" respectively.

[0282] For example, Fig.15 As shown, the switch control module can also provide adaptation interfaces corresponding to different theme scenes (such as light theme, dark theme, immersive theme, etc.) to display display effects corresponding to different theme scenes.

[0283] The following takes any Activity as an example to explain the execution sequence of the animation in the switch control module. Among them, Activity is an application component that provides a screen that users can use to interact in order to complete a task. All operations in Activity are closely related to the user. It is a component responsible for interacting with the user and can display specified controls through setContentView. In an Android application, an Activity is usually a separate screen that can display some controls and listen to and process user events to respond.

[0284] When the user controls the switch control by clicking, the execution sequence of the animation in the switch control module can refer to Fig.16a . Reference Fig.16c ,In the timing diagram, the circular handle and IO identifier ,and the background track are each an object in the switch control module, and each realizes its own animation effect based on a thread.

[0285] Reference Fig.16a , the process of the display method of the switch control provided in the embodiment of the present application specifically includes:

[0286] S301, Activity sets the switch control corresponding to the switch control module in the interface through setContentView.

[0287] Among them, the setContentView() method is used to set the user interface corresponding to the Activity. In this process, the setContentView() method is specifically used to set the interface of the switch control.

[0288] S302, the Activity configures the properties of the circular handle and the IO identifier.

[0289] Among them, the properties of the circular handle and the IO mark are used to indicate whether the current state of the switch control is on or off. Exemplarily, the properties of the circular handle and the IO mark may include the display position of the circular handle and the display form of the IO mark. Exemplarily, the properties of the circular handle and the IO mark may also include the display effect of the switch control, such as color, transparency, etc.

[0290] S303, in response to the user operation, the Activity executes DispatchTouchEvent.

[0291] Among them, DispatchTouchEvent handles touch event distribution.

[0292] In this embodiment, when the user operates the switch control in the user interface corresponding to the Activity, the Activity distributes the touch event to the switch control module.

[0293] S304, the switch control module executes onTouchEvent.

[0294] The switch control module executes the onTouchEvent() method to capture user operation events, such as events in which a user's finger presses or touches the screen, events in which a user's finger leaves the screen, and the like.

[0295] S305: The switch control module captures the actionDown event.

[0296] S306, the switch control module provides dynamic effect instructions to the circular handle and IO logo.

[0297] When the switch control module captures the actionDown event, it instructs the circular handle and IO logo to perform the shrinking effect.

[0298] S307, the circular handle and IO logo perform shrinking effect.

[0299] Among them, the shrinking effect can be achieved by redrawing.

[0300] When a finger presses or touches the switch control on the screen, the actionDown event is captured, triggering the redrawing of the circular handle and the IO logo. When the circular handle and the IO logo are redrawn, the range (bounds) of the circular handle and the IO logo is reduced, so that the circular handle and the IO logo are visually reduced. An animation effect.

[0301] S308: The switch control module captures the actionUp event.

[0302] S309, the switch control module provides dynamic effect instructions to the circular handle and IO logo.

[0303] When the switch control module captures the actionUp event, it instructs the circular handle and the IO logo to execute the IO logo movement and rebound animation, the IO logo shape change animation, and the IO logo color change animation.

[0304] Among them, the triggering condition for the circular handle and IO logo to execute the moving animation and the IO logo's shape transformation animation is the actionUp event.

[0305] Among them, the trigger condition for the circular handle and IO logo to execute the rebound effect is that the circular handle moves to the boundary of the background track.

[0306] Among them, the trigger condition for the color change effect of the IO logo is that the circular handle slides to the midpoint of the background track, or the state of the switch control changes (for example, switching from the on state to the off state, or from the off state to the on state).

[0307] S310, the switch control module provides dynamic effect instructions to the background track.

[0308] When the switch control module captures the actionUp event, it instructs the background track to perform a color change animation. The triggering condition for the background track to perform a color change animation is that the circular handle slides to the midpoint of the background track, or the state of the switch control changes (for example, from the on state to the off state, or from the off state to the on state).

[0309] This embodiment does not limit the execution order of S309 and S310.

[0310] S311, the circular handle and IO logo perform movement and rebound effects, as well as the IO logo's shape transformation effects.

[0311] When the finger leaves the switch control on the screen, the actionUp event is captured, triggering the redrawing of the circular handle and the IO logo. Among them, according to the position of the center point of the circular handle in the background track, a rounded rectangle is drawn as the IO logo. As the position of the circular handle changes, the bounds of the rounded rectangle are redrawn multiple times, the width of the rounded rectangle gradually changes, and the shape of the IO logo gradually changes from "O" to "I", or from "I" to "O".

[0312] S312, the circular handle and the IO logo execute the color change effect of the IO logo.

[0313] S313, the background track performs color change effect.

[0314] In one embodiment, the state_checked value of the switch control is used to indicate whether the state of the switch control has changed. Exemplarily, when the state_checked of the switch control is TRUE, the state of the switch control has changed; when the state_checked of the switch control is FALSE, the state of the switch control has not changed. Therefore, "state_checked is TRUE" is the trigger condition for the color change effect of the IO logo and the background track.

[0315] Correspondingly, when the state_checked of the switch control is TURE, the switch control module respectively provides animation instructions to the circular handle, IO logo and background track, so that the circular handle and IO logo execute the color change animation of the IO logo, and the background track executes the color change animation.

[0316] Since the switch control module can provide adapter interfaces corresponding to different theme scenes (such as light theme, dark theme, immersive theme, etc.), it can display the display effects corresponding to different theme scenes. Moreover, the color gradient strategy is different depending on the current state of the switch control. Therefore, the indication of the color change animation effect can also include a color gradient strategy that matches the theme.

[0317] In one embodiment, the state_enabled value of the switch control is used to indicate the current state of the switch control. Exemplarily, when the state_enabled of the switch control is TRUE, the current state of the switch control is the on state, and the color gradient strategy is to gradually change from color #256FFF (or the hue of the control when it is activated in the Android system) to color #E5E5E5. Correspondingly, when the state_enabled of the switch control is FALSE, the current state of the switch control is the off state, and the color gradient strategy is to gradually change from color #E5E5E5 to color #256FFF (or the hue of the control when it is activated in the Android system).

[0318] In an optional implementation, the color change effect can be replaced by a color and transparency change effect. Correspondingly, the color gradient strategy can be replaced by a color and transparency gradient strategy, which includes a color gradient scheme and a transparency gradient scheme, which will not be described in detail here.

[0319] Among them, S312 and S313 are executed synchronously.

[0320] S314, the circular handle and IO logo perform a magnification effect.

[0321] For details not explained in this process, please refer to the aforementioned embodiments and will not be described again here.

[0322] When the user controls the switch control by touching and sliding, the execution sequence of the animation in the switch control module can refer to Fig.16b . Reference Fig.16c ,In the timing diagram, the circular handle and IO identifier ,and the background track are each an object in the switch control module, and each realizes its own animation effect based on a thread.

[0323] Reference Fig.16b , the process of the display method of the switch control provided in the embodiment of the present application specifically includes:

[0324] S401, Activity sets the switch control corresponding to the switch control module in the interface through setContentView.

[0325] Among them, the setContentView() method is used to set the user interface corresponding to the Activity. In this process, the setContentView() method is specifically used to set the interface of the switch control.

[0326] S402, the Activity configures the properties of the circular handle and the IO identifier.

[0327] Among them, the properties of the circular handle and the IO mark are used to indicate whether the current state of the switch control is on or off. Exemplarily, the properties of the circular handle and the IO mark may include the display position of the circular handle and the display form of the IO mark. Exemplarily, the properties of the circular handle and the IO mark may also include the display effect of the switch control, such as color, transparency, etc.

[0328] S403, in response to the user operation, the Activity executes DispatchTouchEvent.

[0329] Among them, DispatchTouchEvent handles touch event distribution.

[0330] In this embodiment, when the user operates the switch control in the user interface corresponding to the Activity, the Activity distributes the touch event to the switch control module.

[0331] S404, the switch control module executes onTouchEvent.

[0332] The switch control module executes the onTouchEvent() method to capture user operation events, such as user finger pressing or touching the screen events, user finger sliding events, etc.

[0333] S405: The switch control module captures the actionDown event.

[0334] S406, the switch control module provides dynamic effect instructions to the circular handle and IO logo.

[0335] When the switch control module captures the actionDown event, it instructs the circular handle and IO logo to perform the shrinking effect.

[0336] S407, the circular handle and IO logo perform shrinking effect.

[0337] Among them, the shrinking effect can be achieved by redrawing.

[0338] When a finger presses or touches the switch control on the screen, the actionDown event is captured, triggering the redrawing of the circular handle and the IO logo. When the circular handle and the IO logo are redrawn, the range (bounds) of the circular handle and the IO logo is reduced, so that the circular handle and the IO logo are visually reduced. An animation effect.

[0339] S408: The switch control module captures the actionMove event.

[0340] S409, the switch control module provides dynamic effect instructions to the circular handle and IO logo.

[0341] When the switch control module captures the actionUp event, it instructs the circular handle and the IO logo to execute the IO logo movement animation, the IO logo shape change animation, and the IO logo color change animation.

[0342] Among them, the triggering condition for the circular handle and IO logo to execute the moving animation and the IO logo's shape transformation animation is the actionMove event.

[0343] When the finger slides on the screen, the actionMove event is captured, triggering the redrawing of the circular handle and the IO logo. Among them, according to the position of the center point of the circular handle in the background track, a rounded rectangle is drawn as the IO logo. As the position of the circular handle changes, the bounds of the rounded rectangle are redrawn multiple times, the width of the rounded rectangle gradually changes, and the shape of the IO logo gradually changes from "O" to "I", or from "I" to "O".

[0344] Among them, the trigger condition for the color change effect of the IO logo is that the circular handle slides to the midpoint of the background track. Exemplarily, the variable mThumbPosition is used to represent the position of the circular handle in the background track. Among them, when mThumbPosition = 0.5, the circular handle is located at the midpoint of the background track. That is, "mThumbPosition = 0.5" is the trigger condition for the color change effect of the IO logo. Then, the color change effect of the IO logo presents a gradient effect following the hand.

[0345] S410, the switch control module provides dynamic effect instructions to the background track.

[0346] Among them, the trigger condition for the background track to execute the color change animation is that the circular handle slides to the midpoint of the background track, or the state of the switch control changes (for example, switching from the on state to the off state, or from the off state to the on state).

[0347] This embodiment does not limit the execution order of S409 and S410.

[0348] S411, the circular handle and IO logo perform hand-following movement effects, as well as the IO logo's shape transformation effects.

[0349] When the finger leaves the switch control on the screen, the actionUp event is captured, triggering the redrawing of the circular handle and the IO logo. Among them, according to the position of the center point of the circular handle in the background track, a rounded rectangle is drawn as the IO logo. As the position of the circular handle changes, the bounds of the rounded rectangle are redrawn multiple times, the width of the rounded rectangle gradually changes, and the shape of the IO logo gradually changes from "O" to "I", or from "I" to "O".

[0350] S412, the circular handle and IO logo execute the color change effect of the IO logo.

[0351] S413, the background track performs color change animation.

[0352] In one embodiment, the state_checked value of the switch control is used to indicate whether the state of the switch control has changed. Exemplarily, when the state_checked of the switch control is TRUE, the state of the switch control has changed; when the state_checked of the switch control is FALSE, the state of the switch control has not changed. Therefore, "state_checked is TRUE" is the trigger condition for the color change effect of the IO logo and the background track.

[0353] Correspondingly, when the state_checked of the switch control is TURE, the switch control module respectively provides animation instructions to the circular handle, IO logo and background track, so that the circular handle and IO logo execute the color change animation of the IO logo, and the background track executes the color change animation.

[0354] Since the switch control module can provide adapter interfaces corresponding to different theme scenes (such as light theme, dark theme, immersive theme, etc.), it can display the display effects corresponding to different theme scenes. Moreover, the color gradient strategy is different depending on the current state of the switch control. Therefore, the indication of the color change animation effect can also include a color gradient strategy that matches the theme.

[0355] In one embodiment, the state_enabled value of the switch control is used to indicate the current state of the switch control. Exemplarily, when the state_enabled of the switch control is TRUE, the current state of the switch control is the on state, and the color gradient strategy is to gradually change from color #256FFF (or the hue of the control when it is activated in the Android system) to color #E5E5E5. Correspondingly, when the state_enabled of the switch control is FALSE, the current state of the switch control is the off state, and the color gradient strategy is to gradually change from color #E5E5E5 to color #256FFF (or the hue of the control when it is activated in the Android system).

[0356] In an optional implementation, the color change effect can be replaced by a color and transparency change effect. Correspondingly, the color gradient strategy can be replaced by a color and transparency gradient strategy, which includes a color gradient scheme and a transparency gradient scheme, which will not be described in detail here.

[0357] Among them, S312 and S313 are executed synchronously.

[0358] S414, the switch control module captures the actionUp event.

[0359] S415, the switch control module provides dynamic effect instructions to the circular handle and IO logo.

[0360] When the switch control module captures the actionUp event, it instructs the circular handle and IO logo to perform the zoom-in animation.

[0361] S416, the circular handle and IO logo have an enlarged animation.

[0362] Among them, the amplification effect can be achieved by redrawing.

[0363] When a finger presses or touches the switch control on the screen, the actionUp event is captured, triggering the redrawing of the circular handle and the IO logo. When the circular handle and the IO logo are redrawn, the range (bounds) of the circular handle and the IO logo is increased, so that the circular handle and the IO logo are visually enlarged to achieve an animation effect.

[0364] For details not explained in this process, please refer to the aforementioned embodiments and will not be described again here.

[0365] Reference Fig.17 In the display method of the switch control provided in the embodiment of the present application, the processing flow of the switch control module specifically includes:

[0366] S501: The switch control module receives a finger touch event.

[0367] The switch control module executes the onTouchEvent() method to capture user operation events.

[0368] If the switch control module captures a finger touch event of the user on the switch control, the following processing flow is executed.

[0369] S502, the switch control module draws a shrinking dynamic effect of the circular handle and the IO logo.

[0370] Among them, the shrinking effect of the circular handle and IO logo can be achieved by redrawing the bouns of the circular handle and IO logo.

[0371] S503, the switch control module determines whether a finger drag event is received, if not, executes S504, and if so, executes S512.

[0372] S504, the switch control module determines whether a finger release event is received, if not, executes S503, and if so, executes S505.

[0373] S505, the switch control module determines whether the finger pressing or touching time is less than the threshold, if so, execute S506, if not, execute S511.

[0374] If the finger touch duration is less than the threshold, it can be understood that the user touch operation is a click operation, and the following click operation triggers the switch control state switching process. If the finger touch duration is not less than the threshold, it can be understood that the user touch operation is a long press operation. At this time, the switch control state switching process is not triggered, and the enlargement animation effect of drawing the circular handle and IO logo is directly executed, and the process ends.

[0375] S506, the switch control module draws the moving effects of the circular handle and the IO logo, as well as the shape transformation effects of the IO logo.

[0376] S507, the switch control module determines whether the circular handle moves to the first preset position, if so, executes S508, if not, executes S507.

[0377] The first preset position refers to the middle position of the background track.

[0378] S508, the switch control module draws the color change effect of the IO logo and the background track.

[0379] When the circular handle slides to the middle position of the background track, the color change effect of the IO logo and the background track is triggered.

[0380] Among them, S508 can be adjusted as follows: the switch control module draws the color and transparency change effects of the IO logo and the background track.

[0381] S509, the switch control module determines whether the circular handle moves to the third preset position, if so, executes S510, if not, executes S509.

[0382] The third preset position may be understood as the left boundary or the right boundary of the background track.

[0383] It should be noted that before the switch control module determines whether the circular handle has moved to the third preset position, it is necessary to first obtain whether the initial state of the switch control is on or off, and determine whether the circular handle has moved to the third preset position based on the initial state of the switch control.

[0384] When the initial state of the switch control is the on state, the switch control module determines whether the circular handle moves to the right boundary of the background track; when the initial state of the switch control is the off state, the switch control module determines whether the circular handle moves to the left boundary of the background track.

[0385] S510, the switch control module draws the rebound effect of the circular handle and the IO logo.

[0386] S511, the switch control module draws the enlarged dynamic effect of the circular handle and the IO logo.

[0387] At this point, the process of triggering the switch control state switching by clicking operation ends.

[0388] This embodiment does not limit the order of S510 and S511.

[0389] S512, the switch control module draws the hand-following movement effect of the circular handle and the IO logo, as well as the shape transformation effect of the IO logo.

[0390] S513, the switch control module determines whether a finger release event is received, if so, executes S516, if not, executes S514.

[0391] S514, the switch control module determines whether the circular handle moves to the first preset position, if so, executes S515, if not, executes S512.

[0392] The first preset position refers to the middle position of the background track.

[0393] S515, the switch control module draws the color change effect of the IO logo and the background track, and returns to execute S512.

[0394] When the circular handle slides to the middle of the background track, the color change effect of the IO logo and the background track is triggered. Then, the color change effect of the IO logo and the background track shows the hand-following state.

[0395] S516, the switch control module determines whether the circular handle moves to the second preset position, if so, executes S511, if not, executes S517.

[0396] The second preset position refers to the left end or the right end of the sliding area of ​​the background track.

[0397] S517, the switch control module draws the dynamic effect of the circular handle and the IO logo moving to the second preset position, as well as the dynamic effect of the shape transformation of the IO logo, and executes S511.

[0398] The second preset position in S517 is consistent with the second preset position in S516.

[0399] When the circular handle has not moved to the left or right end of the sliding area of ​​the background track, the switch control module needs to determine whether to move the circular handle to the left or right end of the sliding area of ​​the background track.

[0400] In an optional implementation, the switch control module first obtains the current position of the circular handle in the switch control, and then determines whether to move the circular handle to the left end of the sliding area of ​​the background track or to the right end of the sliding area of ​​the background track according to the current position.

[0401] If the current position of the circular handle in the switch control is between the left end of the sliding area and the midpoint of the sliding area, the switch control module draws the circular handle and the IO logo moving to the left end of the sliding area of ​​the background track, as well as the shape transformation effect of the IO logo.

[0402] If the current position of the circular handle in the switch control is between the right end of the sliding area and the midpoint of the sliding area, the switch control module draws the circular handle and the IO logo moving to the right end of the sliding area of ​​the background track, as well as the shape transformation effect of the IO logo.

[0403] In another optional implementation, the switch control module first obtains whether the initial state of the switch control is on or off, and determines whether to move the circular handle to the left end of the sliding area of ​​the background track or to the right end of the sliding area of ​​the background track according to the initial state of the switch control.

[0404] When the initial state of the switch control is the on state, the switch control module draws the circular handle and the IO logo moving to the left end of the sliding area of ​​the background track, and the IO logo changes shape. When the initial state of the switch control is the off state, the switch control module draws the circular handle and the IO logo moving to the right end of the sliding area of ​​the background track, and the IO logo changes shape.

[0405] If the circular handle does not slide to the left or right end of the sliding area of ​​the background track when the user releases the hand, the switch control module draws the circular handle and the IO logo moving to the second preset position, and the IO logo shape change effect, until the circular handle slides to the left or right end of the sliding area of ​​the background track. Then, the switch control module draws the circular handle and the IO logo enlargement effect. At this point, the process of triggering the switch control state switching by pressing or touching the sliding operation ends.

[0406] Among them, S517 can also be adjusted as follows: the switch control module draws the dynamic effect of the circular handle and the IO logo moving and rebounding to the second preset position, as well as the dynamic effect of the shape transformation of the IO logo, and executes S511.

[0407] For details not explained in detail in this process, please refer to the aforementioned embodiments and will not be repeated here.

[0408] Fig.18a An example of an application scenario is shown. Fig.18a As shown, the display state of the switch control of the function "large mouse pointer" is on. When the user clicks the switch control of the function "large mouse pointer", the display state of the switch control of the function "large mouse pointer" is switched to off. The animation effect of the switch control state switching triggered by the click operation can be seen above and will not be repeated here.

[0409] Fig.18b An example of an application scenario is shown. Fig.18b As shown, the display state of the switch control of the function "large mouse pointer" is on. When the user presses and slides the switch control of the function "large mouse pointer" or touches and slides the switch control of the function "large mouse pointer", the display state of the switch control of the function "large mouse pointer" is switched to off. The animation effect of the switch control state switching triggered by the press-slide operation or the touch-slide operation can be referred to above and will not be repeated here.

[0410] Fig.19 An example application scenario is shown. In this application scenario, the hot zone of the switch control is larger than the display area of ​​the switch control and includes a text description area corresponding to the switch control. Fig.19 As shown in (1), the hot zone of the switch control is shown as area 1901, which includes a text description area corresponding to the switch control. If the user clicks in the text area "large mouse pointer" corresponding to the switch control, the state switching of the switch control function "large mouse pointer" can also be triggered. Fig.19As shown in (2), the hot area of ​​the switch control is shown as area 1901, which includes a text description area corresponding to the switch control. Then, when the user performs a pressing and sliding operation or a touching and sliding operation in the text area "large mouse pointer" corresponding to the switch control, the state switching of the switch control of the function "large mouse pointer" can also be triggered. For the animation effect of the state switching of the switch control, please refer to the above, which will not be repeated here.

[0411] This embodiment also provides a computer storage medium, in which computer instructions are stored. When the computer instructions are executed on an electronic device, the electronic device executes the above-mentioned related method steps to implement the display method of the switch control in the above-mentioned embodiment.

[0412] This embodiment further provides a computer program product. When the computer program product is run on a computer, the computer is enabled to execute the above-mentioned related steps to implement the display method of the switch control in the above-mentioned embodiment.

[0413] In addition, an embodiment of the present application also provides a device, which can specifically be a chip, a component or a module, and the device may include a connected processor and a memory; wherein the memory is used to store computer execution instructions, and when the device is running, the processor can execute the computer execution instructions stored in the memory so that the chip executes the display method of the switch control in the above-mentioned method embodiments.

[0414] Among them, the electronic device (such as a mobile phone, etc.), computer storage medium, computer program product or chip provided in this embodiment is used to execute the corresponding method provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects in the corresponding method provided above, and will not be repeated here.

[0415] Through the description of the above implementation methods, technical personnel in the relevant field can understand that for the convenience and simplicity of description, only the division of the above-mentioned functional modules is used as an example. In actual applications, the above-mentioned functions can be assigned to different functional modules as needed, that is, the internal structure of the device can be divided into different functional modules to complete all or part of the functions described above.

[0416] In the several embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic, for example, the division of modules or units is only a logical function division, and there may be other division methods in actual implementation, such as multiple units or components can be combined or integrated into another device, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0417] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the aforementioned embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the aforementioned embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not cause the essence of the corresponding technical solutions to deviate from the scope of the technical solutions of the embodiments of the present application.

Claims

1. A display method for a switch control, characterized in that: Applied in an electronic device, the switch control comprises a track and a first icon, a second icon is displayed on the first icon; when the first icon is located at a first position in the track, the switch control is in an on state or a off state; When the first icon is located at the second position in the track, the switch control is correspondingly in a closed state or an open state; The method comprises: In response to the operation of sliding the first icon from the first position to a third position in the track, the shape of the second icon changes from the first shape to the second shape; wherein the third position is any position between the first position and the second position; In response to an operation of stopping the first icon at the third position, the second icon maintains the second shape unchanged; In response to an operation of sliding the first icon from the third position to the second position, the shape of the second icon changes from the second shape to a third shape; The first shape, the second shape and the third shape are different.

2. The method according to claim 1, characterized in that The first shape, the second shape and the third shape have the same height, and the first shape, the second shape and the third shape have widths that increase or decrease in sequence.

3. The method according to claim 1, characterized in that: When the first icon is located at the first position, the color of the track and the second icon is a first color; When the first icon is located at the second position, the color of the track and the second icon is a second color; The method further comprises: In response to an operation of sliding the first icon from the fourth position to the first position, the color of the track and the second icon gradually changes from the second color to the first color; In response to an operation of sliding the first icon from the fourth position to the second position, the color of the track and the second icon gradually changes from the first color to the second color; The fourth position is a midpoint between the first position and the second position.

4. The method according to claim 1, characterized in that When the switch control is in the off state, the shape of the second icon is a circle; when the switch control is in the on state, the shape of the second icon is a rounded rectangle.

5. The method according to claim 1, characterized in that The center points of the first icon and the second icon coincide with each other.

6. The method according to claim 2, characterized in that The width of the second icon is determined according to the sliding offset of the first icon.

7. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: In response to a click operation on the switch control, the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position.

8. The method according to claim 7, characterized in that In response to a click operation on the switch control, the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position, comprising: In response to a touch operation on the switch control, reducing the sizes of the first icon and the second icon; In response to the touch operation being cancelled, the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position, and the sizes of the first icon and the second icon are enlarged and restored.

9. The method according to claim 7, characterized in that: The first icon slides from the first position to the second position, including: After the first icon slides from the first position to the boundary of the track along the first direction, the first icon slides to the second position along the second direction; The first icon slides from the second position to the first position, including: After the first icon slides from the second position to the boundary of the track along the second direction, the first icon slides along the first direction to the first position; The first direction is a direction from the first position to the second position, and the second direction is a direction from the second position to the first position.

10. The method according to claim 9, characterized in that The key frame curve of the first icon sliding animation is a displacement change curve of over-damped vibration.

11. The method according to claim 7, characterized in that In response to a click operation on the switch control, the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position, comprising: In response to a click operation on the hot zone of the switch control, the first icon slides from the first position to the second position, or the first icon slides from the second position to the first position; The hot zone size of the switch control is larger than the size of the switch control, and the hot zone area of ​​the switch control includes or partially includes a text description area corresponding to the switch control.

12. The method according to any one of claims 1 to 6, characterized in that: The method further comprises: In response to a sliding operation in the switch control, the first icon slides in the track according to an operation offset; In response to the sliding operation stopping, the first icon stops sliding; In response to the sliding operation being canceled, the first icon moves to the first position or the second position.

13. The method according to claim 12, characterized in that In response to a sliding operation in the switch control, the first icon slides in the track according to an operation offset, including: In response to a touch operation on the switch control, reducing the sizes of the first icon and the second icon; In response to a sliding operation in the switch control, the first icon slides in the track according to an operation offset; In response to the sliding operation being canceled, the first icon moves to the first position or the second position, including: In response to the sliding operation being canceled, the first icon moves to the first position or the second position, and the sizes of the first icon and the second icon are enlarged and restored.

14. The method according to claim 12, characterized in that In response to the sliding operation being canceled, the first icon moves to the first position or the second position, including: In response to the sliding operation being canceled, obtaining a current position of the first icon in the track; When the current position is the first position or the second position, the first icon stops sliding; When the current position is between the first position and the fourth position, the first icon moves from the current position to the first position; When the current position is between the second position and the fourth position, the first icon moves from the current position to the second position; wherein the fourth position is the midpoint between the first position and the second position.

15. The method according to claim 14, characterized in that The first icon moves from the current position to the first position, including: After the first icon slides from the current position to the boundary of the track along the second direction, the first icon slides along the first direction to the first position; The first icon moves from the current position to the second position, including: After the first icon slides from the current position to the boundary of the track along the first direction, the first icon slides to the second position along the second direction; The first direction is a direction from the first position to the second position, and the second direction is a direction from the second position to the first position.

16. The method according to claim 14, characterized in that The key frame curve of the first icon sliding animation is a displacement change curve of over-damped vibration; wherein, the first icon sliding animation is an animation of the first icon moving from the current position to the first position or the second position.

17. The method according to claim 12, characterized in that In response to a sliding operation in the switch control, the first icon slides in the track according to an operation offset, including: In response to a sliding operation in the hot zone of the switch control, the first icon slides in the track according to an operation offset; The hot zone size of the switch control is larger than the size of the switch control, and the hot zone area of ​​the switch control includes or partially includes a text description area corresponding to the switch control.

18. The method according to claim 1, characterized in that The display color and / or transparency of the switch control matches the display mode of the electronic device.

19. An electronic device, characterized in that: include: one or more processors; Memory; And one or more computer programs, wherein the one or more computer programs are stored in the memory, and when the computer programs are executed by the one or more processors, the electronic device executes the display method of the switch control as described in any one of claims 1-18.

20. A computer-readable storage medium comprising a computer program, characterized in that: When the computer program is executed on an electronic device, the electronic device executes the method for displaying a switch control according to any one of claims 1 to 18.

Images