animation js

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
rakima001
Messages : 5
Enregistré le : 13 mars 2020, 13:08

animation js

Message par rakima001 » 13 mars 2020, 13:18

Bonjour tout le monde,
j'essaye d'animer deux vélos, le but c'est que dès que un disparaît l'autre apparaît sans fin, sauf quand on clique sur le bouton arrêter, mais c'est un vrai casse tête, si vous pouvez m'aider svp! voilà mon code:
code HTML:

Code : Tout sélectionner

<input type="button" id="demarrer" value="Démarrer">
		<input type="hidden" id="arreter"  value="Arrêter">
		<div id="animation">
			<div id="velo1">
				<img class="roue-arriere" src="images/roue.png" alt="">
				<img class="roue-avant"   src="images/roue.png" alt="">
				<img class="velo"         src="images/velo.png" alt="">
			</div>
			<div id="velo2">
				<img class="roue-arriere" src="images/roue.png" alt="">
				<img class="roue-avant"  src="images/roue.png" alt="">
				<img class="velo"  src="images/velo.png" alt="">
			</div>
		</div>
code JS;

Code : Tout sélectionner

window.addEventListener("load", function(){ 
			var animation = document.getElementById('animation');
			var velo1 = document.getElementById('velo1');
			var velo2 = document.getElementById('velo2');
			velo2.setAttribute('style','left : -348px; visibility : visible');
			velo1.style.border ="3px red solid";
			velo2.style.border ="3px black solid";
			
			var r_av = document.querySelector('.roue-avant');
			var r_a = document.querySelector('.roue-arriere');
			var r_av_velo2 = document.getElementsByClassName('roue-avant')[1];
			var r_a_velo2 = document.getElementsByClassName('roue-arriere')[1];
			var eDemarrer = document.getElementById("demarrer");
			var eArreter  = document.getElementById("arreter");
			var direction="aDroite";
			var i = 0;
			var j=0;
			var k = -348;
			var largeur = document.body.offsetWidth;
			var a= 0;
			console.log(largeur);
			function animation1(){
					//la rotation du vélo un
					i++;
					velo1.style.left = i + 'px';
					r_a.style.transform = "rotate(" + i + "deg)";
					r_av.style.transform = "rotate(" + i + "deg)";
				// si le velo un dépasse la largeur de l'écran, il disparaît progressivement
				if (i + velo1.offsetWidth  >= largeur){ 
					velo1.style.clipPath = "inset( 0 " + j + "px 0 0 )";
					j++;
					//velo2.setAttribute('style','visibility : visible');
					// rotation du vélo deux 
						velo2.style.left = k + 'px';
						r_a_velo2.style.transform = "rotate(" + k + "deg)";
						r_av_velo2.style.transform = "rotate(" + k + "deg)";
						k++;
					} 
				// si le vélo un est égale à la largeur de l ecran + 348(inset) le vélo recommence depuis le début 
				if(i+velo1.offsetWidth == largeur+348){
					i=-348;
					velo1.style.clipPath = "inset( 0 0 0 0 )";
				}
				
				 if (k + velo2.offsetWidth  >= largeur) { 
						velo2.style.clipPath = "inset( 0 " + a + "px 0 0)";
						a++;
					} 
					
				timerId = setTimeout(animation1, 10);
			}
			var timerId;
			// les bouttons pour arrêter pou demarrer l'animation
			eDemarrer.addEventListener("click", function () {
				eDemarrer.type = "hidden";
				timerId = setTimeout(animation1, 20);
				eArreter.type  = "button";
				
			});
			eArreter.addEventListener("click", function () { 
				eArreter.type  = "hidden";
				clearTimeout(timerId);
				eDemarrer.type = "button";
			});	




		});
Fichiers joints
velo.png
velo.png (227.23 Kio) Vu 3628 fois
roue.png
roue.png (230.77 Kio) Vu 3628 fois

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: animation js

Message par webmaster » 16 mars 2020, 11:33

Bonjour

J'ai récupéré les sources et l'animation des roues fonctionnent
Mais je pense qu'il manque des CSS pour positionner correctement les DIV :
https://www.toutjavascript.com/user/velo.html

En l'état je ne vois pas trop ce que le script doit faire
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

rakima001
Messages : 5
Enregistré le : 13 mars 2020, 13:08

Re: animation js

Message par rakima001 » 18 mars 2020, 12:06

merci pour ta réponse:
le style:

Code : Tout sélectionner

<style>
		html {
			background-color:aquamarine;
		}
		
		body {
			width: 80%;
			margin: auto;
			background: white;
		}

		input {
			margin: 20px;
			padding: 5px;
		}

		#animation {
			position: relative;	
			height: 200px;
		}
		
		#velo1, #velo2 {
			position: absolute;
			width: 342px;
			height: 200px;
		}

		img {
			position: absolute;
			display: block;
		}

		.velo {
			width: 100%;
		}
		
		.roue-arriere {
			bottom: 8px;
			left: 8px;
			width: 122px;
		}
		
		.roue-avant {
			bottom: 8px;
			left: 209px;
			width: 122px;
		}
		
		p {
			padding: 20px;
		}
	</style>

rakima001
Messages : 5
Enregistré le : 13 mars 2020, 13:08

Re: animation js

Message par rakima001 » 18 mars 2020, 12:13

normalement mon vélo 1 démarre dès qu'on click sur le button démarrer, et disparaît progressivement après et puis le vélo 2 apparaît et ainsi de suite, sauf que là mon vélo 1 n’apparaît que quand mon vélo 2 disparaît complètement, alors qu'il doit apparaître des que mon vélo 2 touche au div vert.
je remets le code à jour:

Code : Tout sélectionner

<script>
		window.addEventListener("load", function(){ 
			var animation = document.getElementById('animation');
			var velo1 = document.getElementById('velo1');
			var velo2 = document.getElementById('velo2');
			
			velo1.style.border ="3px red solid";
			velo2.style.border ="3px black solid";
			
			var r_av = document.querySelector('.roue-avant');
			var r_a = document.querySelector('.roue-arriere');
			
			var r_av_velo2 = document.getElementsByClassName('roue-avant')[1];
			var r_a_velo2 = document.getElementsByClassName('roue-arriere')[1];
			velo2.setAttribute('style','left : -348px;visibility : hidden');
			
			var eDuree    = document.getElementById("duree");
			var debut;

			var eDemarrer = document.getElementById("demarrer");
			var eArreter  = document.getElementById("arreter");
			
			var i = 0;
			var j=0;
			var k = -348;
			var largeur = document.body.offsetWidth;
			var a= 0;
			var y=0;

			function animation1(temps){
				if (debut === 0) {
					debut = temps;
				}
				var duree = temps - debut; 
				eDuree.innerHTML = Math.floor(duree/1000);
				
					i++;
					velo1.style.left = i + 'px';
					r_a.style.transform = "rotate(" + i + "deg)";
					r_av.style.transform = "rotate(" + i + "deg)"; 
					
				if (i + velo1.offsetWidth  >= largeur){ 
						velo1.style.clipPath = "inset( 0 " + j + "px 0 0 )";
						j++;
						velo2.setAttribute('style','visibility : visible');
						velo2.style.border ="3px black solid";
						velo2.style.left = k + 'px';
						r_a_velo2.style.transform = "rotate(" + k + "deg)";
						r_av_velo2.style.transform = "rotate(" + k + "deg)";
						k++;
				} 
				if(i + velo1.offsetWidth  >= largeur+348 ){
					velo1.setAttribute('style','left : -348px;visibility : hidden');
				}
				if (k + velo2.offsetWidth  >= largeur+348) { 
						i=-348;
						j=0;
						velo1.style.clipPath = "inset( 0 " + j + "px 0 0 )";
						velo1.setAttribute('style','left : -348px;visibility : visible');
						velo1.style.border ="3px red solid";
						velo2.setAttribute('style','visibility : hidden');
						k=-348;
						a=0;
						velo2.style.clipPath = "inset( 0 " + a + "px 0 0)"; 						
				}
				if(k + velo2.offsetWidth  >= largeur){
						velo2.style.clipPath = "inset( 0 " + a + "px 0 0)";
						a++;
				}
				requestId = requestAnimationFrame(animation1);
			}
			var requestId;
			
			eDemarrer.addEventListener("click", function () {
				eDemarrer.type = "hidden";
				debut = 0;
				requestId = requestAnimationFrame(animation1);
				eArreter.type  = "button";
			});
			eArreter.addEventListener("click", function () { 
				eArreter.type  = "hidden";
				cancelAnimationFrame(requestId);
				eDemarrer.type = "button";
			});	

		});

	</script>

Code : Tout sélectionner

<body>
		<input type="button" id="demarrer" value="Démarrer">
		<input type="hidden" id="arreter"  value="Arrêter">
		<div id="animation">
			<div id="velo1">
				<img class="roue-arriere" src="images/roue.png" alt="">
				<img class="roue-avant"   src="images/roue.png" alt="">
				<img class="velo"         src="images/velo.png" alt="">
			</div>
			<div id="velo2">
				<img class="roue-arriere" src="images/roue.png" alt="">
				<img class="roue-avant"   src="images/roue.png" alt="">
				<img class="velo"         src="images/velo.png" alt="">
			</div>
		</div>
		<p>Durée de l'animation: <span id="duree">0</span> s</p>
</body>

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: animation js

Message par webmaster » 22 mars 2020, 11:01

J'ai refait le test, mais il doit manquer une partie de script (le CSS je suppose). J'ai ca qui apparait :

Capture d’écran 2020-03-22 à 10.59.34.png
Capture d’écran 2020-03-22 à 10.59.34.png (105.16 Kio) Vu 3320 fois
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

rakima001
Messages : 5
Enregistré le : 13 mars 2020, 13:08

Re: animation js

Message par rakima001 » 23 mars 2020, 14:32

Code : Tout sélectionner

                html {
		background-color:aquamarine;
		}
		
		body {
			width: 80%;
			margin: auto;
			background: white;
		}

		input {
			margin: 20px;
			padding: 5px;
		}

		#animation {
			position: relative;	
			height: 200px;
		}
		
		#velo1, #velo2 {
			position: absolute;
			width: 342px;
			height: 200px;
		}

		img {
			position: absolute;
			display: block;
		}

		.velo {
			width: 100%;
		}
		
		.roue-arriere {
			bottom: 8px;
			left: 8px;
			width: 122px;
		}
		
		.roue-avant {
			bottom: 8px;
			left: 209px;
			width: 122px;
		}
		
		p {
			padding: 20px;
		}
et là?

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: animation js

Message par webmaster » 23 mars 2020, 16:37

Ha oui, l'animation et la rotation fonctionnent bien

Pour moi les 2 vélos se déplacent comme prévu.
https://www.toutjavascript.com/user/velo.html

Il faut sans doute améliorer le CSS clip de la zone principale, mais c'est presque bon.
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

rakima001
Messages : 5
Enregistré le : 13 mars 2020, 13:08

Re: animation js

Message par rakima001 » 23 mars 2020, 20:52

merci pour ta réponse, mais regardes bien, le velo rouge (la deuxième fois)n’apparaît que quand le vélo noir disparaît complètement, alors qu'il doit réapparaître progressivement en parallèle avec la disparition de l'autre.

Avatar du membre
webmaster
Administrateur du site
Messages : 179
Enregistré le : 28 févr. 2017, 15:19

Re: animation js

Message par webmaster » 26 mars 2020, 11:13

En effet, j'observe bien ce petit dysfonctionnement.
Je n'ai pas réussi a comprendre d'ou cela vient.

Ma recommendation : revoir le script ligne par ligne en ajoutant des commentaires sur l'utilité des variables, les affectations et les controles de largeur.
Cela devrait permettre je pense d'identifier une erreur sur un des tests...
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

Répondre