145th, JavaScript, sync animations

JavaScript, synchronizing animations

The previous section, moving transparent animation, modified to support synchronous animation , that is, you can give this animation method multiple animation task, let it complete at the same time

Principle:

add a property to the method, which is an object, Synchronization Animation properties, property values for the object, inside the object is, animation mode: The target amount, the combination of key-value pairs, can only animate the target amount of the key value pair

/** Yi_dong_tou_ming () method, dynamically change the CSS property description * * Yi_dong_tou_ming () method, will an element, do an animation operation * 1,x move the element to the left or right to move * 2, Y will move the element vertically up or down * 3,w the meta Increase or decrease the width of the element animation * 4,h Increase or decrease the animation of elements * 5,o animate element animation or reduce transparency * Note: You can also write other CSS property names (full name), to animate or reduce the value of CSS properties, you must be a value of the CSS property, such as: Font-size * ************************************* * x to move the element to the left or right, first set the target positioning, position:absolute; * O Increase or decrease the transparency of elements animation, combined with the original transparency of elements in CSS Filter:alpha (opacity=0); opacity:0; * ************************************* * yi_dong_tou_ming () method, parameter description * parameter is an object as follows * yi_dong_tou_ming ({' attr '                                                  : ' X ', "animate mode", X. for lateral movement, Y. For vertical movement, W. To increase the width of the animation, O. Animation for transparency, "required" Note: You can also write other CSS property names (full name), to animate the value of the CSS property to increase or decrease, must be a numeric value of the CSS property, such as: font-size O. For transparency move                                                  Painting, set the transparency animation, you must first set the initial transparency in the CSS, such as: Opacity:1;filter:alpha (opacity=100);     Otherwise IE9 the following cannot achieve transparency animation ' type ': ' 1 ', ' animated mode ', 0. Constant mode, 1. Buffer mode "optional, default buffer" ' Speed ': 6, "buffer rate", MoveThe draw mode is set when buffered, "optional, defaults to 6", changing the span with this value. Each time the animation dynamically increases or decreases, the buffer effect is ' start ': 50, ' animation start position ', the starting pixel or transparency "optional, default to the original location of the object" is generally not required Note: The starting position of the animation, the general button animation, if the mouse touches the animation, will not stop initializing, because the mouse move changes the starting position of the animation ' target ': 1 00, "Target", is in the original pixel or transparency, increase or decrease to the target amount of pixels or transparency "can first, pay attention to the target volume is not filled, increment required" ' alter ': 50, "increment" is the object            The original pixel or transparency, increase or decrease the pixel or the transparency "can first, pay attention to increment not fill, target quantity must fill" ' Step ': 7, "span", each time animation increases or decreases, pixels or transparency, "optional, default 20" ' Danwei ': ' em ', ' attribute value Unit ' Danwei. The property value unit, which is the unit in which the CSS properties are computed, such as PX or EM, not the default px ' t ': 50, "Each time the animation ", that is, how many milliseconds to perform an animation" optional, default 10 "Fn:function () {" Callback function, queue ", callback function for the execution of the function after the completion of the animation, in the callback function in the write animation, is a queue animation, that is, an animation after the execution of the second             An animation}mul:{"Synchronizing animated Objects", which are used to perform multiple animations at the same time, synchronize animation properties, attribute values to objects, objects inside, animations: Target volume, combined key-value pairs, only animated and target-valued key-value pairs            Synchronous animations, in addition to animation and target volume, are set outside of the Sync animation object because they are unified with other parameters ' W ': 101, ' H ': $, ' O ': 30 }}); **/feng_zhuang_ku.prototype.yi_dong_tou_ming=function(obj) { for(vari = 0; I < This. jie_dian.length; i++) {        varelement = This. Jie_dian[i]; //attr, for the animated way,         //x. For lateral Movement         //y. For vertical Movement         //W. To increase the width of the animation         //H. To increase the height of animation         //O. Animating for Transparency        varattr = obj[' attr '] = = ' x '? ' Left ': obj[' attr ' = = ' y '? ' Top ': obj[' attr '] = = ' W '? ' Width ': obj[' attr '] = = ' h '? ' Height ': obj[' attr '] = = ' o '? ' Opacity ': obj[' attr ']! = undefined? obj[' attr ': ' Left '; //start. For animation start position,        //If you enter the starting position of the animation, the value is the starting position of the input, the motion animation is a pixel value (such as 100), the transparency animation is the percentage of transparency (such as        //if not entered, the default move animation gets the original pixel position of the object, the transparency animation gets the original transparency of the object, divided by 100 equals the original transparency percentage        varStart = obj[' start ']! = undefined? obj[' Start ']: attr= = ' opacity '? Parsefloat (GetStyle (element, attr)) * 100: parseint (GetStyle (element, attr)); //T. Perform an animation for each animation time, that is, how many milliseconds         //does not pass the default, is 10 milliseconds to perform the animation once        vart = obj[' t ']! = undefined? obj[' t ']: 10; //step. For span, each time the animation increases or decreases, pixels or transparency        varStep = obj[' Step ']! = undefined? obj[' Step ': 20; //Danwei. The property value unit, that is, the unit to calculate the CSS properties, such as PX or EM, do not pass the default PX        varDanwei = obj[' Danwei ']! = undefined? obj[' Danwei ': ' px '; //alter. Increment, which is to increase or decrease the pixel or transparency on the object's original pixel or transparency.        varalter = obj[' ALTER ']; //Target is the amount of pixels or transparency that is added to or reduced to the target volume, either on the original pixel or on the transparency.         //Notice how the increment is increased or decreased on the original, and the target volume is increased or reduced to the target on the original basis        vartarget = obj[' target ']; //mul, the Mul property of the received, obj object, and the Mul property is an object that is animated by the combination of the target amount of the key value pair, that is, the parameter to synchronize animation var mul = obj[' Mul ']; Receive synchronous animations (parametric objects)         //speed. For buffering, change step with this value when the animation mode is buffered. Each animation dynamically increases or decreases to achieve buffering effect         //do not pass, default is 6        varSpeed = obj[' Speed ']! = undefined? obj[' Speed ']: 6; //type. For animated mode, constant speed mode, buffered to buffered mode         //do not pass, default is buffer mode        varType = obj[' type '] = = 0? ' Constant ': obj[' type ' = = 1? ' Buffer ': ' Buffer '; if(Alter! = undefined && target = =undefined) {Target= Alter +start; } else if (alter = = undefined && target = = undefined && Mul = = undefined) {            Throw NewError (' alter increment, ' or ' target ', or ' sync ' animation object, must pass one! ‘); }        if(Start > Target) step =-step; if(attr = = ' opacity ') {element.style.opacity= parseint (start)/100; Element.style.filter= ' Alpha (opacity= ' + parseint (start) + ') '; } Else{element.style[attr]= Start +Danwei; }        if (mul = = undefined) {//judgment if the Sync animation object is not passed, the description is a single animation mul = {};     Create Mul object mul[attr] = target; Use a single animated, animated approach as an object key, with the target amount as a value, combined into a key-value pair into the object } clearinterval (Element.timer); //Create a timer for each image and stop the timerElement.timer = SetInterval (function() {//turn on the timer under the object            //creates a Boolean value that can be used to see if an animation is completed            varFlag =true;//that means it's all done.            //Loop Sync Animation object for (var i in mul) {attr = i = = ' x '? ' Left ': i = = ' Y '? ' Top ': i = = ' W '? ' width ': i = = ' h '? ' Height ': i = = ' o '? ' Opacity ': I! = undefined?            I: ' Left ';                                                       Get synchronized Animation object, animation mode target = Mul[i]; Get the target volume in the Synchronized animation object                if(Type = = ' buffer ') {Step= attr = = ' opacity '? (Target-parsefloat (GetStyle (element, attr)) * 100)/Speed : (Target-parseint (GetStyle (element, attr))/Speed ; Step= step > 0?Math.ceil (STEP): Math.floor (step); }                if(attr = = ' opacity ') {                    if(step = 0) {setopacity (); } Else if(Step > 0 && math.abs (parsefloat (GetStyle (element, attr)) * 100-target) <=Step)                    {setopacity (); } Else if(Step < 0 && (parsefloat (GetStyle (element, attr)) * 100-target) <=Math.Abs (STEP))                    {setopacity (); } Else {                        vartemp = parsefloat (GetStyle (element, attr)) * 100; Element.style.opacity= parseint (temp + step)/100; Element.style.filter= ' Alpha (opacity= ' + parseint (temp + Step) + ') '; }                    //determines that the target value is not equal to the current value of the element, indicating that the animation has not reached the target value and changed flag to False                    if (parseint (target)! = parseint (parsefloat (GetStyle (element, attr))) flag = False; } Else {                    if(step = 0) {settarget (); } Else if(Step > 0 && math.abs (parseint (GetStyle (element, attr)-target) <=Step)                    {settarget (); } Else if(Step < 0 && (parseint (GetStyle (element, attr))-target) <=Math.Abs (STEP))                    {settarget (); } Else{element.style[attr]= parseint (GetStyle (element, attr)) + step +Danwei; }                    //determines that the target value is not equal to the current value of the element, indicating that the animation has not reached the target value and changed flag to False                    if (parseint (target)! = parseint (GetStyle (element, attr))) flag = False; }            }            //Judge flag = true; The current value of the description element has reached the target value, you can stop the timer if (flag) {clearinterval (Element.timer);   Stop timer if (Obj.fn! = undefined) Obj.fn (); If the callback function is passed in, the callback function is executed after the animation is executed, and the queue animation } }, T); functionsettarget () {element.style[attr]= target +Danwei; }        functionsetopacity () {element.style.opacity= parseint (target)/100; Element.style.filter= ' alpha ' (opacity= ' + parseint (target) + ') '; }    }    return  This;};

HTML code

<id= "CESHSDF"> Test </div>

CSS Code

/* Test */ #ceshsdf {    width:100px;     height: 100px;     background-color: #ff340e;     position: absolute;     top: 100px;     Left: 100px;     opacity:1;     filter:Alpha (opacity=100);}

Front desk JS Code

// Test    $ (' #ceshsdf '). On_click (function  () {        $ (' #ceshsdf '). yi_dong_tou_ming ({            ' t ': 30 ,            ' Step ': Ten,            mul:{      // Sync Animation property, attribute value to object, inside object is, animation way: Target amount, combination of key value pair, only animated method plus target amount of key value pair                 ' W ': $,                ' h ': $,                ' o ': +}        }     );

The first thing to do is to introduce the library and the wrapper file

145th, JavaScript, sync animations