animation js

rakima001 · 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";
			});	




		});

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

rakima001 · 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 · 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>

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 (105.16 Kio) Vu 25579 fois

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

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.

rakima001 · 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.

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...

Forums Tout JavaScript

animation js

animation js

Re: animation js

Re: animation js

Re: animation js

Re: animation js

Re: animation js

Re: animation js

Re: animation js

Re: animation js