The essence of animation easing function viewed from WebGL 3D

50 years ago this month, the basic computer language was born, remembering that I like the interface of the shape of the line. Also due to the year in the Win98 with QBasic divert knocked a part of the Olympic five-ring code, when the color of the Olympic rings present themselves in front of me already know 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.

Consumers now have a high demand for user experience. Beyond the static plane graphics can not impress people, animation is to measure the front-end product user experience is an important factor, the recent Facebook open-source pop animation framework has been sent to the iOS industry, in fact, Apple early in cocoa and cocoa The touch frame has a built-in animation frame core Animation. HTML5 's CSS3 also built-in animation mechanism, do not know that their brains are not good or HTML5 interface is not friendly enough, long don't always forget only to write a sample to help their memory.

Self-active layout Animation sample video based on HT for web

3D Room Animation Sample video based on HT for web

The principle of animation is easier to understand: in a certain time interval, constantly changing the color, size or angle of the graphical interface parameters. Until finally the goal of the outcome, the whole process of human eye observation is an animation effect.

But providing a good set of animated frames is a system project that goes beyond most people's minds, and I like to read the blog "Technical Mysteries", and his core Animation is a deep thought on OS X's core Animation.

A good set of animation frameworks is a very difficult to balance the model interface, user experience and performance, and so on, even now the mainstream animation framework provided by various GUI platforms for many years is still a lot of problems, not a detailed scenario performance issues. is multi-component at the same time animation is inexplicably various bugs, plus the earlier mentioned I don't mind, I can't remember the various platforms provide five eight-door interface. So I like to use the model to control the animation effect of the view, so that the animation process to change which properties. Change the amplitude of each animated frame, before animating the various event handlers. Multi-animation parallel or serial processing everything can be in your own hands.

The first contact with the easing concept is to learn flash/flex when exposed to the demo here. This demo for the first time to my easing intuitive feeling. Now, based on HTML5 's ability to participate in the http://easings.net/,Easing function is to describe the different curves of the data formula, describing each frame callback need to change the amplitude of the graph parameters, so as to achieve even, first fast after slow, first slow and fast. Even more than the start and end values to slowly restore the various animation effects, now there are a lot of tools to provide visual editing easing curve functions, the sample will be introduced to enumerate a bunch of frequently used easing function for everyone to participate in the application, Start with a picture and a video to get you started on the WebGL-based 3D. How to display different easing animation effects more intuitively:

In this example, nearly 20 types of animation easing are distributed on different arrow runways, and when you click on the Control Panel, the Animationbutton starts the animation, and the animation process arrows will determine the speed of progression along with the logic of the easing function. So many groups of animation at the same time, the time is intuitive to different animation effects. The arrow's color also gradually changes from white to red as it progresses, and turns red when it reaches the end point.

The demo sample also uses the 3D space new axis, the vertical axis in the direction of the dynamic curve to represent the easing function at the current point in time function value, so we can intuitively experience the easing function curve dynamic change process. At the same time, the color of the curve segment is changed from white to red depending on the arrow's forward distance.

The upper-right side of the control panel is the HT tableview table component, which allows you to check the type of easing function that needs to be displayed through the Checkmode of the table. All selected or all cancellations can be clicked on the table header. Or line-wise to control whether the detailed effects are visible. The frames of the lower HT strip assembly is the number of frames, representing how many frames the entire process will run. Interval represents each frame of the time interval, adding frames will make the curve more uniform, increase or decrease interval can control the speed of the animation degree.

The 3D sample for the following HT for Web is an effect performed on the Android tablet. You can check the details of the easing function execution effect by checking the section type easier and visually:

The execution of the whole sample gave me a feeling like the way of life in this society. Everyone fled is only birth and death, everyone's starting point is the same, the end of the death is also who hide just, but different people can get out of different life curve. Easenone:function (t) {return T} This is an even line. I feel like the road to civil servants. No ups and downs, every year will be better income, but fast not only can slowly boil. Elasticout is the most successful young to reach the pinnacle of career. Of course, there is no pursuit of a high-level stability, such as death, Elasticout is the bloomer type, all the way flat no achievements, before the end of the lucky high speed reached the destination. 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 sometimes at the peak, just how to keep on moving forward everyone will reach the ideal end:

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

The essence of animation easing function viewed from WebGL 3D