js animation learning (5)

9. Simultaneous movement of multiple attributes



The previous example is that each attribute moves independently. What if you want multiple attributes to move at the same time? For example, I want the width and height of a div to change at the same time in the onmouseover event. The following function is a separate widening:

window.onload=function(){
var ob1=document.getElementById('div1');
ob1.onmouseover=function(){
startMove(ob1,'width',400);
}
}

One idea is to add a startMove below startMove:

window.onload=function(){
var ob1=document.getElementById('div1');
ob1.onmouseover=function(){
startMove(ob1,'width',400);

　　　　　 startMove(ob1,'height',400);
}
}

It turns out that this idea is wrong. Writing this way will only change the height. The width has not changed. why? Because the startMove function initially closes the timer, when the first startMove function has just started executing, the second startMove has already started executing, and the close timer function of the second startMove overwrites the timer of the first startMove. Therefore, the width of the object cannot change, only the height changes. So how to solve it? You need to use json here:

var json={a:12,b:13};
for(var i in json){
alert(i);
alert(json[i]);
}

The values ​​in json appear in pairs, and each pair is a variable and the value of the variable. You can use a for in loop to obtain each pair of variables and corresponding values. The above program pops up a,12,b,13 in sequence.

Let's take a look at the stareMove framework and find that the "property" and "target value" in the parameters are a pair of values, which means that one startMove can only achieve changes in one pair of values. How to implement changes to multiple pairs of values? Let’s take a look at startMove like this:

startMove(obj,{attr1:target1,attr2:target2},fn), the blue part is in the form of json, so based on the original startMove, change the blue Replace the part with json; replace the target in the program with json[attr] (which attribute is the target value of that attribute). The changed startMove function is as follows: (Changes were made on lines 1, 4, 13, and 16)

function startMove(obj,json,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         for(var attr in json){
             //1.取当前值
             var icur=0;//icur返回物体样式属性值的大小
             if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
                 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
             } else {
                 icur=parseInt(getStyle(obj,attr));
             }
             //2.算速度
             var speed=(json[attr]-icur)/8;//分母为比例系数K，可调
             speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
             //3.检测运动是否停止
             if (icur==json[attr]) {
                 clearInterval(obj.timer);
                 if(fn){//上一个运动停止后判断一下是否还有下一个运动
                     fn();
                 }
             } else {
                 if (attr=='opacity') {
                     obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                     obj.style.opacity=(icur+speed)/100;//火狐浏览器
                 } else {
                     obj.style[attr]=icur+speed+'px';
                 }
             }
         }
     },30)
 }

The following is a div that calls the startMove function to achieve the effect of changing the width and height at the same time:

<style type="text/css">
     #div1{
         width: 200px;
         height: 200px;
         background: red;
         border: 2px solid black;
         filter: alpha(opacity:30);
         opacity: 0.3;
     }
 </style>

<script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,{width:400,height:400});//json格式
     }
 }    
 </script>

You can add a pair of transparency to achieve simultaneous changes in width, height, and transparency:

<script type="text/javascript">
 window.onload=function(){
     var ob1=document.getElementById(&#39;div1&#39;);
     ob1.onmouseover=function(){
         startMove(ob1,{width:400,height:400,opacity:100});
     }
 }    
 </script>

Problems with this framework: When I want to change the width to 201, the height to 400, and the transparency to 100, A problem will arise: the width does become 201, but the height and transparency are far from reaching the target values, and the movement stops. The reason is that the timer is turned off in line 17. In the original program, as long as one attribute value reaches the target value, the timer is turned off. There is no judgment on whether each attribute reaches the target value. So when the width reaches the target value and the height and transparency have not reached the target value, the timer is turned off. Solution: We need to determine that all attributes have reached the target value before closing the timer. (There are changes after line 2 and line 17)

function startMove(obj,json,fn) {//元素，改变的样式属性，达到的目标值，回调函数
     var flag=true;//定义一个标杆，假设所有运动都达到了目标值
     clearInterval(obj.timer);
     obj.timer=setInterval(function(){
         for(var attr in json){
             //1.取当前值
             var icur=0;//icur返回物体样式属性值的大小
             if (attr=='opacity') {//如果属性是透明度，透明度的返回值是零点几的小数
                 icur=Math.round(parseFloat(getStyle(obj,attr))*100);//round函数避免透明度值在小数之间来回跳动
             } else {
                 icur=parseInt(getStyle(obj,attr));
             }
             //2.算速度
             var speed=(json[attr]-icur)/8;//分母为比例系数K，可调
             speed=speed>0?Math.ceil(speed):Math.floor(speed);//缓冲速度要取整，不然移动不到终点就停止
             //3.检测运动是否停止
             if (icur!=json[attr]) {//如果不是所有的运动都达到目标值
                 flag=false;
             }
             if (attr=='opacity') {//没达到目标值的继续运动
                 obj.style.filter='alpha(opacity:'+(icur+speed)+')';//IE浏览器
                 obj.style.opacity=(icur+speed)/100;//火狐浏览器
             } else {
                 obj.style[attr]=icur+speed+'px';
             }
             
             if(flag){//如果所有的运动都达到了目标值，再关闭定时器，然后看看有没有链式运动
                 clearInterval(obj.timer);
                 if(fn){
                     fn();
                 }
             }
         }
             
     },30)
 }

Now this modified framework is a perfect framework. Some small animations commonly used on websites can be realized with this framework.

The above is the content of js animation learning (5). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!