Animer une Toile cercle pour dessiner sur la charge

OK Bonjour.

J'ai décidé de commencer à l'aide de HTML en toile pour un petit projet que j'ai.

Il n'y a pas de véritable point de départ encore. Je suis en train d'apprendre les bases de la Toile et je veux Animer un cercle 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>title</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
        background: #222;
      }

     </style>
  <link  href="style.css" type="text/css">
 </head>
<body>
<canvas id="myCanvas" width="578" height="250"></canvas>

    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = canvas.width /2;
      var y = canvas.height /2;
      var radius = 75;
      var startAngle = 1.5 * Math.PI;
      var endAngle = 3.2 * Math.PI;
      var counterClockwise = false;
      context.beginPath();
      context.arc(x, y, radius, startAngle, endAngle, counterClockwise);
      context.lineWidth = 15;
      //line color
      context.strokeStyle = 'black';
      context.stroke();
    </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
  <script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
 </body>
</html>

Ici est un violon http://jsfiddle.net/oskar/Aapn8/ de ce que je suis en train de réaliser.
Je suis pas embêté avec le "Rebond" effet.

Mais en gros, j'ai envie de Tirer sur le chargement de la page et de s'arrêter à l'Angle de l'Arc
Voici le Violon de ce que j'ai créé jusqu'à présent.

http://jsfiddle.net/skerwin/uhVj6/

Grâce

InformationsquelleAutor Blackline | 2013-03-28
  1. 19

    Démonstration En Direct

    //requestAnimationFrame Shim
(function() {
  var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame;
})();



var canvas = document.getElementById('myCanvas');
 var context = canvas.getContext('2d');
 var x = canvas.width /2;
 var y = canvas.height /2;
 var radius = 75;
 var endPercent = 85;
 var curPerc = 0;
 var counterClockwise = false;
 var circ = Math.PI * 2;
 var quart = Math.PI /2;

 context.lineWidth = 10;
 context.strokeStyle = '#ad2323';
 context.shadowOffsetX = 0;
 context.shadowOffsetY = 0;
 context.shadowBlur = 10;
 context.shadowColor = '#656565';


 function animate(current) {
     context.clearRect(0, 0, canvas.width, canvas.height);
     context.beginPath();
     context.arc(x, y, radius, -(quart), ((circ) * current) - quart, false);
     context.stroke();
     curPerc++;
     if (curPerc < endPercent) {
         requestAnimationFrame(function () {
             animate(curPerc /100)
         });
     }
 }

 animate();

    Fondamentalement, j'ai utilisé la même formule à partir de la démo lien que vous avez posté. J'ai ensuite ajouté une fonction d'animation que lorsqu'il est appelé permettra de mettre à jour le cercle jusqu'à ce qu'il atteigne le désiré de fin pour cent.

    L'animation est constamment appelé par requestAnimationFrame c'est la meilleure façon de faire n'importe quel type d'animations, avec de la toile. Chaque fois animate est appelé le courant pour cent est augmenté d'une unité, qui est ensuite utilisé pour redessiner l'arc.

    • Merci, que vous l'avez fait ... j'ai quelques problèmes avec mon navigateur :-[
    • Votre Démonstration ne semble pas avoir une mise à jour? Il a la même apparence
    • Il a oublié d'ajouter la fonction animate
    • Je suppose que parce que je suis sur mon iPhone et pas sur mon IMac que son peu de travail. Mal prendre un coup d'oeil peu de temps
    • J'ai ajouté le requestAnimationFrame cale, explique peut-être pourquoi il nétait pas de travail. Essayez de jsfiddle.net/loktar/uhVj6/4, et il doit travailler encore sur il.
    • Fonctionne À Merveille.
    • +1, L'ombre est une belle addition.
    • Le travail est Incroyable. Je suis vraiment heureux. Vraiment. Avec un peu de peaufinage, je l'ai exactement comment je le veux. Ce que je veux savoir est. Comment puis-je utiliser le .js avoir plusieurs canevas sur une seule page. Dire que je voulais 3 ou 4 de ces Milieux, le tout dans une ligne qui Animent en même temps.
    • Si vous voulez quelque chose d'un peu moins parfait: codepen.io/dcdev/stylo/upjDy
    • est-il un moyen simple de le faire passer de 100% à 0% sans beaucoup de modifications du code?
    • comment puis-je ajouter du texte de pourcentage de ce cercle

    InformationsquelleAutor Loktar
  2. 0

    Trois étapes: 

    1) Make an "init" function which will assign the variables (they aren't in any   
function).  
2) Then use requestAnimationFrame, or setInterval with your   
drawing function you will create.  
3) In this "drawing/updating" function you're going to   
write your code to do the maths and then just animate the updated circle.

    Il n'y a pas toutes les fonctions dans votre code. Si vous ne savez pas comment faire les fonctions et les utiliser + qu'est-ce que variable globale, il est préférable de lire d'abord un des tutoriels à propos de ça, mais de toute façon je vais essayer de vous faire un exemple 🙂

    • OK. si vous pouviez m'aider avec une sorte de violon, ce serait sympa. Je suis un HTML/CSS, développeur de marcher dans la Toile. Je sais vaguement de fonctions (à partir de PHP).
    • Ok, va faire du violon quand j'ai fini 🙂 Hmm... je ne sais pas très bon en PHP, mais je pense que c'est la même chose. La toile utilise JavaScript et jQuery (qui est comme JavaScript)... j'espère que j'ai fait en 30 minutes 🙂
    • Je me réjouis de votre violon metalwings.
    • J'ai essayé de faire un constructeur avec le jsfiddle code.. quelqu'un Peut m'expliquer pourquoi cela ne fonctionne pas jsfiddle.net/uhVj6/2803
    InformationsquelleAutor metalwings