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");} |
Animation javascript lente
Répondre avec citation
Envoyé par dragonno
mais c'était un test et je pensai le nettoyer après
Partager