Js animation Framework Design

Js animation Framework Design
Question: When you no longer rely on JQuery, you are tired of introducing js class libraries to achieve some animation effects, when you want to implement a simple and practical animation frame ...... the following describes the animation framework designed by the fool: it supports animation easing Algorithm functions, such as Linear, Cubic, Back, and Bounce. It supports changing the height, width, transparency, and border, the basic animation of the margin. It supports callback functions of the animation, such as start, pause, and complete callback. In Section One game animation, an important concept in Flash animation is frame rate, that is, the number of frames played per second. Generally, the animation is 30 frames per second, in fps (frames per second ). For constant speed motion: if the duration of an animation is 500 ms and the frame frequency frequence is 30fps, the total number of frames is (500/1000) * 30 = 15, that is, the animation contains 15 "pictures". Each frame is taken, a picture is calculated: the current position of the picture = start position + (current frame/Total frame number) (end position-start position). If the current frame is the last frame, the animation ends. The setTimeout or setInterval calls the evaluate function every (500/15) ms to calculate a screen. Let's take a look at the Linear moving Linear easing algorithm function. t indicates the current frame, B indicates the start position, c indicates the offset distance value, that is, the current position-start position, and d indicates the total number of frames, in line with the above reasoning, the truth for other Algorithm functions is actually the same, but in the process of motion curves are different, some present parabolic, some present linear index, if you are interested in mathematics, you can study these Algorithm functions. I also know the following: Linear: function (t, B, c, d) {return c * t/d + B ;} after the above problems are clarified, we can solve the js animation framework design. If you don't talk much about it, come to a demo first. Section Two code's overall structure. For more information, see comments. Notes: 1) variables defined in the private scope must be accessible outside of the window global object, such as window. anim = Anim; 2) the positioning position attribute needs to be set for the animation element; 3) the input margin parameter needs to be named in the hump format, and targetPos (element target position) must be set at the same time) the value of the margin overwrites the value of targetPos. For example, the value of marginLeft overwrites the value of targetPos. left value, because the principle of implementing animation by the margin is also to use the left and top values of elements: (function (window) {/** Tool Object * contains basic dom operations, event operation */var util ={}; util. dom = {// get the element calculation style getPropValue: function (element, propName) {}, // set the transparency setO Pacity: function (obj, num) {document. all? Obj. filters. alpha. opacity = num: obj. style. opacity = num/100 ;}//......}; util. event ={// get the event object getEvent: function (event) {}, // get the event Source Target getTarget: function (event) {}, // register the event addEvent: function (element, event, handler) {}, // Delete event removeEvent: function (element, event, handler) {}, // block default behavior preventDefault: function (event) {}, // block event bubbling stopPropagation: function (event ){}//...... };/** Animation easing function */var Tween = {Linear: function (t, B, c, d) {return c * t/d + B ;}, quad: {easeIn: function (t, B, c, d) {return c * (t/= d) * t + B;}, easeOut: function (t, B, c, d) {return-c * (t/= d) * (t-2) + B;}, easeInOut: function (t, B, c, d) {if (t/= d/2) <1) return c/2 * t + B; return-c/2 * (-- t) * (t-2)-1) + B ;}},//...}; /** core animation * @ elem: the animation element to be executed * @ Options left, top, opacity, width, height, border, marginLeft, marginRight, marginTop, marginBottom */function Anim (elem, options) {this. elem = elem; this. options = options; // default style attribute this. defaults = {};} Anim. prototype = {constructor: Anim, // initialize the animation init: function () {this. isStart = false; this. isStop = false; this. isComplete = false; this. isBack = false; this. start () ;}, // initialize data before: functio N () {}, // start animation start: function () {}, // animation process run: function () {this. before (); // The animation parameter matches this. match (); // The original path returns if (this. isBack ){//...} if (this. isStart) {this. onStart. call (this. elem); // compute the animation this. count () ;}}, // match the animation Parameter match: function () {}, // calculate the animation count: function () {}, // The original returned back: function () {}, // stop animation stop: function () {}, // reset element reset: function () {}}; // use if (! Window. util) {window. util = util;} if (! Window. Anim) {window. Anim = Anim;} if (! Window. tween) {window. tween = Tween ;}}) (window); Last is very simple to use. initialize the parameter object and call the constructor Anim to set var options = {duration: 2000, // animation parameters, // animation duration frequence: 30, // Frame Rate tweenFunc: Tween. linear, // animation easing function targetPos: {left: 400, top: 300}, // The opacity: 40 for the target position of the element, // transparency (optional) width: 80, // width (optional) height: 80, // height (optional) // marginTop: 100, // top margin (optional) border: '2px solid red ', // border (optional) // animation start callback (optional) onStart: fu Nction () {// this points to the current animation element}, // The animation stops callback (optional) onStop: function () {// this points to the current animation element }, // callback after animation completion (optional) onComplete: function () {// this points to the current animation element }}; var anim = new Anim (animElem, options ); the source code and the demo of the easing algorithm function are attached.