+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : equivalent de svg circle animate (/showthread.php?tid=6890)
equivalent de svg circle animate - starmindfr - 26-10-2013
Bonjour
j'ai vu ce genre de joli petit code pour faire des cercles animés genre pulsation de radar :
Code :
<svg viewBox="0,0,5000,5000" xmlns="http://www.w3.org/2000/svg" style='z-index:500;'>
<circle cx="xx" cy="yy" r="22" style='fill:white;opacity:0.1;z-index:502;'/>
<circle cx="xx" cy="yy" r="16" style='fill:white;opacity:0.1;z-index:500;'>
<animate attributeType="XML" from="16" to="200" begin="0s" dur="1200ms" repeatCount="indefinite" attributeName="r" />
<animate attributeType="CSS" from="0.6" to="0" begin="0s" dur="1200ms" repeatCount="indefinite" attributeName="opacity" />
</circle>
</svg>Cependant vu la compatibilité limitée et la difficultés de combinaison avec un image map area je cherche un équivalent plus largement compatible (donc minimum IE8 et Firefox)
Une idée ? J'utilise déjà pas mal de jquery et je suppose qu'en css il n'y pas pas énormément de boulot pour changer un css progressif sur la taille et contenu d’ellipse... ? Mais bizarrement je ne trouve pas d'exemples sur le net.
Au final je dispose d'une image avec zones cliquables de l'area map, et donc le but est de faire un simili pulse de radar centré sur un point a cliquer...
RE: equivalent de svg circle animate - Harparine - 26-10-2013
Salut !
Pourquoi pas un simple .gif ? Si tu veux juste un point clignotant sur une carte, ça devrait être suffisant.
Si tu as besoin de semi-transparence, tu peux éventuellement utiliser un petit sprite en png avec 3 ou 4 "états" de ton radar, dont l'animation est gérée en javascript en déplaçant le background toutes les X ms.
RE: equivalent de svg circle animate - starmindfr - 26-10-2013
oui je travailles actuellement avec des gifs mais j'ai l'impression que c'est assez gourmand contrairement aux methodes css / svg etc...
RE: equivalent de svg circle animate - Xenos - 26-10-2013
CSS/SVG est plus gourmand qu'un petit GIF, mais moins qu'un GIF en "haute definition" (bien que GIF et HD me semblent incompatibles ^^).
Via les @keyframes de CSS, tu peux créer des animations avec une notion de temps. Cette animation peut très bien être un changement de taille (width/height) d'un élément SVG. Il ne te restera alors plus qu'à nommer l'élément SVG, et à lui appliquer le CSS (via un id ou une classe).
Je ne connais pas la compatibilité d'une telle méthode, mais elle doit être correcte.
RE: equivalent de svg circle animate - Harparine - 26-10-2013
Le problème, c'est qu'SVG n'est pas correctement pris en charge par IE avant la version 9. On pourrait aussi bidouiller un cercle avec border-radius mais le problème est le même : rien avant IE9.
Je pense que la solution du sprite PNG est la meilleure pour la compatibilité.
RE: equivalent de svg circle animate - niahoo - 26-10-2013
Haute Définition ça ne veut rien dire d'autre que Haute Résolution, c'est juste un terme plus marketing que technique. Effectivement sur du GIF c'est pas un bon plan
laissons-les aux aplats et aux lolcats !
RE: equivalent de svg circle animate - starmindfr - 26-10-2013
Pour la solution avec un PNG je ne vois pas trop comment fait, l'idée c'est plus une diffusion / expansion d'une sphere
un petit exemple fait en vitesse :
http://mechaswar.com/testrad.php
RE: equivalent de svg circle animate - Xenos - 26-10-2013
Un PNG fait dans la résolution la plus large qui sera affichée (aka, grand rond), appliqué à une div ou tout autre élément asémantique de ce type, que tu positionnes alors arbitrairement (absolute ou non, avec top/right/bottom/left pour position l'objet) et dont tu fais varier la taille (width/height) soit via javascript (ouh, c'est moche! :p) soit via les animations de CSS3.
Mais à mon avis, prendre en compte les anciennes versions de navigateur (surtout pour des jeux!) c'est une trop grande perte de temps; donc si cela marche sur IE, FF, chrome, safari, opera (j'en ai oublié?) dans leurs dernières versions, c'est amplement suffisant. Sinon, cela revient à se prendre la tête pour faire des jeux vidéos 3D type "Crysis 4" (j'adore citer celui-là, surtout que je viens de rejouer à Warhead, le meilleur de la série
) qui seraient 100% compatibles Windows 95/98 ou même XP. Compatibilité partielle, ok (donc, sans l'animation et en mode "moche"), mais chercher une compatibilité totale avec des vieilles versions, c'est une pure perte de temps pour un jeu web (même pour tout type de site en fait).@niahoo: oui, c'est ce que je voulais dire, laissons les GIFs aux lolcats, aux applats de couleurs, et aux extraits de films détournés
RE: equivalent de svg circle animate - Harparine - 27-10-2013
Ah ok, je voyais ta sphère beaucoup plus petite. Dans ce cas, je rejoins l'avis de Xenos : abandonne la comptabilité