JavaScript implements a lightweight animation library

Javascript animation actually changes the DOM style. As long as you clarify the attributes of DOM elements in mainstream browsers, JavaScript animation is not difficult. There are also a lot of encapsulated JS animation libraries on the Internet, but most of them are too functional, and as for the large amount of code, thousands of lines are too frequent to be used in small projects. Here we have encapsulated a lightweight animation library, which has been implemented in all its main functions. Some omissions are inevitable. Please give me more advice.

Here we will first describe the functions and usage, as well as the points of attention, followed by a very simple running example.

Usage and precautions:
Anim (elemId, cssObj, time, animType, funObj)
Parameter description:
ElemId (required) id of the element to be animated
CssObj (required) style at the end of the animation, object type, key-Value Pair form,
The middle key is a css attribute that can be directly used in the "camper" form of JS, rather than the original css attribute.
Example: {marginLeft: '200px ', top: '200px', borderWidth: '8px '}
Time (required) animation duration (unit: ms)
AnimType (optional) is linear by default. The Tween type in the Code contains optional other parameters.
FunObj (optional) If you want this option, you must add the function to be executed at the start and end times.
For example, {el is the element pointed to by elemId.
Start: function (el) {el. innerHTML = 'start! ';},
Complete: function (el) {el. innerHTML = 'completed! ';}
}

Notes:
1. It is not compatible with earlier browsers and supports IE8 +, FF, chrome, safari, and opera.
2. Pay attention to the css attributes that can be directly used in JS in the "hump" form (css should have been converted to the "hump" form,
However, basically all JS programmers can directly write the camper format, so no conversion is made)
3. If you need to apply the animation to the absolute position (absolute;) element,
Pay attention to the CSS setting method on these elements.
For example, to set top and marginTop, you should set top instead of marginTop for absolute positioning elements,
It is not necessary to mix the two because their reference points are different and the setting can easily cause confusion.
Therefore, you cannot set both of them here.
Others are similar (left and marginLeft, right, and marginRight)
Setting top, bottom, left, and right is not supported at the same time.
4. The Tween easing algorithm is referenced, and multiple change modes are supported, such as linear and progressive.
5. The "animation queue" function has not yet been implemented. This version is a preliminary version. please correct me for any omissions.

<! Doctype html> 





Tip: the code can be modified before running!

(Source: http://huajs.cnblogs.com)