A summary of some practical functions (frames) of packages in JS motion

A summary of some practical functions (frames) of packages in JS motion

In the previous period of time to learn the JS movement is a very useful function, should be called a small framework, and now summed up. Why not summarize it at that time? I think the so-called summary is not in the brain still remnants of the new knowledge of the impression of the time to write it down, but after a period of time to look back to see it again, this time will generally have new ideas and new experience of these new things, I call this process "knowledge of fermentation." For me, after the "fermentation" with their own ideas and experience things can be called summary.

The following are divided into several versions, also reflects their evolutionary process, these functions are set elements of the properties, and are in a gradual, with a buffer effect of the form to do, that in the process of change each time the amount of change is not uniform, but with distance from the target value gradually changed.

Enclose the encapsulated GetStyle () function, you can get the element's non-inline style, because the way IE gets non-inline elements and other browsers are different, in order to avoid judging the current browser type each time, so encapsulated into a function:

function GetStyle (obj, attr)//parameter: The element to get the property {if (Obj.currentstyle)//ie the method of obtaining the browser {return obj.currentstyle[attr];} else//Method {return getComputedStyle (obj, false) for non-IE [attr];}}

First Edition:

----Feature: A setting that implements a specific property value for a single specific element.

----thinking: In the process from the current value to the target value to achieve a change in the buffer gradient process should be set to a variable to control the amount of change each time, named speed, the size of the variable should be reset every time the timer call, This value is determined by the difference between the current value and the target value (the value is also changing, since the difference between the current value and the target value is always changing before the target value is reached). After the speed is calculated, add it to the current value and assign the "new" current value to the target element. It's a good idea to simulate the process in the brain.

For elements with a length attribute (such as height of the element, width, distance left, right, top, bottom, etc.), the value of the element can be converted to a numeric type using the parseint () method, with the ' PX ' converted to a string when set. But there is a special but commonly used attribute-transparency, he does not have a unit, so the transparency to special processing: the current value of the obtained transparency is the default is decimal, because the function of the third parameter is an integer value, it is convenient to convert it to 0~100 integer values (*100 after the value is taken out). You can do this in a transparent manner when assigning the "new" current value to the target element. Finally, if the target value is reached, the timer is turned off. Other details in the code comment say:

function Changeto (obj,attr,target) {clearinterval (Obj.timer);//The previous timer is closed, otherwise the function will add a timer for each call, the animation effect of the element is changing more and more quickly Var Nowvalue = 0; var speed = 0; Obj.timer = setinterval (function () {////handle opacity in the method to be rounded, convenient for later use Nowvalue = (attr = = ' opacity ')? Math.Round (parsefloat (GetStyle (obj, ' opacity ')) *100):p Arseint (GetStyle (obj,attr)); speed = (target>nowvalue)? Math.ceil ((Target-nowvalue)/10): Math.floor ((Target-nowvalue)/10), the//speed value is negative, pay attention to rounding down nowvalue+=speed;if (attr = = ' Opacity ') {//obj.style.filter = ' alpha (opacity: ' + nowvalue + ') '; obj.style.opacity = nowvalue/100;//non-IE set transparency method}else{ OBJ.STYLE[ATTR] = nowvalue + ' px ';//variables do parameters in square brackets, dot "." The call does not take effect}if (Nowvalue = = target) {//To determine whether to the target value, if the off timer clearinterval (Obj.timer);}},30);} <span style= "font-family:arial, Helvetica, Sans-serif; Background-color:rgb (255, 255, 255); " > </span>

Second Edition:

----Feature: A setting that implements a specific property value for multiple elements.

----Idea: The above function can only implement one element at a time the setting of one property, sometimes enough, but in many other times the requirement is to require that the element's multiple properties simultaneously change, such as the position and size of the element at the same time, the size and transparency of the same change, and so on. What should I do at this time? The general idea is to change all the properties in this function every time the timer is called, which requires a loop, but what about the function parameters? JSON is needed at this point, and the problem with the parameters after using JSON is solved, and the problem of the loop is solved.

But the problem arises again--the possible attribute values arrive at the target first, some attribute values arrive at the target, and you cannot close the timer until a property reaches the target value, and the timer should be closed after all the attribute values have been set. How to solve this problem? ---Set a variable: set a Boolean type of variable isfinished before the loop starts, set the initial value to true, and then in the loop determine whether each property reaches the target value, and if not, set isfinished to false, so that As long as a property does not reach the target value, Isfinished is false, and if all the properties reach the target value, the isfinished value is not changed, and it remains true. Finally, at the end of the loop, if Isfinished is true, the timer is turned off. This method is often adopted, how to understand and remember this method? You can imagine a queue that assigns different tasks to everyone in the queue, and each task takes a different time, so the people in the queue are definitely not doing it at the same time, so how do you know that everyone is done? Then set a timer, the timer begins to work, define a Boolean variable with the initial value true, and then ask the person in the queue if they have completed the task, the person who completed the task does nothing, and the person who did not complete the task, let him shout "Oh, no!!! "Then put this variable mercilessly to false, wait until the end of the timer work to see this boolean type of variable, if the value is true, then it means that no one is finished , that is, everyone is finished, you can dissolve (turn off the timer).

Other details in the code comment say:

function Changenow (Obj,json) {///parameter: Target element, Jsonclearinterval (Obj.timer),///The previous timer is turned off, otherwise, each call will add a timer, The animation effect of the element changes more and more quickly var nowvalue = 0;var Speed = 0;obj.timer = SetInterval (function () {for (var i in JSON) {var attr = I;var Target = json[i];//to be rounded in the method of handling opacity, convenient for later use Nowvalue = (attr = = ' opacity ')? Math.Round (parsefloat (GetStyle (obj, ' opacity ')) *100):p Arseint (GetStyle (obj,attr)) and the//speed value is negative pay attention to rounding down speed = ( Target-nowvalue) > 0? Math.ceil ((Target-nowvalue)/10): Math.floor ((Target-nowvalue)/10); Nowvalue + = speed;//Accumulate now the current value, the following assignment to the element's property if ( Nowvalue! = target) {//There is an element that does not have a target to set isfinished to falseisfinished = false;} if (attr = = ' opacity ') {obj.style.filter = ' alpha ' (opacity: ' + nowvalue + ') '; obj.style.opacity = nowvalue/100;//non-IE set transparency to small Number}else{obj.style[attr] = nowvalue + ' px ';//variables do parameters in square brackets, dot "." The call does not take effect}}if (isfinished) {//If all property values have been set to the target value clearinterval (Obj.timer);}},30);}

Third edition: Chained calls

----function: The so-called chain function is to start another function after a function has been completed.

----Idea: Call the next function in the function, the key is when the call, the second version of the above function should be after all the action is completed before calling. Just add a parameter to the second version of the function, and if isfinished==true, call this function. To increase flexibility, add a judgment —--if this function exists, it is called. Say a bit more, directly on the key code to put.

function Changenow (OBJ,JSON,FN) {

...//The code here is the same as the second version of the function

if (flag) {

Clearinterval (Obj.timer);

if (FN) {fn ();} The added code, if this function exists, calls the

}

}

Full code:

function Changenow (OBJ,JSON,FN) {///Parameters: Target element, JSON, next function to execute clearinterval ( Obj.timer);//The previous timer is closed, otherwise each call this function will add a timer, the animation effect of the element is changing more and more fast var Nowvalue = 0;var Speed = 0;obj.timer = SetInterval ( function () {var isfinished = true;//Sets the tag before each cycle starts to determine if all properties have been set to complete for (Var i in JSON) {var attr = I;var target = json[i];//processing is not transparent The method of lightness to be rounded, easy to use Nowvalue = (attr = = ' opacity ')? Math.Round (parsefloat (GetStyle (obj, ' opacity ')) *100):p Arseint (GetStyle (obj,attr)) and the//speed value is negative pay attention to rounding down speed = ( Target-nowvalue) > 0? Math.ceil ((Target-nowvalue)/10): Math.floor ((Target-nowvalue)/10); Nowvalue + = speed;//Accumulate now the current value, the following assignment to the element's property if ( Nowvalue! = target) {//There is an element that does not have a target to set isfinished to falseisfinished = false;} if (attr = = ' opacity ') {obj.style.filter = ' alpha ' (opacity: ' + nowvalue + ') '; obj.style.opacity = nowvalue/100;//non-IE set transparency to small Number}else{obj.style[attr] = nowvalue + ' px ';//variables do parameters in square brackets, dot "." The call does not take effect}}if (isfinished) {//If all property values are set to the target value clearinterval (obj.timer); 

<span style= "White-space:pre" ></span>/*

<span style= "White-space:pre" ></span> added code

<span style= "White-space:pre" ></span>*/if (FN) {fn ();} The FN function is not necessarily present and is called}},30 only if it exists);}

Above. Writing these functions is used to make things, and the effect of these functions is useful.

A summary of some practical functions (frames) of packages in JS motion