Un problème avec l'animation de taille JavaScript

Je suis en train d'écrire une librairie JavaScript et j'ai rencontré un problème, j'ai une fonction qui redimensionne les éléments, ça fonctionne bien mais j'ai aussi une version animée qui les redimensionne sur un délai spécifié. Le script semble geler quand il est lancé et il semble que ce soit à mon tour, voici mon code.Un problème avec l'animation de taille JavaScript

// Resize in timeframe 
// Work out distance 
var widthDiff = width - element.offsetWidth; 
var heightDiff = height - element.offsetHeight; 

// Work out pixels per milisecond 
var widthppm = widthDiff/timeframe; 
var heightppm = heightDiff/timeframe; 

// Set up times 
var d = new Date(); 
var endtime = d.getTime() + timeframe; 

// Get the original width and height 
var oldwidth = element.offsetWidth; 
var oldheight = element.offsetHeight; 

var iteration; 

// Loop through until done 
while(d.getTime() >= endtime) 
{ 
    iteration = timeframe - (endtime - d.getTime()); 
    element.style.width = oldwidth + (iteration * widthppm) + 'px'; 
    element.style.height = oldheight + (iteration * heightppm) + 'px'; 
}

Tout ce que je peux vous dire maintenant que sont les arguments (élément, largeur, hauteur, DELAIS) fonctionnent très bien, il est tombé à mon algorithme. Toute aide sera super, merci!

Source

2010-10-25 Olical

Il devrait être d.getTime() <= endtime.
Accent mis sur <= au lieu de >=.

De plus, vous devez obtenir une nouvelle horodatage dans la boucle, comme d.getTime() sera toujours le même (le temps au moment où il a été créé) ..

while(d.getTime() <= endtime) 
{ 
    iteration = timeframe - (endtime - d.getTime()); 
    element.style.width = oldwidth + (iteration * widthppm) + 'px'; 
    element.style.height = oldheight + (iteration * heightppm) + 'px'; 
    d = new Date(); 
}

Mais vous devez utiliser un timeout/intervalle pour animer et non une boucle car cela bloquerait l'exécution du reste des scripts.

Voici quelques tutoriels sur l'animation avec setTimeout et setInterval

Source

2010-10-25 22:15:46

Nope, qui n'a pas été mais je vous remercie de le signaler. Je ne peux pas croire que j'ai raté celui-là. Il apparaît toujours comme un script qui ne répond pas. – Olical

@ Wolfy87, ajouté un peu plus d'informations .. le 'd.getTime()' renvoie la même valeur toujours .. ce n'est pas un temporisateur en cours .. juste une instance de temps, montrant l'heure à laquelle il a été créé .. –

La variable d dans chaque itération de la boucle a fonctionné, même si elle ne s'anime toujours pas, elle reste là jusqu'à ce que le temps soit écoulé et ensuite se déplace. Merci de votre aide! – Olical

Un problème avec l'animation de taille JavaScript

Répondre

Questions connexes