js-Animationslernen (5)

9. Mehrere Attribute werden gleichzeitig verschoben



Das vorherige Beispiel ist, dass sich jedes Attribut unabhängig voneinander bewegt. Was ist, wenn mehrere Attribute gleichzeitig verschoben werden sollen? Ich möchte beispielsweise, dass sich die Breite und Höhe eines Divs im Onmouseover-Ereignis gleichzeitig ändern. Die folgende Funktion ist eine separate Erweiterung:

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

Eine Idee ist, einen startMove unterhalb von startMove hinzuzufügen:

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

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

Es stellt sich heraus, dass diese Idee nur falsch ist Die Höhe hat sich geändert, die Breite jedoch nicht. Warum? Da die startMove-Funktion den Timer zunächst schließt, hat die zweite startMove-Funktion bereits mit der Ausführung begonnen. Die schließende Timer-Funktion des zweiten startMove überschreibt daher die Breite des Objekts kann sich nicht ändern, nur die Höhe ändert sich. Wie kann man es also lösen? Hier müssen Sie JSON verwenden:

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

Die Werte in JSON erscheinen paarweise, und jedes Paar ist eine Variable und der Wert der Variablen. Sie können eine for-in-Schleife verwenden, um jedes Variablenpaar und die entsprechenden Werte abzurufen. Das obige Programm zeigt nacheinander a,12,b,13 an.

Schauen wir uns das stareMove-Framework an und stellen fest, dass das „Attribut“ und der „Zielwert“ in den Parametern ein Wertepaar sind, was bedeutet, dass ein startMove nur eine Änderung eines Wertepaars erreichen kann . Wie implementiert man Änderungen an mehreren Wertepaaren? Schauen wir uns startMove wie folgt an:

startMove(obj,{attr1:target1,attr2:target2},fn), der blaue Teil hat die Form von JSON, also basierend auf dem ursprünglichen startMove, ändern das Blaue Ersetzen Sie den Teil durch json; ersetzen Sie das Ziel im Programm durch json[attr] (welches Attribut der Zielwert dieses Attributs ist). Die geänderte startMove-Funktion lautet wie folgt: (Zeilen 1, 4, 13 und 16 wurden geändert)

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)
 }

Das Folgende ist die Auswirkung eines Div-Aufrufs der startMove-Funktion, um die Breite und Höhe zu ändern gleichzeitig:

<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>

Sie können ein Paar Transparenz hinzufügen, um gleichzeitige Änderungen in Breite, Höhe und Transparenz zu erreichen:

<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>

Probleme mit diesem Framework: Wann Ich möchte die Breite auf 201 ändern, die Höhe ändert sich. Wenn der Wert 400 ist und die Transparenz auf 100 wechselt, tritt ein Problem auf: Die Breite wird zwar 201, aber die Höhe und Transparenz erreichen bei weitem nicht die Zielwerte und die Bewegung stoppt. Der Grund dafür ist, dass der Timer in Zeile 17 ausgeschaltet ist. Im Originalprogramm wird der Timer ausgeschaltet, solange ein Attributwert den Zielwert erreicht. Es gibt keine Beurteilung, ob jedes Attribut den Zielwert erreicht. Wenn also die Breite den Zielwert erreicht und die Höhe und Transparenz den Zielwert nicht erreicht haben, wird der Timer ausgeschaltet. Lösung: Wir müssen feststellen, dass alle Attribute den Zielwert erreicht haben, bevor wir den Timer schließen. (Es gibt Änderungen nach Zeile 2 und Zeile 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)
 }

Jetzt ist dieses modifizierte Framework ein perfektes Framework. Einige kleine Animationen, die häufig auf Websites verwendet werden, können mit diesem Framework implementiert werden.

Das Obige ist der Inhalt des js-Animationslernens (5). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!