As soon as you hear this name, you will know that the effects of this framework can basically be achieved online. In fact, the previous motion framework still had limitations, that is, several values cannot be moved together.
So how to solve this problem? Let's take a look at the previous sports framework
function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; }}function startMove(obj, attr, iTarget) { clearInterval(obj.time); obj.time = setInterval(function() { var cur = 0; if (attr == 'opacity') { cur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { cur = parseInt(getStyle(obj, attr)); } var speed = (iTarget - cur) / 6; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if (cur == iTarget) { clearInterval(obj.time); } else { if (attr == 'opacity') { obj.style.filter = 'alpha(opacity=' + cur + speed + ')'; obj.style.opacity = (cur + speed) / 100; } else { obj.style[attr] = cur + speed + 'px'; } } } }, 30);}How to modify it? It's actually very simple. In the past frameworks, you could only pass one style and one value at a time. Then now change these into a json object. I believe everyone will understand.
When we call it, startMove(oDiv,{width:200,height:200}); if necessary, add the callback function. So let's take a look at how the code is modified.
function startMove(obj, json, fnEnd){ var MAX=18; //Every timer is called, there is only one timer working (the existing timer is turned off when the movement starts) // and the timer of the current object is closed or turned on, which prevents conflicts with other timers on the page, so that each timer does not interfere with each other clearInterval(obj.timer); obj.timer=setInterval(function (){ var bStop=true; // Assuming: all values have reached for(var name in json) { var iTarget=json[name]; // Target point// Handle transparency, you cannot use parseInt, otherwise it will be 0 if(name=='opacity') { // *100 There will be error 0000007, etc., so you need to use Math.round() to round var cur=Math.round(parseFloat(getStyle(obj, name))*100); } else { var cur=parseInt(getStyle(obj, name)); // cur The current moving value} var speed=(iTarget-cur)/5; // The smaller the speed of the object, the slower the movement/5: Custom number speed=speed>0?Math.ceil(speed):Math.floor(speed); if(Math.abs(speed)>MAX)speed=speed>0?MAX:-MAX; if(name=='opacity') { obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE obj.style.opacity=(cur+speed)/100; //ff chrome } else { obj.style[name]=cur+speed+'px'; } // A certain value is not equal to the target point if(cur!=iTarget) { bStop=false; } } // The target point has been reached if(bStop) { clearInterval(obj.timer); if(fnEnd) //Only this function is passed, call { fnEnd(); } } } }, 20);}Why are there any assumptions about bstop?
In fact, if I call startMove(oDiv,{width:101,height:200}); the width becomes 101, the movement has been completed, the height has not reached, but we may have turned off the current timer. The exercise has ended and a bug will occur in special circumstances. Let's explain:
In fact, it takes all the movement to turn off the timer before it reaches the end. Conversely, if there is nothing that is not possible, then turn it off. Programmatically define a boolean value, which is true at the beginning, assuming
All values have arrived. If there is a value that does not equal the target point, bstop is false. After the entire cycle is over, bstop is in ture, which means that all the movements have been completed, and the timer is turned off at this time.
Then this motion framework has basically been completed, and css2 is not applicable to css3.
Summarize:
The evolution of the motion framework
startMove(iTarget) motion frame
startMove(obj,iTarget) Multi-object
startMove(obj,attr,iTarget) any value
startMove(obj,attr,iTarget,fn) chain motion
startMove(obj,json,fn) perfect sports
O(∩_∩)O Thank you ~