js animation apprentissage (5)

9. Plusieurs attributs se déplacent en même temps



L'exemple précédent est que chaque attribut se déplace indépendamment. Que se passe-t-il si vous souhaitez que plusieurs attributs se déplacent en même temps ? Par exemple, je souhaite que la largeur et la hauteur d'un div changent en même temps lors de l'événement onmouseover. La fonction suivante est un élargissement distinct :

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

Une idée est d'ajouter un startMove sous startMove :

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

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

Il s'avère que cette idée est fausse. Écrire comme ça uniquement. la hauteur a changé, mais pas la largeur. Pourquoi? Étant donné que la fonction startMove ferme initialement le minuteur, lorsque la première fonction startMove vient de commencer à s'exécuter, le deuxième startMove a déjà commencé à s'exécuter et la fonction de minuterie de fermeture du deuxième startMove écrase le minuteur du premier startMove. Par conséquent, la largeur du timer. l'objet ne peut pas changer, seule la hauteur change. Alors comment le résoudre ? Vous devez utiliser json ici :

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

Les valeurs en json apparaissent par paires, et chaque paire est une variable et la valeur de la variable. Vous pouvez utiliser une boucle for in pour obtenir chaque paire de variables et les valeurs correspondantes. Le programme ci-dessus affiche a, 12, b, 13 dans l'ordre.

Jetons un coup d'œil au framework stareMove et constatons que la "propriété" et la "valeur cible" dans les paramètres sont une paire de valeurs, ce qui signifie qu'un startMove ne peut apporter des modifications que dans une paire de valeurs. Comment implémenter des modifications sur plusieurs paires de valeurs ? Jetons un coup d'œil à startMove comme ceci :

startMove(obj,{attr1:target1,attr2:target2},fn), la partie bleue est sous la forme de json, donc basée sur le startMove original, changez le bleu Remplacez la pièce par json ; remplacez la cible dans le programme par json[attr] (quel attribut est la valeur cible de cet attribut). La fonction startMove modifiée est la suivante : (Les lignes 1, 4, 13 et 16 ont été modifiées)

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

Ce qui suit est l'effet d'un div appelant la fonction startMove pour modifier la largeur et la hauteur à en même temps :

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

Vous pouvez ajouter une paire de transparences pour obtenir des changements simultanés de largeur, de hauteur et de transparence :

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

Problèmes avec ce framework : Quand Je veux changer la largeur à 201, la hauteur change. Lorsque la valeur est de 400 et la transparence passe à 100, un problème survient : la largeur devient bien 201, mais la hauteur et la transparence sont loin d'atteindre les valeurs cibles, et le mouvement s'arrête. La raison en est que le minuteur est désactivé à la ligne 17. Dans le programme d'origine, tant qu'une valeur d'attribut atteint la valeur cible, le minuteur est désactivé. Il n'y a aucun jugement quant à savoir si chaque attribut atteint la valeur cible. Ainsi, lorsque la largeur atteint la valeur cible et que la hauteur et la transparence n'ont pas atteint la valeur cible, le minuteur est désactivé. Solution : Nous devons déterminer que tous les attributs ont atteint la valeur cible avant de fermer le minuteur. (Il y a des changements après la ligne 2 et la ligne 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)
 }

Maintenant, ce framework modifié est un framework parfait Certaines petites animations couramment utilisées sur les sites Web peuvent être implémentées en utilisant ce framework.

Ce qui précède est le contenu de l'apprentissage de l'animation js (5). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !