Page 1 sur 1

animation js

Posté : 13 mars 2020, 13:18
par rakima001
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";
			});	




		});

Re: animation js

Posté : 16 mars 2020, 11:33
par webmaster
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

Re: animation js

Posté : 18 mars 2020, 12:06
par rakima001
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>

Re: animation js

Posté : 18 mars 2020, 12:13
par rakima001
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>

Re: animation js

Posté : 22 mars 2020, 11:01
par webmaster
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 14920 fois

Re: animation js

Posté : 23 mars 2020, 14:32
par rakima001

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à?

Re: animation js

Posté : 23 mars 2020, 16:37
par webmaster
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.

Re: animation js

Posté : 23 mars 2020, 20:52
par rakima001
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.

Re: animation js

Posté : 26 mars 2020, 11:13
par webmaster
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...