View the essence of the animation Easing function through WebGL 3D

This month, 50 years ago, the BASIC computer language was born. In retrospect, I liked this line of interface, thanks to the fact that I used QBASIC to draw a piece of code to draw the five rings of the Olympics under win98, when the colorful Olympic rings appear in front of myself, I already know the path I have to go in my life. In this new age, not many media mentioned this affected the 50-Year Celebration of the BASIC language of several generations.

Nowadays, consumers' high requirements on user experience cannot be touched by static flat images. animation is an important factor to measure the user experience of front-end products, recently, Facebook's open-source Pop Animation framework has attracted a lot of attention in the iOS industry. In fact, Apple has built the Animation framework Core Animation as early as the Cocoa and Cocoa Touch frameworks, and HTML5's CSS3 also has built-in Animation mechanisms, I don't know whether my mind is not as friendly as the HTML5 interface. I don't have to forget to write a small example to help me remember it for a long time.

Example video of Automatic Layout Animation Based on HT for Web

 

Animation example video of 3D data center based on HT for Web

The animation principle is easy to understand: the graphic interface parameters such as color, size, and angle are constantly changed at a certain interval until the final target parameter result is displayed, the human eyes observe the whole process as an animation. However, the provision of a complete animation framework is a system project that is beyond the minds of most people. I like to read the blog "Technical singularity, his Core Animation study deeply considers the Core Animation of OS X.

A good set of animation frameworks is a challenge that cannot be balanced in terms of model interfaces, user experience, and running performance. Even today, mainstream animation frameworks provided by various GUI platforms have encountered many problems over the years, it's not a performance problem in a specific scenario, that is, multiple components and animation are inexplicably different bugs. In addition, I cannot remember how many platforms provide the five-producer interface, therefore, I like to use the Model to control the animation effect of the View. In this way, during the animation process, I like to change the attributes, change the amplitude of each animation frame, and process various events before and after the animation, you can control parallel or serial processing of multiple animations.

The concept of Easing was first introduced here as a demo when I learned Flash/Flex. This demo gave me the intuitive feeling of Easing for the first time:

In this example, the Easing types of nearly 20 animations are distributed on different arrow runways. When you click the animation button on the control panel, the animation starts, the arrow of the animation process determines the forward speed with the logic of the Easing function, so that multiple sets of animations can be visually compared at the same time. The arrow color gradually changes from white to red along with the forward distance, and completely becomes red when it reaches the end point.

The example also uses the new 3D space axis to dynamically use a curve in the vertical axis to represent the function value of the Easing function at the current time point, therefore, you can intuitively experience the dynamic change process of the Easing function curve, and the color of the curve segment changes from white to Red Based on the forward distance of the arrow in the time range.

At the top of the control panel on the right is the TableView table component of HT. You can select the Easing function type to be displayed through the table CheckMode. You can click the header to select all or cancel all options, or, you can control the visibility of specific effects row by row. the frames of the lower-end HT pull component is the number of frames, which indicates the number of frames to be run in the whole process, and interval indicates the time interval of each frame, increasing frames will make the curve more even, and increasing or decreasing interval can control the speed of the animation.

The following HT for Web 3D example shows the running effect on the Android tablet. You can check some types to observe the running effect of the Easing function more intuitively:

The Running Effect of the entire example makes me feel like all kinds of life paths in this society. Everyone cannot escape from birth and death, and the starting point is the same, no one can hide the death at the end, but different people can walk out of different life curves. easeNone: function (t) {return t} is a straight line, it seems to me that it is the road to civil servants. without great ups and downs, the annual income will be better, but we can't wait until we get down. elasticOut is the best way to reach the peak of our career, of course, there will not be any pursuit of high stability in the future; elasticOut is a late success type, and it has no achievements, and we have the honor to quickly reach the destination before the end; other types of twists and turns such as entrepreneurial life, every day, you don't know what will happen tomorrow. You may have been riding a roller coaster, sometimes at a low point and sometimes at the top of the page. However, if you keep moving forward, everyone will reach the ideal end point:

Everything will be okay in the end. If it's not okay, it's not the end.