1. casa
  2. Domanda e risposta
  3. Definire un'animazione circolare/arco in SVG

Definire un'animazione circolare/arco in SVG

2010-07-15 8 views

risposta

6

si può dipingere "a mano" utilizzando lineto di percorso e calcolare la posizione dell'arco:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
    viewBox="0 0 1200 800" 
    preserveAspectRatio="xMidYMid" 
    style="width:100%; height:100%; position:absolute; top:0; left:0;" 
    onload="drawCircle();"> 
    <script> 
    function drawCircle() { 
     var i = 0; 
     var circle = document.getElementById("arc"); 
     var angle = 0; 
     var radius = 100;  
     window.timer = window.setInterval(
     function() { 
      angle -=5; 
      angle %= 360; 
      var radians= (angle/180) * Math.PI; 
      var x = 200 + Math.cos(radians) * radius; 
      var y = 200 + Math.sin(radians) * radius; 
      var e = circle.getAttribute("d"); 
      if(i==0) { 
       var d = e+ " M "+x + " " + y; 
      } 
      else { 
       var d = e+ " L "+x + " " + y; 
      } 
      if (angle === -5 && i !== 0) { 
       window.clearInterval(window.timer); 
      } 

      circle.setAttribute("d", d); 
      i++; 
     } 
     ,10) 
    } 
    </script> 

    <path d="M200,200 " id="arc" fill="none" stroke="blue" stroke-width="2" /> 
</svg>

http://jsfiddle.net/k99jy/138/

fonte

2010-07-16 07:23:09

+0

Grazie mille. Sono ancora nuovo in SVG e non ho mai utilizzato l'elemento

6

Un modo è utilizzare un cerchio e animare lo stroke-dashoffset (è necessario anche "stroke-dasharray"). Un esempio di tale animazione (non con un cerchio, ma lo stesso principio si applica) può essere visto here.

L'altra opzione è quella di utilizzare un'animazione di percorso e arc path segments, per l'animazione/morphing tra i percorsi, vedere questo example.

fonte

2010-07-16 06:55:07

+0

grazie erik - il collegamento al sito http://www.carto.net/papers/svg/samples mi ha mostrato alcune idee e tecniche interessanti per l'animazione svg. – GarethOwen

-1

Grazie per le risposte - ecco un po 'di più informazioni per quanto riguarda il motivo per cui voglio per animare un cerchio in SVG:

Abbiamo un'applicazione client-server. Ho in programma di generare immagini SVG per rappresentare grafici (grafici a torta/grafici a barre) sul server e inviare l'SVG ai client. Abbiamo client Java e .NET. Scriverò il codice lato client per analizzare e rendere le immagini SVG ricevute dal server. Ho intenzione di utilizzare solo un sottoinsieme del formato SVG, non più di quello che serve per rappresentare i nostri grafici, ma l'animazione è un requisito.

A lungo termine sarebbe bello avere un client ajax, che verrà eseguito sui browser senza runtime java o .NET. Questo è il motivo per cui ho scelto il formato SVG.

Per una soluzione a breve termine, ora penso che aggiungerò il mio elemento all'SVG, definendo un arco utilizzando gli angoli di inizio e di scorrimento. Quindi posso facilmente definire l'animazione richiesta animando l'angolo di sweep e semplifica la mia implementazione.

A lungo termine: se davvero ci stiamo occupando dell'implementazione di un client AJAX/HTML, dovrò reimplementare e attenermi allo standard SVG.

fonte

2010-07-16 11:21:48 GarethOwen

+0

OK! Sono curioso: per quanto riguarda la tua soluzione a breve termine, quando dichiari i tuoi elementi svg - come sarà il tuo cliente a renderli? Analizzi i tuoi xml e li dipingi in modo nativo? –

+0

Sì, analizzerò l'XML e dipingerò gli elementi utilizzando le API grafiche native (Graphics2D in java, GDI + in .NET.) – GarethOwen

+1

Probabilmente dovresti modificare la domanda invece di rispondere. A proposito; puoi usare cerchi semidistrutti per disegnare un arco; La codepen nella mia risposta ti mostra un'animazione. –

3

O forse si potrebbe scoprire un cerchio pre-disegnato per dare l'effetto desiderato:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" width="400" height="400"> 
    <rect x="0" y="0" width="1000" height="1000"/> 
    <circle cx="500" cy="500" r="500" fill="red"/> 
    <rect x="0" y="500" width="1000" height="500"/> 
    <rect x="0" y= "0" width="1000" height="500"> 
    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="5s" fill="freeze" from="0,500,500" to="180,500,500"/> 
    </rect> 
</svg>

fonte

2013-09-08 18:44:04

+0

Scoprire il cerchio è un'idea interessante e mi piace il tuo esempio per il caso del semicerchio. – GarethOwen

2

ero anche un po 'deluso per non essere in grado di fare semplicemente l'arco di un cerchio con un per cento, o di un angolo .

Al giorno d'oggi, quando ho bisogno di un arco che non fa parte di un percorso più lungo, uso un cerchio e il trucco strokeDasharray per mostrare solo una parte di questo cerchio.

svg { 
 
    outline: solid; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 
.arc { 
 
    fill: transparent; 
 
    stroke-width: 5; 
 
    stroke: red; 
 
    stroke-dasharray: 94.24778 219.91149; 
 
}
<svg viewport="0 0 100 100"> 
 
    <circle cx="50" cy="50" r="50" class="arc"></circle> 
 
</svg>

potete vedere una versione migliorata here che utilizzano Sass per fare i calcoli.

fonte

2015-11-25 19:22:21

2 

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <title></title> 
 
    <link rel="stylesheet" href=""> 
 
</head> 
 
<body> 
 
    
 
</body> 
 
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" 
 
    viewBox="0 0 1200 800" 
 
    preserveAspectRatio="xMidYMid" 
 
    style="width:100%; height:100%; position:absolute; top:0; left:0;" 
 
    onload="drawCircle();"> 
 
    <script> 
 
    function drawCircle() { 
 
     // center point 
 
     var cX = 300, 
 
      cY = 300; 
 
      radius = 300, 
 

 
      p1 = {x: cX+radius, y: cY}, 
 
      p2 = {x: cX-radius, y: cY}, 
 

 
      circle = document.getElementById("arc"), 
 
      angle = 0; 
 

 
     window.timer = window.setInterval(
 
      function() { 
 
      angle -= 5; 
 
      angle %= 360; 
 
      var radians= (angle/180) * Math.PI; 
 
      var x = cX + Math.cos(radians) * radius; 
 
      var y = cY + Math.sin(radians) * radius; 
 

 
      if (Math.abs(angle) < 180 && angle != 0) 
 
       d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==180?' 0 1 0 ':' 0 0 0 ')+x+' '+y; 
 
      else 
 
       d= 'M ' + p1.x + ',' + p1.y + ' A' + radius+ ',' + radius+ ' 0 1 0 '+p2.x+' '+p2.y + 
 
      ' M ' + p2.x + ',' + p2.y + ' A' + radius+ ',' + radius+ (Math.abs(angle)==0?' 0 1 0 ':' 0 0 0 ')+x+' '+y; 
 
      
 
      circle.setAttribute("d", d); 
 

 
      if (Math.abs(angle) == 0) 
 
       window.clearInterval(window.timer); 
 
     } 
 
     ,10) 
 
    } 
 
    </script> 
 
    <path d="" id="arc" fill="none" stroke="blue" stroke-width="2" /> 
 
</svg> 
 
</html>

fonte

2016-03-19 19:59:44 tdjprog

2

È anche possibile disegnare la SVG a mano con un circle e la seguente tecnica:

  1. Dare il circle un stroke.
  2. Creare strokedashed con una lunghezza del trattino pari alla circonferenza del cerchio.
  3. Offset del stroke di una lunghezza uguale alla circonferenza del cerchio.
  4. Animare il tratto.

HTML:

<svg width="200" height="200"> 
    <circle class="path" cx="100" cy="100" r="96" stroke="blue" stroke-width="4" fill="none" /> 
</svg>

CSS:

circle { 
    stroke-dasharray: /* circumference */; 
    stroke-dashoffset: /* circumference */; 
    animation: dash 5s linear forwards; 
} 

@keyframes dash { 
    to { 
    stroke-dashoffset: /* length at which to stop the animation */; 
    } 
}

jsfiddle

fonte: https://css-tricks.com/svg-line-animation-works/

fonte

2017-01-05 15:05:47

Problemi correlati

 Problemi correlati