Raphaeljs réaliser une loading wheel avec un path importé

Version imprimable

29/06/2015, 17h38
bronon

Raphaeljs réaliser une loading wheel avec un path importé

Bonsoir à tous,
Je cherche désespérément depuis quelques heures comment faire un spinner (une roue d'attente de chargement) avec Raphaëljs et un path importé (réalisé avec Illustrator, un arc de cercle de 350°)
Je ne souhaite pas utiliser les quelques exemples Raphael compliqués et ne me convenant pas trouvé sur le Web
Toutes vos lumières pour me seront précieuses
Bonne soirée
03/07/2015, 00h57
01001111

Bonsoir ce serait un plaisir de t'aider mais il me faudrait pour ma part de plus amples précisions:

quel genre d'animation veux tu effectuer sur le path?
Raphael JS n'est pas si dur à maitriser, mais ça demande en effet un peu de réflexion.

Sinon, le plugin drawsvgplugin de greensock se base sur l'animation des valeurs stroke-dashoffset et stroke-dasharray du svg pour faire des trucs sympathiques.
07/07/2015, 20h04
bronon

Merci pour ta réponse que je découvre un peu tardivement !

Le plugIn de drawsvgplugin de greensock me parait très intéressant même si je n'en vois pas l'utilité en ce moment je l'ai mis "au frais".
Concernant mon pb je souhaite animer de manière continu un arc de cercle de 350° (dessiné avec AI), un peu comme un spinner d'attente.
Avec Canvas pas de gros pb mais les frames canvas ne sont pas supportés par tous les navigateurs d'ou ma recherche d'alternative avec svg et raphaël.
Cdlt
Bonne soirée
08/07/2015, 00h10
01001111

Bonsoir, d'après ce que tu dis, l'arc de cercle de 350° reste à 350°? Veux-tu lui appliquer une rotation et/ou une mise à l'échelle uniquement?
En ce cas, pas besoin de raphael ni de svg à priori...
Sinon, il faut savoir que IE ne supporte pas encore les animations smil (animations de svg) donc il doit gérer en échange le format vml via raphael.

Si tu as du mal avec Raphael, je le comprends bien perso, vu que je m'en suis inspiré pour commencer une librairie svg, que je n'ai pas encore finie car j'attends le support smil de IE. Si tu me dis un peu plus précisément comment tu veux animer, je peux t'orienter sur ce que tu souhaites (dsl. j'ai pas encore compris exactement quelle animation tu veux faire :koi:)
08/07/2015, 14h26
bronon

Je souhaite que l'arc de cercle tourne sur lui-même de manière continue

Cdlt
Bonne AMM

dans ce cas une transformation css 3 pourrait faire l'affaire bien qu'incompatible avec les (très) anciens navigateurs, ou en raphael:

Code:

1
2
3
4
5
6
7
8
9
10
11
 
            angle = 0;
            document.getElementById("holder").innerHTML = "";
            var R = Raphael("holder", 480, 480);
            var arc = R.set(),
            arc.push(R.path("ton path d'arc de cercle ici").attr({stroke: "le stroke que tu veux", fill: "le fill que tu veux"}));
            var id=setInterval(function () {
                    angle+=5;
                    arc[0].stop().animate({transform: "r" + (angle%360)}, 125, "<>");
                },125
            );

non testé, mais je pense que ça fonctionne.
pour stopper l'animation:

Code:

1
2
 
clearInterval(id);

08/07/2015, 23h12
bronon

Merci pour ta réponse, je regarde ceci demain…
Bonne fin de soirée