Commemorating a previous software product (4)-click verification, inertia, acceleration, spring and animation Effects

6. Click verification, inertia, acceleration, spring and animation effect 6.1, and click Verification

Since no control is used, how can I determine the element on which the finger (Mouse) points? -- You have to make your own judgment.

I set a click verification box for each interface element. This box is actually a rectangle. It is easy to determine whether a vertex is within a rectangle. Should it be easy to implement it? It is actually a little harder than you think, because I have to consider the location offset. This involves the User-Defined interface. For example, the shortcut displayed on the homepage of this skin (skin will be mentioned later) is different from the default homepage:

Therefore, different personalized factors and other location offset factors should be taken into account during click verification. The rectangle for click verification cannot be written to death.Code.

6.2 click and drag

If you have used electronic products, you don't know how to click them. For example, if you click a button in one of the most basic controls of windows, you can move the mouse down and raise it to a click.

Clicking on an icon in a different scenario has a very different meaning. For example, clicking an icon on the desktop is to select this icon. In fact, there are many other actions that you cannot think of, such as canceling the selection of other icons, if any, close the context menu. If yes, the focus of the activity window is lost. If yes, if the clicked icon is selected, click its region again to rename it ...... A lot of rules, software engineers who have really done the UI should have understood these details. I personally think it is quite difficult to do the UI, and there are too many details, outsiders seem to take it for granted, but there are too many complicated logics in it, and the boss won't listen to you to explain those things ...... In addition to the technology itself, the UI is still a place that everyone wants to stick to, which further increases the difficulty of UI development-I am here to "speak out" should be harmless, huh, huh, okay, let's get down to the truth ......

The click action on a mobile device usually indicates a "start" or "select". For example, if you click an icon on the iPhone desktop, an app is started, it is very difficult to use your fingers to double-click the mouse on a mobile device. (Have you ever seen a mobile phone with a mouse? Samsung i780 comes with a mouse, which can be easily "double-clicked".) How can I press a finger and then perform a click verification "? Generally, if you press down and do not move it, you can directly raise it. This is a click. However, it is very difficult to move without moving. On the touch screen, after you press it, your fingers will inevitably move slightly, even if you do not feel it, this action becomes a "drag" instead of clicking. Therefore, you must set a "minimum drag distance" check. If it is smaller than this distance, it is not a drag or click operation.

(Click/drag to verify)

For example, if you place your finger at the top, bottom, left, and right of the square area, it is not a drag verification area. The slight movement of your finger in this area is not counted as a drag, and the drag effect is not displayed on the interface, if you open your finger at this time, it is regarded as a click action. Only when your finger moves beyond this area, it is regarded as a drag operation. It is regarded as a drag operation until your finger is released.

What is the minimum drag distance? This value also needs to be adjusted for different DPI values. The 192dpi value is 72 pixels, The 128dpi value is 48 pixels, And the 96dpi value is 36 pixels. You can see it to apply different resolutions, the workload is really small.

6.3. The UI Design Revolution Triggered by Apple

To be honest, before Apple, I never dreamed that the UI could do this. Now, if you look at Apple android in full street, everything is used to. Isn't that a single interface? But if Apple doesn't make such an interface first, what do you want? Like Newton's first law, it's very simple, right? I believe you learned it in junior high school. But if it wasn't Newton's first, Would you dare say you could understand it yourself?

The most revolutionary operation is screen selection. You need to scroll the content of the window. What is the practice in windows? Use the scroll bar on the right or the scroll wheel on the mouse, right. there is usually no mouse on the mobile phone, let alone the scroll wheel. You can only use the scroll bar. I don't think this is a problem at all, isn't that true for versions earlier than Windows Mobile 6.5?

(Windows Mobile's scroll bar)

This scroll bar is very fine by default. I often cannot click it. Fortunately, I can adjust its width by modifying the Registry. What a bad user experience does it look like now! As soon as the apple leaves, everything changes. You have to scroll the window content, right? Just drag your fingers on it. Try it? There is also an inertial effect. After the fingers are opened, the window content continues to scroll ...... The first time I saw this, I felt very shocked!

I initially thought: it would be okay if my fingers hit a blank space, but what if my fingers hit an icon? Is it like clicking an icon on a Windows desktop and dragging it to another location? As a matter of fact, Apple has designed a completely new operating method. The "screen" action will not result in the drag-and-drop icon I am worried about, the drag icon has another operation method. Apple's invention almost became the standard for subsequent touch screen operations, and countless software developers and equipment manufacturers have used Apple's design (including sosopi) for reference ). Microsoft did not add similar features until Windows Mobile 6.5 and did a great job of "pay-as-you-go", which is one reason for its rapid decline.

Note: The drag-and-drop icon operation method was first invented by Apple and used in its Macintosh product, earlier than Microsoft's Windows

6.4, inertia, acceleration and spring

What is inertia and acceleration? -- Do not use the physics knowledge of junior high school to answer questions. Use the diagram directly:

When the finger is released, the scroll continues because of "inertia". When the finger is released, the scroll speed slows down until it is stopped because of "acceleration ". Everything looks so natural, but how do we tell our mobile phones to plot this effect?

First, we need to know the speed of the finger, that is, the speed at which the finger leaves the screen. How can this problem be solved? The touch screen does not have the ability to directly give this speed. I came from the finger's moving track. I defined a limited queue in a global scope, which has a maximum of 20 elements, if there are more than 20 elements, the first element will be removed. This queue is actually a static array with high efficiency. I use this queue to record the coordinates of all the "wm_mousemove" events (finger movement is actually a "wm_mousemove" event ), that is to say, I recorded the coordinates of the last 20 fingers and recorded the time (in milliseconds, use these coordinates and time (in fact, the key is to analyze the coordinates and time of the last two points) to analyze the speed of the user's fingers. It is worth noting that the X-axis (horizontal) speed and the y-axis (vertical) speed are calculated separately. For example, if the X axis speed is positive and the Y axis speed is negative, it indicates that the user is directed to the right bottom.

The speed is coming out. If there is no acceleration, the interface will scroll until the end of the page. The acceleration is to make a "attenuation" for the speed (the acceleration is negative ), reduce it by a bit until the speed changes to 0. On the surface, this is not a difficult function. In fact, you need to check it many times before you can have an ideal sense of operation, this can be realized only when I use it a lot, but even after many corrections, many users still do not reflect well and everyone feels the same, finally, I made this configurable. I provided an "animation adjustment" interface for users to adjust themselves:

No textures are used on this interface, and the above items are directly painted with lines and text.

Let's talk about spring. Let's first look at what spring is:

• The first case is that when inertia rolling is reached, we don't stop immediately, but let the content scroll a little too much and then play it back;
• The second case is that the user has pulled the scrolling content too much, and we have to let the content play back when we are relaxed;

It is easy to think that the second case is actually the first case of "re-play back", so the designProgramIn the first case.

Spring has two phases:

• The first phase is to slow down, which is much faster than the previously mentioned slowdown. The deceleration during rolling is relatively slow, while the spring deceleration is very fast, in the program, I set the acceleration to eight times of the rolling speed, so that the "overhead" rolling can be quickly stopped. When the speed is changed to 0, it enters the second stage;
• The second stage is rebound, and the rebound process is also a slow process. When the rebound starts, I will calculate a rebound speed based on the current "overhead" distance. The larger the "overhead" distance, the faster the rebound speed, the better it is to simulate the effect of the spring, and then give it an acceleration in the opposite direction, basically the effect will come out.

The spring effect has also undergone a lot of adjustments, making Lao Wu feel "cool", but the code is already full of "correction coefficients "...... It's really not easy to do the ui! By the way, DPI must be taken into account for all these effects.

6.5. Animation Process Implementation

Some people may have come up with the specific implementation. Yes, it is to use timer. After the fingers are released, a 20 ms interval timer will be set to redraw the interface, calculate the draw offset based on the speed, acceleration, and status, and adjust the speed, acceleration, and status of each time until the animation process ends and timer ends.

If details are analyzed, it is more complicated.

Consider this situation: when the user presses the screen again during the rolling process, it seems to say: "Stop !", Do you have to stop now? Yes. At this time, the timer should be stopped. When the user raises his finger again, the timer should be re-enabled. Further, you will find more problems, because there may be more than one timer in the program, and they may all participate in the drawing at the same time. For example, if you display the clock on the interface, it is estimated that you have to check whether the minute of the time has changed every several seconds. If so, redraw the interface, at the same time, your fingers are rolling the content on the screen, which can easily cause confusion. Although such confusion is instantaneous, it is always bad.

Another example: After the fingers are released, the screen content is rolling in inertia. before stopping, you press the slider in the Slider Area. Do you have to stop the inertial rolling? If you switch the module, Timer should be terminated, but if you do not switch the module, but directly release the finger, do you want to continue the inertial rolling? If the answer is "yes", I have to suspend the timer instead of terminating it, right? Speaking of this, I think you should have understood the meaning of the sentence "outsiders seem so natural, but there are too many complicated logics in it.

("Pause" of inertial sliding ")

Even worse, there is a very small probability of deadlocks, and I have not fixed this bug so far.

Using fingers to scroll the screen content is one aspect, and another kind of animation is coherent, such as the page flip of the calendar:

(Calendar page flip effect)

We don't want to interrupt this kind of animation. I call it "Atomic Animation". During the atomic animation process, all user Screen operations will be ignored.

Solving these user operations and UI rendering problems is quite complicated. I am also wondering if there is a clearer idea to implement these rendering? I don't know much about it, but I don't need to think about it most of the time when developing the UI, because the development package has a dedicated solution for animation effects, so I don't have to use a timer to draw it a little bit.

6.6. Method of screen scrolling

Sosopi also uses this method to roll up and down a screen in most software scenarios (such as web pages, which usually only need to be viewed vertically without horizontal scrolling. Now, the key question is how to improve the drawing efficiency?

Although there are many methods, there is also one idea:Reduce plotting.

For example, if the height of the content on your screen is 10000, and the actual height of your screen is 800, the current offset is"-5600", Then what you actually want to draw is the range from the height of 5600 to the height of 6400. If you draw all, of course it is too slow. This is the basic idea.

Now, where can I start to draw the image? 5600 to 6400? I'm afraid this is not the case, because we usually want to draw text with lines high, we can only draw one line, there is no way to draw half or 1/3 words, assuming the line height is 100, the position of the text to be drawn is 5550. That is to say, although the text is before 5600, it must be displayed in part. Should this line be drawn? -- That's for sure, let alone half, that is, to show only one pixel and draw it out, so our method is to: determine which elements will be displayed on the interface, the elements to be displayed and only the elements to be displayed are drawn. This is:

(Scrolling)

This method runs through the entire sosopi, that is:Only show.

(To be continued ......)