Donner l'illusion d'une image qui s'éloigne et disparait
Bonjour,
J'ai un problème pour effectuer un rapetissement progressif d'une image au fur et à mesure qu'elle se rapproche du centre de l'écran, sachant qu'elle démarre son déplacement en bas à gauche de l'écran, et doit se diriger vers le centre horizontal et vertical, tout en réduisant sa taille dans un rapport normal (pas d'écrasement visuel de sa hauteur ni sa largeur, et quand l'image est réduite à une trés petite taille je la fais disparaitre en effaçant l'écran et je recommence l'anim à son début.
c'est une image sur un canvas ;)
Code:
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
| var animtour=0;
miWidth=parseInt(screen.width/2);
miHeight=parseInt(screen.height/2);
function anime(){
// Animation de l'image.
if(animtour==0){
// Efface l'écran CTX2.
ctx2.clearRect(PX1-10,PY1-10,W1+20,H1+20);
// Affiche l'image à la nouvelle position.
ctx2.drawImage(image1,PX1,PY1,W1,H1);
/* Partie à trouver pour reussir l'effet désiré
// Incrémente la position de l'image.
if(PX1<miWidth){
PX1+=?
}
if(PY1>miHeight){
PY1-=?
}
W1=?
H1=?
*/
// Détecte quand l'image est au centre de l'écran.
if ((PX1>=miWidth)&&(PY1<=miHeight)) {
// Stoppe le déplacement.
animtour=1;
// Efface l'écran CTX2.
ctx2.clearRect(0, 0, screen.width, screen.height);
}
}
} |
EDIT :
J'ai trouvé une partie du code manquant, la partie qui rapetisse l'image en pourcentages ;)
Code:
1
2
3
4
5
6
7
8
| dec_W1=0.96;
dec_H1=0.96;
tmpW=W1;
tmpH=H1;
W1=parseFloat(W1*dec_W1);
H1=parseFloat(H1*dec_H1);
console.log(W1+" x "+H1); |
Mon code fonctionne, super, c'est résolu ;)
Mon image ne vas pas directement vers le centre mais juste à coté puis se dirige vers le centre, mais ça me va ;)
