Chinese front-end UI framework kit (6) JavaScript animation code implementation principles and tips

No.: kitjs officially discussed the establishment of the QQ group and the QQ group number.88093625. Welcome to join us to discuss topics related to the front-end.

The previous article introduced the basic interfaces, features, and usage of the $ kit. anim class.CodeTo learn how $ kit. anim supports all CSS attributes and CSS hack.

(1) setinterval

There is a woman behind every successful man. For JavaScript animation, the basic timer setinterval is the "woman". Haha. Basically, the animation frameworks I have studied are implemented based on setinterval. Of course, there are also some geeks who use setTimeout to implement them, with very few.

Benefits of using setinterval to use JavaScript Animation

1. The time slice is fixed. The latency of setTimeout will be affected by the code execution time in setTimeout, but setinterval will not

2. (fixed-point triggering. You don't have to worry about blocking. When setinterval is reached, it will automatically jump to the setinterval method body and start from the beginning,No matter which part of code X is executed by the JS engine, this sentence is wrong ,)

Correct: setinterval does not calculate the time of the method body, directly calculates the interval, and puts the method body into the execution queue. setTimeout must calculate the time + interval of the method body for repeated calls, both setTimeout and setintervalPut the method to be executed into the execution queue after the time specified by the parameter, because Javascript is single-threaded, there is no GOTO

 

So kitjs uses setinterval and uses the basic animation engine.

After each setinterval is defined, a timeout ID is returned, which is a number related to the current page and is unique. We can terminate the timer in clearinterval mode, that is, the animation is terminated.

(2) still using objects as parameters

The motion method of the anim class accepts parameters as a JSON object. The benefits of using a JSON object are as follows,

1. It is convenient to expand more methods and attributes

2. If there are too many parameters, it is very troublesome to remember the input order. It is not so troublesome to use JSON objects for configuration.

(3) Whether config. El is a single node, but a selector

Yes, when I first thought about it, my understanding is that for an animation, the moving element should not be just an element. For example, we need to make an effect of gathering in all directions, there are n elements in a fixed point. If JQ is used, N interval will be created, which is not necessary in my opinion. Because the development status of this animation is the initial position of the animation element, it can be obtained through js to obtain its current CSS attribute, and we only need to set the coordinates of the bottom end point. Therefore, when designing kitjs animation, I set the config. El attribute to receive a selector or nodelist, which can be said to save performance and make the code more concise.

The Code shows that config. El converts the received selector into a node array.

(4) resetting the initial status based on from

As an animation, the initial state may be his current state, or the initial state may not be his current state. Therefore, we need to reset the State based on the input config. From attribute.

(5) from is a CSS JSON

For the convenience of setting the status, the JSON method is directly used to write CSS, which is more convenient and clearer.

(6) CSS hack is supported in JSON format.

In fact, the secret is here. We can see that he calls the ME. setstyle method. Here, the me is the alias of this pointer.

In setstyleplugin, he will call the $kit.css method,

Kit implements iefix through the IE condition annotation method.

In iefix's kit.css method, he wants to do a _ camelcssname job.

 

The secret is in _ camelcssname.

Similarly, in kit. JS, there is also a logic for processing Firefox CSS hack.

(7) FX animation gradient computing

You can import the accumulated animation time, animation duration, start state value, and end state value to the animation parameter calculation to obtain the current state value,

$ Kit. anim also provides many animation functions.

(8) gradient calculation of rgba Color Channels

For rgba, RGB, or # XXXXX, the color numeric gradient cannot be converted to a 10-digit system, and then calculated using a single digital FX. The gradient must be R, G, the gradient of the three channels B is calculated three times.

Kitjs uses regular expressions to analyze the css json of form and to determine whether it is a color value.

Dedicated RGB computing and direct step-by-step computing of gradient numbers without RGB

(9) splitting and determining CSS attributes, which are specific gradient values and units, is also the key to identifying CSS 3 attributes.

Here, kitjs uses the regular expression matching and grouping and merging.

Using the preceding method, you can split a CSS string into multiple independent segments, perform gradient calculation on the value of each segment, and then combine them into a CSS string, this method is particularly effective for css3 transform, especially the multi-segment CSS attribute. Currently, only kitjs is available in the market, and other frameworks are basically not supported.

(10) animation chains

When the animation duration exceeds the duration, kitjs deregister the animation's interval ID and reset the animation element to config. the css status of the to parameter. If config. if the then parameter is set, the config. the then parameter is used in the demo to complete the continuity of an animation chain.

(11) Summary

In general, in mobile development, if it is a high-level browser, we recommend that you use-WebKit-transition directly, followed by-WebKit-animation + keyframes. However, after many project lessons, this is not stable, and there are many bugs. the most versatile part is JavaScript animation, which uses setinterval to save the Earth.

You are also welcome to discuss the implementation of animation.

Kitjs Official Website: http://xueduany.github.com/KitJs/

Source code: Https://github.com/xueduany/KitJs/