Façon de déplacer une grande image en douceur?

J'ai une image très large d'une scène enneigée avec quelques arbres, et un élément au-dessus d'une boule de neige. Le jeu consiste à faire sauter la boule de neige au-dessus des arbres. Donc, j'ai l'image se déplaçant vers la gauche comme une sorte de défilement latéral, mais peu importe ce que j'essaie, c'est très laggy. J'ai un ensemble de clauses if à vérifier pour voir si la balle est entrée en collision avec un arbre, et j'ai essayé d'utiliser setInterval, watch.js et requestAnimationFrame.js sans trop de chance.Façon de déplacer une grande image en douceur?

Voici un extrait de ce que je fais

$('#StartScroller').click(function() { 
 
     sideScroller.css('left', '-10000px'); 
 
     snowball.css({ 
 
     'transform': 'rotate(12000deg)', 
 
     'width': '100px', 
 
     'height': '100px' 
 
     });

$('sideScroller').watch('left', function(){ 
 
\t //1 
 
\t if(
 
\t (sideScroller.position().left < -960 
 
\t && sideScroller.position().left > -1200 + mobileDelay) 
 
\t && (snowball.css('bottom') == '75px') 
 
\t){hitTree()}

Quelqu'un sait d'une alternative qui le rendre plus lisse? C'est un peu mal aux yeux maintenant.

Source

2015-12-22 Jordan Carter

Suggestion pour l'utilisation de translate3d ou d'autres méthodes 3d. Parce que les méthodes 3D ne causent pas de repeints et donc pas de bégaiement/lag. –

Quelle est la cause du décalage? L'animation? Votre extrait de logique de collision? Ou les deux? Je peux imaginer que votre fragment de collision dans l'intervalle est suffisant pour le faire ralentir –

Il a semblé être l'animation. Dès que j'ai utilisé une transformation au lieu du positionnement à gauche, ça s'est éclairci! Je ne serais pas surpris si setInterval cause quelques problèmes, cependant. –

Je viens de trouver une solution très simple: Au lieu d'utiliser le positionnement à gauche pour déplacer l'image, j'ai utilisé transform: translate. BEAUCOUP mieux. Pourtant, j'aimerais entendre des alternatives à l'utilisation de setInterval pour surveiller les changements. Yoram a mentionné une traduction en 3D. J'ai essayé la traduction et la traduction régulièresX, mais je ne suis pas sûr si je remarque une différence.

Source

2015-12-22 08:58:27

Façon de déplacer une grande image en douceur?

Répondre

Questions connexes