The essence of animation easing function viewed from WebGL 3D

50 years ago this month born the basic computer language, recall that I like the shape of the interface this line, but also due to the same year in the Win98 with QBasic divert knocked a piece of the Olympic five-ring code, when the Olympic five rings with color in front of their own I already know that my life to go. The 50-year anniversary of the media's mention of the basic language, which has influenced generations, has not been seen in this forggestting new era.

Today's consumer experience of high demand, beyond the static plane graphics can not impress people, animation has been measured front-end product user experience is an important factor, the recent open-source pop animation framework has been sent to the iOS industry, in fact, Apple early in cocoa and cocoa Touch frame built-in animation frame core ANIMATION,HTML5 CSS3 also built-in animation mechanism, I do not know whether their brains or HTML5 interface is not friendly enough, long don't always forget only to write a small example to help their memory.

Example video of automatic layout animation based on HT for web

3D Room Animation example video based on HT for web

The principle of animation is relatively easy to understand: In a certain time interval, constantly changing the color, size or angle and other graphical interface parameters, until the final target parameter results, the whole process of human eye observation is an animation effect. But providing a perfect animation frame is a systematic project that goes beyond most people's brains, and I like to read the blog of "Technical Singularity", and his "core Animation" has a deep thought on OS X's core Animation.

A good set of animation framework is the model interface, user experience and performance and other aspects of the extremely difficult to balance the challenge, even today, a variety of GUI platform to provide mainstream animation framework for many years is still a lot of problems, not the performance of specific scenarios, is a multi-component animation is inexplicably various bugs, I can't remember what I was talking about. Various platforms offer five eight-door interfaces, so I like to use the model to control the animation effect of the view, so that in the animation process to change which properties, change the amplitude of each animation frame changes, animation before the various event processing, Multi-animation parallel or serial processing everything can be in your own hands.

The first contact to easing concept is learning Flash/flex contact here demo, this demo for the first time I easing intuitive feeling, now based on HTML5 can refer to http://easings.net/, Easing function is to define the different curves of the data formula, to describe each frame callback need to change the amplitude of the graph parameter properties, so as to achieve even, first fast after slow, first slow fast, even above the starting value and end value and then slowly restore the various animation effects, Now there are a lot of tools to provide visual editing easing curve functions, the example will be introduced to enumerate a bunch of commonly used easing function for everyone to refer to the application, first on a picture and video to let everyone experience under the WebGL 3D, How to show the different easing animation effects more visually:

In this example, nearly 20 types of animated easing are distributed on different arrow runways, and when you click the Animation button on the control Panel to start the animation, the animation process arrows will determine the speed of progression along with the logic of the easing function. In this way, multiple sets of animations are simultaneously visualized to compare different animation effects at the same time. The arrow's color gradually changes from white to red as it progresses, and turns red when it reaches the end point.

The example also uses the 3D space new axis, in the vertical axis direction dynamic use curve to represent the easing function at the current time point function value, therefore we can intuitively experience to the easing function curve dynamic change process, simultaneously the curve section color also according to the time period Arrow's advance distance from white to red.

On the right side of the control panel is the HT tableview table component, through the table Checkmode can be checked to display the type of easing function, can click on the table header all selected or all cancel, or line control the specific effect is visible, the lower HT bar component frames is the frame number, Represents the whole process to run how many frames, interval represents the time interval of each frame, increase frames will make the curve more uniform, add or subtract interval can control the speed of the animation degree.

The following HT for Web 3D example is the effect of running on the Android tablet, and it is easier to visually observe the specific easing function by ticking some types:

The whole example of the operation of the effect I feel like this society all kinds of life road, everyone can not escape birth and death, everyone's starting point is the same, the end of the death is who also hide, but different people may come out of different life curve, easenone:function (t) {return T} This is a straight line, give me feel is the road of civil servants, no ups and downs, every year will be better income, but fast not to only slowly boil; Elasticout is the most successful young to reach the pinnacle of career, of course, the follow-up is not what the pursuit of high stability, such as death; Elasticout is the bloomer type, All the way flat and no achievements, the end of the fortune has been fortunate to reach the destination quickly; other types of turbulence, such as entrepreneurial life, every day you do not know what will happen tomorrow, you may have been sitting on the roller coaster, sometimes in the trough and at the peak, but how to keep on moving everyone will reach the ideal end:

Everything'll is okay in the end. If it ' s not okay, it's not the end.