CONNEXION
  • RetourJeux
    • Sorties
    • Hit Parade
    • Les + populaires
    • Les + attendus
    • Soluces
    • Tous les Jeux
    • Gaming
  • RetourActu Gaming
    • News
    • Astuces
    • Tests
    • Previews
    • Toute l'actu gaming
  • RetourBons plans
    • Bons plans
    • Bons plans Smartphone
    • Bons plans Hardware
    • Bons plans Image et Son
    • Bons plans Amazon
    • Bons plans Cdiscount
    • Bons plans Decathlon
    • Bons plans Fnac
    • Tous les Bons plans
  • RetourJVTech
    • Actus High-Tech
    • Intelligence Artificielle
    • Smartphones
    • Mobilité urbaine
    • Hardware
    • Image et son
    • Tutoriels
    • Tests produits High-Tech
    • Guides d'achat High-Tech
    • JVTech
  • RetourCulture
    • Actus Culture
    • Culture
  • RetourVidéos
    • A la une
    • Gaming Live
    • Vidéos Tests
    • Vidéos Previews
    • Gameplay
    • Trailers
    • Chroniques
    • Replay Web TV
    • Toutes les vidéos
  • RetourForums
    • Hardware PC
    • PS5
    • Switch 2
    • Xbox Series
    • Switch
    • Pokemon pocket
    • FC 25 Ultimate Team
    • League of Legends
    • Tous les Forums
  • PC
  • PS5
  • Xbox Series
  • Switch 2
  • PS4
  • One
  • Switch
  • iOS
  • Android
  • MMO
  • RPG
  • FPS
En ce moment Genshin Impact Valhalla Breath of the wild Animal Crossing GTA 5 Red dead 2
Liste des sujets

[JavaScript] Déplacement d'une image

Pseudo supprimé
Pseudo supprimé 08 mars 2014 à 18:06:18

Bonjour! :)
Je viens vous posez une question qui peut paraître extrêmement bête, mais après une après midi de recherche sans sucés, j'en ai un peu marre :sleep:
Donc voilà, j'ai une image, et j'aimerai qu'elle fasse des aller et retour sur une ligne droite sans aucune action requise pour déclencher ceci (clic de souris, flèche de clavier...). Si quelqu'un sais comment faire, se serai vraiment très sympa de m'aider.
Merci d'avance! :)

XzZy
XzZy
Niveau 10
08 mars 2014 à 18:34:34

Tu peux regarder ici:

https://developer.mozilla.org/fr/docs/Web/API/window.requestAnimationFrame

Je suis pas un pro de JS, mais je crois que c'est la méthode qu'on utilise pour faire des animations.

Pseudo supprimé
Pseudo supprimé 08 mars 2014 à 18:36:37

Merci, je vais essayé ça!

Pseudo supprimé
Pseudo supprimé 08 mars 2014 à 19:09:40

Ça ne marche pas, mais je ne sais pas du tout d'où viens l’erreur...

XzZy
XzZy
Niveau 10
08 mars 2014 à 22:01:18

Voilà un petit exemple:

http://jsfiddle.net/4RQ8n/11/

Pseudo supprimé
Pseudo supprimé 09 mars 2014 à 15:59:31

Sinon c'est faisable en CSS3 avec des fonctions plus jolies que des mouvements linéaires.

Pseudo supprimé
Pseudo supprimé 10 mars 2014 à 20:08:26

XzZy -> Il faut le déclencher avec quel événement?

ManBoy -> Je ne connais pas du tout le css3

XzZy
XzZy
Niveau 10
10 mars 2014 à 22:05:48

En fait il y a pas vraiment d’événement à déclencher.

On va dire qu'il y a un "événement" (qu'on va appeler tick) qui se déclenche environ 60 fois par seconde tout le temps (je penses qu'elle s’arrête quand tu passes à un autre onglet par exemple, mais je ne suis pas certain).

Et quand tu passes une fonction à requestAnimationFrame, le navigateur va l'appeler au prochain "tick".

L'astuce c'est que une fois qu'on arrive à la fin de la fonction, on peut directement repasser notre fonction pour que le navigateur l’exécute le plus tôt possible (au prochain "tick").

Normalement, on calcule le délai entre les appels à l'aide de la variable <time>, pour pouvoir avoir une vitesse constante.
Car dans mon exemple, si par exemple le navigateur rame, la vitesse de l'animation va ralentir.

Pseudo supprimé
Pseudo supprimé 11 mars 2014 à 12:52:30

Ok merci de la précision :p
Bon, j'ai essayé sur notepad++ sans rien changer à ton code (sauf l'image). Quand je l'ouvre firefox, l'image est bien là mais elle ne bouge pas. Par contre sur jsfiddle tout marche très bien. Et pourtant je ne vois pas d'érreur dans le code. Sa pourrai venir d'où?
Voilà mon code, au cas ou.

<!DOCTYPE html>

<html>
<head>
<script type="text/javascript">
var x = 0;
var dir = 5;
var img = document.getElementById("dalek");

function step(){
x += dir;
if(x > 300 || x < 0){
dir*=-1;
}
img.style.left = ""+x+"px";
requestAnimationFrame(step)
}

requestAnimationFrame(step);
</script>
<style>
#dalek {
position: absolute;
left: 0px;
top: 0px;
}
</style>
</head>

<body>
<img id="dalek" src="http://png-2.findicons.com/files/icons/1265/d
octor_who/256/dalek.png"></img>

</body>

</html>

Pseudo supprimé
Pseudo supprimé 11 mars 2014 à 12:57:41
  • function step(time){
Pseudo supprimé
Pseudo supprimé 12 mars 2014 à 18:55:01

Comme le script est dans le head, il sera exécuté trop tôt. Ainsi ce que tu veux accéder avec getElementById. Sois tu migres ‹script› à la fin du body soit tu englobes tout dans une fonction appellée avec un onload. :ok:

Ou sinon il se peut que RequestAnimFrame ne doit pas encore être considéré comme un standard. Je pense qu'il faut que tu utilises mozRequest...

Pseudo supprimé
Pseudo supprimé 13 mars 2014 à 13:20:18

Je l'ai mis à la fin de body, et ça marche, mais seulement avec chrome.

Pseudo supprimé
Pseudo supprimé 13 mars 2014 à 16:22:58

Bon, maintenant que j'essaye de l'intégré dans mon vraie code, ça ne marche plus... >.<

Pseudo supprimé
Pseudo supprimé 13 mars 2014 à 20:18:24

Bon maintenant, tout marche impec', mais toujours uniquement sur chrome.

Pseudo supprimé
Pseudo supprimé 14 mars 2014 à 22:53:11

Sûrement à cause du problème que j'ai évoqué. Va voir des tutos sur le request animation :ok:

Sous forums
  • Aide à l'achat Mac
  • Création de Jeux
  • Linux
  • Programmation
  • Création de sites web
  • Internet
  • Steam Deck
  • Macintosh
  • Hardware
La vidéo du moment