TWI512597B - Method and electric apparatus for displaying data value - Google Patents

Description

Data numerical display method and electronic device

The invention describes a method and an electronic device for displaying data values, in particular a display method and an electronic device capable of presenting a single data value.

With the rapid development of technology, the types and functions of portable electronic devices are increasing. Devices such as smartphones, pedometers, sphygmomanometers, and even heartbeat monitors can be carried and used by users at any time. The user can obtain and record the data value to be counted from the display interface by wearing the corresponding portable electronic device. For example, a user who needs blood pressure monitoring can measure the change of blood pressure at any time by wearing a portable electronic device with a blood pressure measurement function. To obtain the statistical results of daily blood pressure changes within a month, simply use the calculation module in the portable electronic device to obtain the corresponding display curve or graph by using the statistical blood pressure data. By browsing the display curves or graphs corresponding to these statistics, users can quickly understand and compare the proportions, importance, and achievement rates of these data. For example, when the user wants to view the amount of exercise counted on the pedometer for one week, the pedometer will display the amount of exercise for one week in days using a pie chart (thus there are seven fan-shaped areas, each The fan-shaped area indicates the amount of exercise per day. The user can easily understand which day's amount of exercise is insufficient by observing the information of the area of each sector corresponding to the pie chart.

Most portable electronic devices display a pie chart or a bar chart when displaying complex ratio statistics. However, when the portable electronic device displays a single ratio of statistics, only the bar graph display is used, and even the data value is directly displayed. Therefore, when the portable electronic device displays a single ratio of statistics, the user cannot directly understand the importance of the data by the graphic or The rate of achievement, especially for younger and younger users. Therefore, it is very important to design an intuitive single data display method on a portable electronic device.

The present invention provides a method of displaying a data value suitable for displaying an image animation in which a first percentage is gradually changed to a second percentage, comprising providing a first layer having a first pattern. A second layer having a second pattern is provided and the second layer is overlaid on the first layer. Providing a third layer having a third pattern and superposing the third layer on the second layer, wherein an area of the third pattern is smaller than an area of the second pattern. The value of the first percentage is gradually changed to the value of the second percentage at a rate and displayed on the third pattern. Gradually reducing the area of the second pattern of the second layer according to the rate to gradually reveal the first pattern of the first layer until the area of the first pattern is exposed relative to the area of the second pattern Should be the second percentage.

The invention further provides an electronic device for displaying the data value according to the above method, which is suitable for displaying an image animation in which a first percentage is gradually changed to a second percentage. The electronic device includes a storage unit, a processor, and a display screen. The storage unit is configured to store a first layer having a first pattern, a second layer having a second pattern, and a third layer having a third pattern, the area of the third pattern being smaller than an area of the second pattern. The processor is coupled to the storage unit, and the processor sequentially stacks the first layer, the second layer, and the third layer, and the processor gradually changes the value of the first percentage to the first a value of two percentages is displayed on the third pattern of the third layer, and the area of the second pattern of the second layer is gradually reduced according to the rate to gradually reveal the first layer of the first layer a pattern until the area of the first pattern exposed corresponds to a second percentage of the area of the second pattern to obtain an image animation. The display screen is coupled to the processor for displaying the image animation.

The method for displaying data values of the present invention presents various types of single statistical data through a clear and easy-to-understand visual manner, so that users of all ages can understand the data values in a short time. Count the status and increase the interest in browsing the data values.

100‧‧‧ display graphics

L1‧‧‧ first layer

L2‧‧‧ second layer

L3‧‧‧ third layer

L4‧‧‧ fourth layer

M‧‧‧ intermediate layer

11‧‧‧Reduced area

12‧‧‧Display area

10‧‧‧Value display area

P‧‧‧ Center

O‧‧‧Heart spindle

G1‧‧‧ first pattern

G2‧‧‧ second pattern

G3‧‧‧ third pattern

G _M ‧‧‧ pattern

A1‧‧‧ animation

300‧‧‧Electronic devices

31‧‧‧ Input unit

32‧‧‧ body

33‧‧‧ data receiving device

34‧‧‧ Display screen

35‧‧‧Sensor components

36‧‧‧ data transmitting device

37‧‧‧ Processor

38‧‧‧ storage unit

1 is an external view of an electronic device for displaying data values in accordance with a method of an embodiment of the present invention.

Fig. 2 is a block diagram showing the components of the electronic device shown in Fig. 1.

FIG. 3 is a schematic diagram showing the structure of a layer of a display graphic corresponding to the method for displaying data in the present invention.

Figure 4 is a front elevational view of the display graphic of Figure 3.

Referring to FIG. 1 and FIG. 2, FIG. 1 is an electronic device 300 for displaying data values according to a method of an embodiment of the present invention, and FIG. 2 is a block diagram of an electronic device 300 of FIG. The electronic device 300 is used to display data values. The electronic device 300 can be a portable electronic device or a non-portable electronic device. The electronic device 300 can include a sensing component 35 and a fuselage 32. The sensing component 35 is configured to sense a specific action (such as heartbeat, blood pressure, footsteps, etc.) to generate a data value and issue a data signal corresponding to the data value. Taking the heartbeat as an example, the sensing component 35 can be a sensing wafer on a pedometer wristband, a sensing wafer in a sphygmomanometer, an inductive wafer on a heartbeat monitor, and the like. The sensing element 35 transmits the measured data value to the body 32 of the electronic device 300 through the data transmitting device 36 in a wired or wireless manner. The body 32 of the electronic device 300 includes a display screen 34, an input unit 31, a storage unit 38, a data receiving device 33, and a processor 37. The display screen 34 is disposed on one side of the body 32 for displaying data values and corresponding image animations. The input unit 31 is configured to set display parameters required for each layer and pattern when the display screen 34 displays the data value. In another embodiment, the input unit 31 can also be integrated with the display screen 34 to form a touch screen. The user can click or set any parameter directly on the touch screen to make the entire input mode more convenient. The data receiving device 33 is for receiving the data signal sent by the data transmitting device 36. The processor 37 is coupled to the display screen 34, the data receiving device 33, the input unit 31, and the storage unit 38, and is configured to control the operation of the display screen 34 to display the data values. more Further, the processor 37 can store the data value in the storage unit 38 and display it on the display screen 34 according to the data signal received by the data receiving device 33 and the display parameters set by the input unit 31. In the present embodiment, the sensing element 35 is separated from the body 32, but the invention is not limited thereto. In other words, in the other embodiments of the present invention, the electronic device 300 does not need to include the data receiving device 33 and the data transmitting device 36, and the sensing component 35 is integrated in the body 32 and coupled to the processor 37.

Here, an example is used to illustrate the operational flow of the electronic device 300. Suppose there is a user who wants to measure the heartbeat during exercise while jogging. First, the user carries the body 32 of the electronic device 300 (here, the electronic device 300 is assumed to be a portable device), and the sensing element 35 for measuring the heartbeat during exercise is placed near the pulse on the wrist (in various ways, for example A patch or a sports bracelet is used, and a link between the data transmitting device 36 and the data receiving device 33 is set. The user continues to set, by the input unit 31, various display parameters required for each layer and each pattern when the screen 34 displays the data value. When the user starts to move, the sensing element 35 will sense the heartbeat value of the user and transmit the heartbeat value through the data transmitting device 36. Since the data transmitting device 36 and the data receiving device 33 have been connected by setting, the heartbeat value transmitted by the data transmitting device 36 will be received by the data receiving device 33 and transmitted to the processor 37 inside the body 32. When the processor 37 receives the heartbeat value, the heartbeat value is displayed through the display screen 34 on the body 32 according to the display parameter previously set by the user through the input unit 31. Therefore, the user can monitor the heartbeat at any time during the exercise by displaying the heartbeat value displayed on the screen 34. The processor 37 displays the value of the data to be observed by the user on the display screen 34 by means of patterns, animations and numerical values, and the method of displaying the data by the processor 37 will be described in detail in the following paragraph.

Please refer to Figure 3. FIG. 3 is a schematic diagram showing the structure of a display graphic 100 corresponding to the method for displaying data numerical values according to an embodiment of the present invention. Specifically, the display graphic 100 in this embodiment can be applied to a display interface of a portable electronic device or a non-portable electronic device. For example, a personal computer has a hypertext markup language (HTML) support interface, or any portable audio that supports HTML or a literal translation language (such as JavaScript). Sub-device interface and so on. The structure of the display graphic 100 has at least three layers, including a first layer L1, a second layer L2, and a third layer L3, and each layer layer carries a pattern selectable by a user, and is further displayed by an electronic device. (As shown in the display screen 34 of the above embodiment) is presented. In this embodiment, the display graphic 100 further includes a fourth layer L4, which carries an animation that can be selected by the user.

In detail, the first layer G1 carries the first pattern G1, the second layer L2 carries the second pattern G2, the third layer L3 carries the third pattern G3, and the fourth layer L4 carries the animation A1. The four layers are sequentially overlapped, that is, the second layer L2 is overlaid on the first layer L1, the third layer L3 is overlaid on the second layer L2, and the fourth layer L4 is overlaid on the third layer L3. The size of the pattern area carried in each layer layer may follow the following rule. The area of the first pattern G1 carried on the first layer L1 is initially set to be the same as the area of the second pattern G2 carried on the second layer L2, and the third layer is The area of the third pattern G3 carried on L3 is smaller than the area of the second pattern G2 carried on the second layer L2 (in the present embodiment, the area of the second pattern G2 carried on the second layer L2 will follow The time varies, and the change will be described in detail in the following paragraph.) The area of the animation A1 carried on the fourth layer L4 is smaller than the area of the third pattern G3 carried on the third layer L3. In this embodiment, except for the animation A1, the first pattern G1, the second pattern G2, and the third pattern G3 are all circular patterns and have a common center, but the invention is not limited thereto. For example, the first pattern G1, the second pattern G2, and the third pattern G3 may be polygonal types having the same center of gravity.

Although the display pattern 100 of the present embodiment is described as a four-layer layer structure, the present invention is not limited thereto. For example, in other embodiments, the intermediate layer M as shown in FIG. 3 may be added to the display pattern 100, and the intermediate layer M is located between the second layer L2 and the third layer L3 and on the intermediate layer M. The area of the loaded pattern G _M is between the area of the second pattern G2 carried on the second layer L2 and the area of the third pattern G3 carried on the third layer L3. When the display graphic 100 is viewed by the user in the front view direction, the pattern G _{M carried} on the intermediate layer _M can be used to display the effect of the outer boundary of the third pattern G3 carried on the third layer L3.

Please refer to FIG. 3 again. In this embodiment, the first pattern G1 and the second pattern G2 are And the third pattern G3 overlaps each other according to a common central axis O. Since the first pattern G1, the second pattern G2, and the third pattern G3 are all circular and the area size follows the foregoing rules, the radius of the first pattern G1 may be equal to the initial radius of the second pattern G2, and the radius of the third pattern G3 is smaller than The initial radius of the second pattern G2 is as shown in FIG. The animation A1 carried in the fourth layer L4 can be a dynamic image interchange format (GIF). The purpose of using the animation A1 is not only to dynamically display the status of its data values, but also to increase the user's interest in browsing the display graphic 100.

The steps of how the display graphic 100 of the present embodiment displays data values will be described in detail below. Here, an example is used to describe the initial setting of the display data 100 to display the data value. It is assumed that the user wants the display graphic 100 to display the data of the running mileage. First, the electronic device may preset a first percentage corresponding to the running mileage value or allow the user to input the first percentage by using the input unit 31 on the electronic device. For example, if the user wants to start from the starting mileage of 0 km, the first predetermined percentage can be set to 0% to correspond to 0 km of the starting point.

In addition, the electronic device may be designed to allow a user to select, through the input unit 31, a pattern used for at least one layer of the first layer L1, the second layer L2, the third layer L3, and the fourth layer L4 used in the display graphic 100 or Animation, and the user can select a built-in pattern or animation (for example, the first pattern G1 built in the first layer L1 is a monochrome gradient pattern), or the custom graphic to be displayed and The animation is carried in the first layer L1 to the fourth layer L4. In addition, the patterns and animations used in the first layer L1, the second layer L2, the third layer L3, and the fourth layer L4 may be directly set in the electronic device without allowing the user to change. That is, the patterns, animations, and area parameters used by the first layer L1, the second layer L2, the third layer L3, and the fourth layer L4 are stored in the storage unit 38. When the above settings are completed, the electronic device can be turned on and the display graphic 100 can be used to display the running data value on the display screen 34 of the electronic device. At this time, the electronic device gradually changes the first percentage described above to a second percentage at a preset rate such that the area of the second pattern G2 within the display pattern 100 is reduced with a preset angular velocity. Here, the second percentage is defined in this embodiment as the percentage of the data currently counted by the user corresponding to the target data. ratio. For the above example of running mileage, if the user sets the target mileage to 10 kilometers and the user has ran 3 kilometers and the first percentage is set to 0%, the current 3 kilometers mileage data corresponds to The target mileage is 30% for 10 kilometers. The above 30% value is the second percentage value in this embodiment. When the user turns on the display graphic 100, the electronic device corresponding to the display graphic 100 will have the first percentage (0%) at a preset rate (for example, a percentage per hundredth of a second (1%/10ms)). Gradually change to the second percentage (30%). In the process of gradually changing the first percentage (0%) to the second percentage (30%), since the second pattern G2 is a circular pattern and the circumferential angle is 360 degrees, it corresponds to the second percentage. The fan-shaped angle of the (30%) circular area is 108 degrees, and the second pattern G2 in this embodiment gradually disappears by 108 degrees in the clockwise direction with time, and the remaining area is 252. The fan area of the angle. In other words, the area of the second pattern G2 is reduced with a preset angular velocity (for example, three-six degrees (3.6°/10 ms) every 10 ms). In addition, since the first pattern G1 and the second pattern G2 are equal in size and the second pattern G2 is overlaid on the first pattern G1, when the display pattern 100 is used at the beginning, the first pattern G1 is completely covered by the second pattern G2. Cover and cover. However, as the second pattern G2 gradually disappears from the 108-degree sector area (corresponding to the reduced area 11 in FIG. 3), the first pattern G1 will gradually expose the corresponding 108-degree sector area at the above-mentioned preset angular velocity (corresponding to The visualization area 12) in Fig. 3). However, when the user ran for 5 kilometers, the second percentage will increase to 50%, so in the process of changing the first percentage (0%) to the second percentage (50%), the second The area where the pattern G2 disappears will increase to a sector area of 180 degrees, while the first pattern G1 will gradually reveal a corresponding 180 degree sector area, and so on. When the user runs to 10 kilometers of the target mileage, the second percentage will increase to 100%, so the second pattern G2 will disappear completely, and the first pattern G1 will be fully revealed.

Continuing to refer to FIG. 3, on the third layer L3 of the display graphic 100, there is a numerical display area 10 for displaying a numerical change process in which the first percentage is changed to the second percentage. For the above example applied to running mileage, when the user runs from 0 km to 4 km and turns on the use display graphic 100, the numerical display area 10 will gradually change the display first percentage (0%) to the second. Percentage change (40%); when the user runs from 0 km to When 9 km and the display graphic 100 is turned on, the numerical display area 10 will display a numerical change process in which the first percentage (0%) is gradually changed to the second percentage (90%); however, when the user is 0 km When running to 15 km and opening the display graphic 100, although the mileage value of 15 km has exceeded 10 km of the predetermined target mileage, the second percentage will still represent 150% of the value according to the previous definition, and the numerical display area 10 will A numerical change process in which the first percentage (0%) is gradually changed to the second percentage (150%) is displayed. Here, the numerical display area 10 is a change process for displaying the first percentage to the second percentage. When the second percentage displayed by the numerical display area 10 is 100%, the second pattern G2 in the display pattern 100 will completely disappear, and the numerical display area 10 finally shows a second percentage exceeding 100%. The value, and the second pattern G2 will be reset and the above steps are repeated. In other words, if the value display area 10 finally displays a value of 150% of the second percentage, the second pattern G2 will undergo a process of complete disappearance during the change (ie, the first percentage is changed from 0% to 100%), but the final state will be like the second percentage of 50% (that is, the first percentage change from 100% to 150% is equivalent to the first percentage changed from 0% to 50% effect), only the fan-shaped area of 180 degrees will disappear. Therefore, when the second percentage displayed last in the numerical display area 10 is 250%, 350%, 450%, the area where the second pattern G2 disappears is the same. In the above embodiment, the second pattern G2 disappears when the second percentage is 100% through the system setting. However, in other embodiments of the present invention, the user can also customize the disappearance of the second pattern G2. Condition and speed, for example, the second pattern G2 can be set to disappear after the second percentage is 200%, and the speed at which it disappears is only a predetermined half.

Here, after the first layer L1, the second layer L2, the third layer L3, and the fourth layer L4 are sequentially stacked in the display pattern 100, and after the first percentage and the second percentage are obtained, a numerical value change process in which the first percentage is changed to the second percentage is displayed in the numerical value display area 10, and a process in which the second pattern G2 gradually disappears with time to produce an animated effect, which is actually transmitted through the foregoing The processor 37 in the electronic device 300 is processed in the embodiment.

Referring to FIG. 3, the fourth layer L4 of the graphic 100 is displayed with an animation A1 for supporting still images and moving images. When the statistical value of the data does not reach the target value For the corresponding percentage (the percentage of the target value specified by the system is 100%, which can also be customized by the user), the animation A1 displays the motion picture. Conversely, when the data statistics have reached the percentage corresponding to the target value, the animation A1 displays a still image. For the above example of running mileage, if the target mileage is 10 kilometers, and the percentage corresponding to 10 kilometers is 100%, and the user starts from 0 km (corresponding to the first percentage of 0%), and The display graphic 100 is turned on when running to 4 kilometers (corresponding to a second percentage of 40%). At this time, since the second percentage (40%) is less than 100%, the current mileage value of the user does not reach the target mileage of 10 kilometers, so the animation in the display graphic 100 is displayed as a moving image. However, if the user runs above 10 km, the corresponding value of the second percentage will be above 100%, so the animation in the display graphic 100 will be displayed as a still image. Therefore, when the user sees the animation A1, it can immediately understand that the current running mileage is insufficient. If you see that the animation A1 is a still image, it means that the user's current running mileage has reached the target mileage. If you see that the animation A1 is a motion picture, it means that the user's current running mileage has not reached the target mileage.

In this embodiment, the first percentage is less than the second percentage, and the change of the data value displayed by the numerical value display area 10 and the change process of the second pattern G2 reduction are changed according to the first percentage to the second The percentage process. However, the invention is not limited thereto. In other embodiments, the first percentage can be a value greater than the second percentage. For example, in an application that displays running miles, the user sets the first percentage of the starting point to 100%. If the target mileage is 10 kilometers, when running 7 kilometers, the corresponding second percentage is 30%. When the user browses the numerical display area 10 in the display graphic 100, the last value seen is 30%, and the progress of the running mileage is 30%. In this case, the second pattern G2 will gradually disappear by 252 degrees in a clockwise or counterclockwise direction (corresponding to a circumferential angle of 360 degrees, and 252 degrees is an angle of 70%). In other words, the second pattern G2 will decrease from the first percentage (100%) to the second percentage (30%), with the initial circular pattern in the clockwise or counterclockwise direction along with the preset angular velocity. (For example, every 6,000 degrees (3.6 °/10 ms) every 10ms) gradually reduces the fan area of 252 degrees, leaving a sector area of 108 degrees. The user can view the last remaining area of the second pattern G2, that is, how much progress is left in the running mileage.

Please refer to Figure 4. 4 is a front view showing the graphic 100. Compared to the layer structure of FIG. 3, the front view of the display graphic 100 is in the form of two concentric circles. However, if the intermediate layer M is considered, it is three concentric. Round pattern. The numerical display area 10 and the animation A1 are provided near the middle portion. The sector area in which the second pattern G2 disappears (ie, the area of the reduced area 11 in FIGS. 3 and 4) is equal to the sector area in which the first pattern G1 is exposed (ie, the area of the display area 12 in FIGS. 3 and 4). The area), the area of the third pattern G3 is smaller than the area of the second pattern G2 and the third pattern G3 is overlaid on the second pattern G2, so the development area 12 in FIG. 4 will be partially covered by the third pattern G3. area. When the user views the display graphic 100, the messages of the animation A1, the numerical display area 10, and the presentation area 12 are simultaneously seen. By displaying the static or moving image through the animation A1, the user can immediately determine whether the current data value has reached the target data value. By the case where the first percentage displayed by the numerical display area 10 is changed to the second percentage, the user can immediately obtain the percentage corresponding to the current data value. By the size of the area of the display area 12, the user can understand at a glance the proportional relationship represented by the corresponding percentage of the current data value. Therefore, when the user views the display graphic 100, the user can quickly understand the current statistical characteristics of the data value to be displayed in a short time.

In addition to the above settings, the display graphic 100 of the embodiment of the present invention may also open other settings that allow the user to customize, so that the display graphic 100 can be further customized. For example, in addition to the first pattern G1, the second pattern G2, the third pattern G3, the animation A1, and the first percentage, the user may define the sector area in which the second pattern G2 gradually disappears as an angular velocity in the counterclockwise direction. Gradually disappearing (built-in is set to gradually disappear in the clockwise angular velocity), and the user can customize the condition and speed at which the second pattern G2 completely disappears as described above. In addition, the second pattern G1, the second pattern G2, the third pattern G3, and the animation A1 can be set according to user preferences, and even defined as a transparent pattern, and the motion image and the still image of the animation A1 can also be defined by the user. A situation that matches the numerical data to be statistical. For example, if the user wants to measure the mileage data of the running value, the motion picture in the animation A1 can be set as the animation of the character being jogging, and the like. When the display graphic 100 of the embodiment is applied to a portable or non-portable electronic device, the statistical data value thereof will be The predetermined time is continuously updated (e.g., the data value is updated every 10 ms) to ensure that the user extracts a second percentage corresponding to the latest data value based on the continuously updated data value while viewing the display graphic 100. However, when the long-term data value does not change, the second percentage corresponding to the latest data value will not change within the display graphic 100. For example, if the user wants to measure the mileage data of the running value, but the user does not move within a certain period of time, and the mileage data of the running value does not change during the period, the last displayed state on the display graphic 100 will be the same.

In summary, the method for displaying data values of the present invention utilizes an animation, a numerical display area, and a display area, so that the user can understand the statistical status of a single data value in a short time. All the patterns, animations and predetermined values can be adjusted by the user, not only to display various statistical status, but also to various portable or non-portable electronic devices. Since the present invention presents a variety of single statistics through a clear and easy-to-understand visualization, it is applicable to users of all ages.

The above are only the preferred embodiments of the present invention, and all changes and modifications made to the scope of the present invention should be within the scope of the present invention.

100‧‧‧ display graphics

L1‧‧‧ first layer

L2‧‧‧ second layer

L3‧‧‧ third layer

L4‧‧‧ fourth layer

M‧‧‧ intermediate layer

11‧‧‧Reduced area

12‧‧‧Display area

10‧‧‧Value display area

O‧‧‧Heart spindle

G1‧‧‧ first pattern

G2‧‧‧ second pattern

G3‧‧‧ third pattern

G _M ‧‧‧ pattern

A1‧‧‧ animation

Claims (9)

A method for displaying a data value, which is suitable for displaying an image animation in which a first percentage is gradually changed to a second percentage, the method comprising: providing a first layer having a first pattern; providing one having a second layer of the second pattern, and overlaying the second layer over the first layer; providing a third layer having a third pattern and overlaying the third layer over the second layer The area of the third pattern is smaller than the area of the second pattern, and the first pattern, the second pattern, and the third pattern are circular patterns; the value of the first percentage is gradually increased at a rate Changing to the second percentage value and displaying on the third pattern of the third layer; and gradually reducing the area of the second pattern of the second layer according to the rate to gradually reveal the first The first pattern of a layer until the exposed area of the first pattern corresponds to a second percentage of the area of the second pattern. The method of claim 1, wherein the first pattern, the second pattern, and the center of the third pattern are the same. The method of claim 1, wherein the first pattern and the second pattern have the same radius. The method of claim 1, wherein the area of the second pattern of the second layer is gradually reduced according to the rate, and the area of the second pattern is reduced by a predetermined angular velocity, and the second pattern is reduced. The fan shape is present. The method of claim 4, wherein the second layer of the second layer is gradually reduced according to the rate The area of the pattern is reduced in the clockwise direction or the counterclockwise direction by the predetermined angular velocity to reduce the area of the second pattern. The method of claim 1, further comprising providing a fourth layer having an animation and overlaying the fourth layer on the third layer, wherein the area of the animation is smaller than the area of the third pattern. The method of claim 1, further comprising providing an input unit to set the first percentage. The method of claim 1, further comprising providing an input unit to set at least one of the first pattern, the second pattern, and the third pattern. An electronic device, configured to display a first percentage gradually changing to a second percentage of an image animation, comprising: a storage unit for storing a first layer having a first pattern, having a a second layer of the second pattern and a third layer having a third pattern, the area of the third pattern being smaller than the area of the second pattern, the first pattern, the second pattern, and the third pattern being a circular pattern; a processor coupled to the storage unit, the processor sequentially stacking the first layer, the second layer, and the third layer, the processor gradually increasing the value of the first percentage at a rate Changing to the second percentage value and displaying it on the third pattern of the third layer, and gradually reducing the area of the second pattern of the second layer according to the rate to gradually reveal the first The first pattern of a layer until the exposed area of the first pattern corresponds to a second percentage of the area of the second pattern to obtain the image animation; and a display screen coupled to the processor For displaying the image animation