¿Cómo se anima una ruta SVG en IOS?

que tienen una trayectoria SVG como esto:¿Cómo se anima una ruta SVG en IOS?

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full"> 
    <path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" /> 
</svg>

puedo hacer que el camino pero parece que no puede encontrar una manera de hacer lo animado del recorrido por lo que parece que es "ser empate", como si con lápiz. El nodo animate funciona para coords individuales pero no para rutas.

Eventualmente terminaré usando esta animación en una aplicación de iPhone con un analizador o con un UIWebView.

Fuente

2011-05-07 Julian

Vea también http://stackoverflow.com/questions/14275249/how-can-i-animate-a-progressive-drawing-of-svg-path/14282391#14282391 – Phrogz

Hola, ¿cómo se usa esto en iOS – Misha

Intente animar el 'stroke-dashoffset' (tenga en cuenta que necesita un 'stroke-dasharray' coincidente con él), consulte this example. La longitud del camino que debe ser calculada para poder utilizar este éxito se pueden recuperar a través de script como:

var pathlength = yourPathElm.getTotalLength()

Ver código fuente en el example para ver cómo se hace.

Fuente

2011-05-08 08:21:11

Muy buen ejemplo, ¡gracias! He estado trabajando en tu ejemplo para aislar solo los elementos que se aplican a un solo trazo. Casi estoy allí, excepto que no puedo entender un par de cosas: ** 1) ** ¿Por qué si elimino el 'translate' del nodo' 'no puedo ver nada? ** 2) ** ¿Por qué repite 54 dos veces en la declaración de estilo de 'stroke-dasharray'? – Julian

1) porque la ruta se define con ese desplazamiento (hack rápido de inkscape). Puede aplicar la transformación al atributo 'd' de la ruta y eliminarlo del elemento 'g'. 2) solo porque creo que es más claro, está alternando entre la longitud del guión y la longitud del espacio, pero de hecho es posible especificar un solo número si son iguales (el navegador los expandirá para que sean un número par de guiones/lagunas) vea http://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty –

¡Excelente! Muchas gracias! – Julian

Una vez que haya renderizado su ruta SVG, para que parezca que se está dibujando con un lápiz, simplemente puede cubrirlo todo con una capa opaca, y luego animar el movimiento de esta capa a lo largo de la ruta.

Para encontrar el CGPath largo de la cual usted se moverá la capa se puede utilizar esta biblioteca: https://github.com/arielelkin/PocketSVG

Esto analizar los datos SVG en una UIBezierPath. Entonces:

SvgToBezier *myBezier = [[SvgToBezier alloc] initFromSVGPathNodeDAttr:@"M176.17,369.617c0,0,335.106-189.361,214.894,38.298s129.787,282.978,178.723,42.553C618.724,210.042,834.681,87.702,790,307.915" rect:CGRectMake(0,0,1024,768)]; 

UIBezierPath *myPath = myBezier.bezier; 

CAKeyframeAnimation *mySVGPathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; 
bounceAnimLeft.duration = 3; 
bounceAnimLeft.path = myPath.CGPath; 

[myObjectToMove.layer addAnimation:mySVGPathAnimation forKey:@"pathAnimation"];

Fuente

2012-08-02 12:47:45 Eric

¿Podría darnos más explicaciones sobre cómo usar su fragmento de código? – maxagaz

Si su ruta está en SVG y desea hacer una animación donde parece que se está dibujando, primero deberá usar el código que publiqué arriba para convertir el SVG en un CGPath. Una vez que tenga el CGPath, eche un vistazo a esto: http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer/ – Eric

He intentado durante mucho tiempo para hacer esto sin tener que agregar secuencias de comandos adicionales para la cabecera (que no tengo ni idea de JavaScript no ayuda), así que aquí está la solución:

<path d="..." stroke-dasharray=""> 
    <animate attributeName="stroke-dashoffset" from="" to="0" dur="1s" begin="0s" 
      onload="var length = parentNode.getTotalLength(); 
        parentNode.setAttribute('stroke-dasharray',length+','+length); 
        this.setAttribute('from',length)" /> 
</path>

Agregué saltos de línea adicionales para la legibilidad aquí.

Esto es legal en SVG (aunque no en HTML) porque the svg:animate element allows onload, que la mayoría de los elementos HTML no lo hacen.

Fuente

2013-02-19 22:12:54 bitmask

¿Cómo se anima una ruta SVG en IOS?

Respuesta

Cuestiones relacionadas