Batch Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
Répondre au sujet Page 1 sur 1
[CSS] ANimation de cercle
Auteur Message
Répondre en citant
Message [CSS] ANimation de cercle 
Bonjour !
J'ai un problème, j'aimerais animer un cercle de la façon suivante :

Je suis incapable de le décrire avec des mots xD
Pour plus de détails :
J'ai un élément circulaire de côté 150px avec un image en fond.
J'aimerais que quand on l'hover, le cercle (gris) se dessine comme sur le schéma ci-dessus.
Merci à vous ^^




______________________________________________________


Mon site waibe
Visiter le site web du posteur ICQ AIM Yahoo Messenger MSN GTalk/Jabber Skype
Message Publicité 
PublicitéSupprimer les publicités ?


Répondre en citant
Message [CSS] ANimation de cercle 
Salut ! Mr. Green

Alors désolé de te le dire comme ça mais, du côté du css c'est impossible
On peut reproduire cette effet mais il faut genre 500 lignes xD

Alors pour commencer, il te faut ceci :
Code:
[lang=html5]<script src="http://flammrock.ga/RadialBar.js"></script>



Voici les fonctions :


set(p)
    - Cette fonction permet de définir directement le pourcentage du cercle allant de 0 à 100
    - Elle peut prendre un nombre en paramètre pouvant être en dehors de l'intervalle [0;100]



get(p)
    - Cette fonction permet d'obtenir le pourcentage actuel du cercle




add(p)
    - Cette fonction permet d'ajouter des pourcentages au cercle
    - Remarque : on peut mettre une valeur négative



subtract(p)
    - Cette fonction permet de soustraire des pourcentages au cercle
    - Remarque : on peut mettre une valeur négative



update()
    - Cette fonction permet d'actualiser le cercle lorsque par exemple on modifie sa valeur





Ceci est le code complet de l'exemple présent ici : http://flammrock.ga/application/img
Code:
[lang=html5]<script src="http://flammrock.ga/RadialBar.js"></script>

<canvas style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" id="paper"></canvas>


<script type="text/javascript">
var canvas = document.getElementById('paper');
var ctx = canvas.getContext('2d');

canvas.width = 800;
canvas.height = 600;

var circle = {
  _1: new RadialBar(ctx, {
        x: (canvas.width-70)/2,
        y: (canvas.height-70)/2,
        angle: 0,
        radius: 50,
        lineWidth: 30,
        lineFill: 'rgba(255, 255, 255, 1)',
        backLineFill: '#00B3FF',
        bgFill: 'rgba(255, 255, 255, 0)',
        isShowInfoText: true,
        infoStyle: '24px Arial'
      })
};
circle._1.set(0);


function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (circle._1.get()<=100) {circle._1.add(1);}
  circle._1.update();
  requestAnimationFrame(loop);
}
loop();
</script>




__________________________


Fluorinx a écrit:
Je suis incapable de le décrire avec des mots xD


Alors on peut le dire comme ça d'une certaine façon :

Bonjour, j'aimerai pouvoir animer un cercle par translation de vecteurs en rotation sur
une trajectoire circulaire de manière à produire un effet de remplissage progressive en fonction des gradients calculés en pourcentage.







EDIT :

Fluorinx a écrit:
J'aimerais que quand on l'hover, le cercle (gris) se dessine comme sur le schéma ci-dessus.


Ha ha....j'avais pas vu désolé xD

Voilà avec un effet de hover :


Disponible ici : http://flammrock.ga/application/imgs
Code:
[lang=html5]<script src="http://flammrock.ga/RadialBar.js"></script>

<canvas style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);" onmouseenter="loop('enter')" onmouseout="loop('out')" id="paper"></canvas>


<script type="text/javascript">
var canvas = document.getElementById('paper');
var ctx = canvas.getContext('2d');

canvas.width = 200;
canvas.height = 200;

var circle = {
  _1: new RadialBar(ctx, {
        x: (canvas.width-70)/2,
        y: (canvas.height-70)/2,
        angle: 0,
        radius: 50,
        lineWidth: 30,
        lineFill: 'rgba(255, 255, 255, 1)',
        backLineFill: '#00B3FF',
        bgFill: 'rgba(255, 255, 255, 0)',
        isShowInfoText: true,
        infoStyle: '24px Arial'
      })
};
circle._1.set(0.1);circle._1.update();

var anim="undefined";
function loop(type) {
  if (anim!="undefined") {window.cancelAnimationFrame(anim);anim="undefined";}
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (type=="out") {
    if (circle._1.get()>0) {circle._1.subtract(1.2)}
  } else {
    if (circle._1.get()<=100) {circle._1.add(1)}
  }

  circle._1.update();
  anim=requestAnimationFrame(function(){loop(type)});
}
</script>





______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message [CSS] ANimation de cercle 
par contre en css tu peux faite une animation infinie comme dans mon site de scan
Exemple : http://kagescan.esy.es/scan/1/




______________________________________________________


cliquer sur un des liens n'est pas dangereux
Ancien site,Nouveau site
Mon site de scan
Vous êtes le
visiteur
Chaine Youtube:
Visiter le site web du posteur Skype
Répondre en citant
Message [CSS] ANimation de cercle 
logan T a écrit:
par contre en css tu peux faite une animation infinie comme dans mon site de scan
Exemple : http://kagescan.esy.es/scan/1/


Oui.
Mais il me semble que ce n'est pas ce qui ai demandé Mr. Green

p.s : Fluorinx en connais + que tu ne le crois
Alors quand tu viens ici en disant : Hey saviez-vous qu'en css il est possible de faire des animations infinies !!

Hummmm...tu vois ? Laughing




______________________________________________________
la vie est trop courte pour retirer le périphérique USB en toute sécurité...
Si la statue de la liberté lève le bras depuis 125 ans, c'est parce qu'elle cherche du réseau sur son Blackberry Torches...
Grâce à mon nouveau correcteur automatiste sur mon téléphage, je ne fais plus aucune faute d'orthodontie.
Quelqu'un a t il déjà demandé au drapeau japonais ce qu'il enregistre depuis tout ce temps ?
Visiter le site web du posteur
Répondre en citant
Message [CSS] ANimation de cercle 
Flammrock a écrit:
Oui.
Mais il me semble que ce n'est pas ce qui ai demandé Mr. Green
p.s : Fluorinx en connais + que tu ne le crois
Alors quand tu viens ici en disant : Hey saviez-vous qu'en css il est possible de faire des animations infinies !!
Hummmm...tu vois ? Laughing

Mdrr bon au moins j'aurais tenté xD
Sinon oui je savais déjà qu'il avais un très bon niveau mais comme le forum est un peu "vide" en ce moment voilà




______________________________________________________


cliquer sur un des liens n'est pas dangereux
Ancien site,Nouveau site
Mon site de scan
Vous êtes le
visiteur
Chaine Youtube:
Visiter le site web du posteur Skype
Répondre en citant
Message [CSS] ANimation de cercle 
logan T a écrit:

Sinon oui je savais déjà qu'il avais un très bon niveau mais comme le forum est un peu "vide" en ce moment voilà

AU lala ces flateries ^^
Merci flammrock pour ton outil, je l'i pas encore testé mais ça va m'aider !




______________________________________________________


Mon site waibe
Visiter le site web du posteur ICQ AIM Yahoo Messenger MSN GTalk/Jabber Skype
Message [CSS] ANimation de cercle 


Montrer les messages depuis:
Répondre au sujet Page 1 sur 1
  



Index | créer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation
Copyright 2008 - 2016 // Batch