Bonjour, j'essai de faire une animation de l'échelle de 2 DIV en meme temps. J'ai crée une fonction qui marche mais c'est un peu lent je voudrai savoir si quelqu'un pouvait me donner son avis. Voici le code:

Le HTML
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div id="DIVA" style="width:636px;position:absolute;top:130px;left:250px;background-color:darkgray;-moz-transform:matrix(1,0,0,1,0,0);-webkit-transform:matrix(1,0,0,1,0,0);-ms-transform:matrix(1,0,0,1,0,0);-o-transform:matrix(1,0,0,1,0,0);transform:matrix(1,0,0,1,0,0);"></div>
<div id="DIVB" style="width:636px;position:absolute;top:450px;left:250px;background-color:darkgray;-moz-transform:matrix(0.5,0,0,0.5,0,0);-webkit-transform:matrix(0.5,0,0,0.5,0,0);-ms-transform:matrix(0.5,0,0,0.5,0,0);-o-transform:matrix(0.5,0,0,0.5,0,0);transform:matrix(0.5,0,0,0.5,0,0);"></div>
<div id="bouton" style="position:absolute;height:100px;width:75px;background-color:yellow; right:0px;top:0px;border:1px solid"></div>

LE JAVASCRIPT

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
for (var i=1;i<50;i++) {
	var t=document.createElement("DIV");
	t.className="DIVAx";
	t.innerHTML=i;
	document.getElementById("DIVA").appendChild(t);
        document.getElementById("DIVB").appendChild(t);
}
 
var courbes = {
	sin:function (s) {return Math.sin(Math.PI*s/2)}
}
 
var Q = {
        timers:[null,null],
        iD:function (t) {return document.getElementById(t);},
}
 
function retrieveScale(q,what) {
	var elem=q.iD(what);      
        //switch fonction du navigateur enlevé pour gagner de la place
        if (elem.style.webkitTransform) {var sw=1;}
        if (parseFloat(elem.style.webkitTransform.substr(7,1))==0) {   //l'input est du type "matrix(X,0,0,Y,0,0)" si X est 0.5 ca va chercher le .5 sinon ça prend que X
		var sinit=parseFloat(elem.style.webkitTransform.substr(7,3));
	}
	else {
		var sinit=parseFloat(elem.style.webkitTransform.substr(7,1));
	}
        return [sinit,sw];//renvoie la scale initiale et le type de navigateur (pour MozTransform,msTranform,webkitTransform.....)
}
 
function incDec(q,what,What) {
	var sinitA=retrieveScale(q,what)[0];
	var s=retrieveScale(q,What);
	var sinitB=s[0];
	var sw=s[1];
	if (sinitA<1) {
		change_scale(q,what,400,1,0,sw,sinitA);//le 0 pour définir le 1er timer de Q.timers
		change_scale(q,What,600,0.5,1,sw,sinitB);//le 1 pour définir le 2er timer de Q.timers
	}
	else {
		change_scale(q,what,400,0.5,0,sw,sinitA);
		change_scale(q,What,600,1,1,sw,sinitB);
	}
}
 
function change_scale(q,what,idur,sfinal,o,sw,sinit) {
	var t0=new Date()*1;
	var elem=q.iD(what);
	var howmuch=sfinal-sinit;
	var dlta=0;
	if (!q.timers[o]) {
		q.timers[o]=setInterval(
			function () {
				var tx=new Date()*1-t0;
				if (tx<idur) {
					var icur=courbes.sin(dlta);
					dlta=dlta+13/idur;	
					elem.style.webkitTransform="matrix("+(sinit+howmuch*icur)+",0,0,"+(sinit+howmuch*icur)+",0,0)";
                                        //switch fonction du navigateur supprimé pour gagner de la place
				}
				else {
					elem.style.webkitTransform="matrix("+sfinal+",0,0,"+sfinal+",0,0)";
                                        //switch fonction du navigateur supprimé pour gagner de la place
					clearInterval(q.timers[o]);
					q.timers[o]=false;
				}
			},10);
		}
	}
 
        document.getElementById("bouton").onclick=function() {incDec(Q,"DIVA","DIVB");}

Donc j'ai enlevé le détection de navigateur donc ça devrait marcher seulement sur chrome et safari.

Voila je n'arrive pas à le rendre vraiment fluide, je ne sais pas si c'est à cause d'un PC trop lent ou si c'est un problème de réglage du setInterval. Est-ce que quelqu'un saurait m'aider à l'améliorer ??

(EDIT: ça à l'air de marcher plutot bien avec MozTransform sur mozilla et msTransform sur IE10 mais chrome/safari reste assez saccadé...)

Merci