18041 sujets

Questions générales et questions de débutants

Trouvez-vous ce sujet intéressant pour un tuto à l'avenir?




Création d'une horloge en SVG [CSS et JS?]

Bonjour,
Je me tourne vers vous, webmasters expérimentés ou débutants (comme moi), pour vous demander plus ou moins un tutoriel pour animer une horloge analogique créée en SVG.
Je m'y connais assez bien en CSS, et très mal en JS... J'aimerai bien que les aiguilles (dont la trotteuse) tournent "indéfiniment", c'est-à-dire que je souhaite que le trotteuse ne marque aucun arrêt à chaque seconde, mais fasse le tour du cadran en 60s. Idem pour les minutes qui font le tour en 3600s. Et pour les heures qui font le tour en 43200s.
J'ai des idées assez décousues, alors je les mets, si ça peut aider certains d'entre vous à me répondre ^^ Bien sûr, je ne met pas tous les préfixes pour ne pas surcharger les lignes dans mes propositions Smiley cligne 
.aiguille { 
transform-origin: <coordonnées du centre du cadran>; 
transition-property: transform;
transform: rotate(-360deg);
}

.aiguille.secondes { 
transition-duration: 60s;
}

.aiguille.minutes { 
transition-duration: 3600s;
}

.aiguille.heures { 
transition-duration: 43200s;
}


Après, il faudrait aussi que l'aiguille ne s'arrête pas après avoir fait un tour complet de 360°...

Et aussi, pour qu'elle démarre à partir de l'heure véritable qu'il est au moment t, je pense que ça passe par le JS, et j'en ai quasiment aucune notion... Smiley confused

Merci d'avance pour toutes vos remarques, je suis super motivé!
Modifié par iloveraffa (26 Oct 2012 - 11:06)
Bonjour,

pour l'histoire de la boucle, tu devrais utiliser les animations en keyframes : tu pourras ainsi jouer chaque animation en boucle grâce au mot-clé infinite.

Et pour ta rotation, si ton aiguille est un trait n'oublie pas de définir le transform-origin, car ça me semble indispensable.

Pour récupérer l'heure, en effet du js voire un peu de php devraient être utiles, car il faut non seulement que tu la récupères mais aussi que tu la convertisses en position.

Accessoirement, ça existe déjà ou presque, tu peux peut-être t'en inspirer :
Sur MDN
Un exemple complet
Une liste de tutos

C'est un sujet intéressant, et ça peut être l'objet d'une ressource mise à disposition par exemple : en tout cas ça peut t'occuper un moment !!

Bonne continuation Smiley cligne
Merci tout d'abord pour ces éclaicissements. J'ai désormais terminé mon horloge en svg, et elle tourne parfaitement!
J'ai finalement utilisé ce code : 
 
<g id="secondes">
	<animateTransform 
 			attributeName="transform"
 			attributeType="XML"
 			type="rotate"
			from="0 397.8 397.8"
			to="360 397.8 397.8"
 			dur="60s"
 			repeatCount="indefinite" />
[[....]]
</g>

Et je colle dans le <g> mes <path> (trotteuse et son ombre) Smiley cligne

Me reste plus que la mettre à l'heure, mais ça, ça m'a l'air trop complexe exposé comme ça! Smiley decu
Tu as préféré utiliser directement SVG pour l'animation, as-tu songé aux problèmes de compatibilité ?
Les compatibilités des animations SVG VS les animations CSS3.

Mais si ça reste un choix, ça m'intéresse encore plus du coup ! Je ne suis pas allé jusque là avec SVG et c'est un sujet tentant Smiley biggrin

La mettre à l'heure risque d'être compliqué en effet.. As-tu jeté un oeil aux liens que j'ai donné ? Honnêtement ça me dépasse également donc je ne pourrais pas t'aider beaucoup plus !
Il est vrai que je n'ai pas pensé du tout à ce critère, pourtant déterminant. D'ailleurs, tes liens sont intéressant et on comprend vite ce que l'on a à comprendre! Vivement le temps où TOUS les navigateurs seront TOUS compatibles avec TOUS les langages (utopie...) Smiley murf

Si tu le souhaites, je peux te transférer par mail le travail que j'ai fait, pour que tu y jettes un coup d'œil si tu le souhaites! Tu verras, je trouve le rendu assez super! Et je n'ai pas habitude de me vanter pourtant... Je ne sais pas si tu connais les dernières horloges d'Apple copiée sur des horlogers suisses, mais en gros, ça donne ça!

Sinon pour les liens que tu m'as donné, déjà que l'anglais n'est pas mon fort, mais en plus avec un langage JS qui m'est totalement inconnu... Ça devient largement trop compliqué Smiley ohwell
Merci quand même en tout cas, ça montre à quel point on peut obtenir des horloges époustouflantes!!!

Smiley ola J'ai trouvé ce svg animé : je n'ai pas trop regardé comment fonctionne le code source, mais apparemment j'ai vu du JS là-dedans... Ça peut donner des idées non? Smiley smile En tout cas, pour ma part, sur mon navigateur, ça ne marche pas l'heure démarre à 0h00 et non pas à l'heure actuelle...

Et cette même horloge, ici, fonctionne Smiley smile En voici le code :
/**
 * Set the clock to the client's system time, directly after the SVG is loaded.
 *
 * @param evt e
 */
function s(e) {
        // Create new Date() object.
        var d = new Date();
        // Get current seconds.
        var s = d.getSeconds();
        // Get current minutes and add the current second.
        var m = d.getMinutes() + s / 60;
        // Get current hours and add the current minute.
        var h = d.getHours() + m / 60;
        // Get the current document, so we can alter the DOM.
        var svg = e.target.ownerDocument;
        // Rotate the second clockhand to the current seconds.
        svg.getElementById("Second").setAttribute("transform", "rotate(" + (s * 6) + ", 256, 256)");
        svg.getElementById("SecondShadow").setAttribute("transform", "rotate(" + (s * 6) + ", 253, 259)");
        // Rotate the minute clockhand to the current minute.
        svg.getElementById("Minute").setAttribute("transform", "rotate(" + (m * 6) + ", 256, 256)");
        svg.getElementById("MinuteShadow").setAttribute("transform", "rotate(" + (m * 6) + ", 254, 258)");
        // Rotate the hour clockhand to the current hour.
        svg.getElementById("Hour").setAttribute("transform", "rotate(" + (h * 30) + ", 256, 256)");
        svg.getElementById("HourShadow").setAttribute("transform", "rotate(" + (h * 30) + ", 255, 257)");
}

Modifié par iloveraffa (26 Oct 2012 - 22:55)
Je sens que j'y suis presque, mais je n'ai pas le résultat escompté malhreusement...
J'ai simplifié au maximum le code, et je le met pour que quelqu'un qui s'y connait en JS me dise où je me suis planté... Je sèche franchement! ^^

<?xml version="1.0" encoding="UTF-8"?>

<svg onload="s(evt)" width="512" height="512" style="margin:auto;" xmlns="http://www.w3.org/2000/svg">
  <defs>
		<script type="text/javascript">
			<![CDATA[
				function s(e) {
					var d = new Date();
					var s = d.getSeconds();
					var m = d.getMinutes() + s / 60;
					var h = d.getHours() + m / 60;
					var svg = e.target.ownerDocument;
					svg.getElementById("secondes").setAttribute("transform", "rotate(" + (s * 6) + ", 256, 256)");
					svg.getElementById("minutes").setAttribute("transform", "rotate(" + (m * 6) + ", 256, 256)");
					svg.getElementById("heures").setAttribute("transform", "rotate(" + (h * 30) + ", 256, 256)");
				}
			//]]>
		</script>
  </defs>

 <circle cx="256" cy="256" r="245" style="fill:#ddd" />

 <g id="heures">
			<animateTransform 
 				attributeName="transform"
 				type="rotate"
 				from="0 256 256"
 				to="360 256 256"
 				dur="43200s"
 				repeatCount="indefinite"/>

  <rect x="247" y="133" height="190" width="18" style="fill:#000" />
  </g> <!-- /heures -->

  <g id="minutes">
			<animateTransform 
 				attributeName="transform"
 				type="rotate"
 				from="0 256 256"
 				to="360 256 256"
 				dur="3600s"
 				repeatCount="indefinite"/>
    <rect x="247" y="51" height="272" width="18" style="fill:#333" />
  </g> <!-- /minutes -->

  <g id="secondes">
			<animateTransform 
 				attributeName="transform"
 				type="rotate"
 				from="0 256 256"
 				to="360 256 256"
 				dur="60s"
 				repeatCount="indefinite"/>
    <rect x="253" y="93" height="230" width="6" style="fill:#1d1d1d" />
    <circle cx="256" cy="256" r="7.5" style="fill:#1d1d1d" />
  </g> <!-- /secondes -->
</svg>


Merci! Smiley biggrin
Salut,

La modification doit ce faire sur le rectangle et non sur le <g>. Tu peux aussi modifier les attributs form et to de animateTransform.

Ce qui peut donner :
//<![CDATA[
function s(e) {
	var d = new Date();
	var s = d.getSeconds();
	var m = d.getMinutes() + s / 60;
	var h = d.getHours() + m / 60;
	var svg = e.target.ownerDocument;
	var setStart = function(id, deg) {
		var animate = svg.getElementById(id).getElementsByTagName("animateTransform")[0];
		animate.setAttribute("from", deg + ", 256, 256");
		animate.setAttribute("to", (deg + 360) + ", 256, 256");
	}
	setStart("secondes", s * 6);
	setStart("minutes", m * 6);
	setStart("heures", h * 30);
}
//]]>
Merci pour cette réponse, j'ai désormais réussi à la faire fonctionner, mon horloge SVG. Smiley biggrin

Maintenant, je m'attaque à la réalisation d'une horloge totalement en CSS, avec du JS pour la mettre à l'heure bien sûr... J'y suis presque, encore, mais c'est une nouvelle fois le JS qui me bloque!

Si tu veux bien regarder d'où vient l'erreur sur mon site, ce serait super! Merci beaucoup d'avance!
C'est bourré d'erreurs ^^.
La console d'erreur affichera les plus grosses.
La première concerne le CDATA, inutile pour le html mais si tu y tiens quand même, il faut le mettre en commentaire (//). Comme dans dans mon précédant code.
Ensuite la variable svg qui n'est plus d’actualité et l'utilisation de div (variable inexistante) au lieu de document.
Pour finir je dirais que s() n'est jamais appelé.
Oups Smiley confused C'est vrai que j'ai vraiment fait de la m****. Je crois avoir tout corrigé selon tes conseils maintenant, mais ça n'a pas l'air de fonctionner... Est-ce que c'est parce que j'appelle s() au mauvais moment? Je ne pense pas... Sûrement encore une grossière erreur que j’oublie Smiley decu
Sujet clos
Aller à