J'ai un chemin SVG comme ceci:
<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>
3 Réponses :
essayez d'animer le 'AVI-DashOffset' (Notez que vous avez besoin d'une correspondance "AVC-Dashaparray" avec elle), voir Ce exemple . La longueur du chemin qui doit être calculée pour pouvoir utiliser cela avec succès peut être récupérée via script comme: source de vue sur le pour voir comment cela est fait.
Très bel exemple, merci! Je travaille sur votre exemple isolant uniquement les éléments qui s'appliquent à un seul coup. Je suis presque là, sauf que je ne peux pas comprendre un couple de choses: 1) Pourquoi si je supprimais le traduire de votre AVC-DASTAARRAY ?
1) Parce que le chemin est défini avec ce décalage (pirate d'inkscape rapide). Vous pouvez appliquer la transformation à l'attribut «D» chemin et retirez-le de l'élément «G». 2) Ce n'est pas parce que je pense qu'il est plus clair, il est alternatif entre la longueur du tableau de bord et la longueur de l'écart, mais il est en effet possible de spécifier un seul numéro si elles sont identiques (le navigateur les étendre à être un nombre pair de tirets / lacunes) Voir w3.org/tr/svg11/painting.html#strokedasharrayProperty
Excellent! Merci beaucoup!
Je me demande que j'ai des mouvements à l'intérieur de mon chemin, qui réinitialisez le coup de tige. Y a-t-il un moyen de contourner cela? ( STRETSKETCH
commence = "rect.click; 0s". Commencer les attributs signifie, compensez la quantité de temps après laquelle l'animé démarre. S'il vous plaît expliquer ce qui est rect.click. Le rectangle avec Reft ID n'a pas de facilité de clic avec elle.
@drjerry: Hmm, je suggérerais de fractionnement du chemin quand il y a un Masteo, juste pour le rendre plus simple.
@rajkamal: begin = "rect.click" signifie déclencher l'animation chaque fois que l'élément avec ID "rect" est cliqué, voir
Une fois que vous avez rendu votre chemin SVG, il semblerait d'être dessiné avec un crayon, vous pouvez simplement le couvrir avec une couche opaque, puis animer le mouvement de cette couche le long du chemin.
Pour trouver le Ceci va analyser le SVG données dans un uibezierpath. Ensuite: p> cgpath code> sur lequel vous déplacerez le calque que vous pouvez utiliser cette bibliothèque:
https://github.com/arielelkin/pocketsvg p> 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"];
Pourriez-vous donner une autre explication sur la manière d'utiliser votre morceau de code?
Si votre chemin est dans SVG et que vous souhaitez faire de l'animation où il semble être tiré, vous devez d'abord utiliser le code que j'ai publié ci-dessus pour convertir le SVG en CGPATH. Une fois que vous avez le CGPATH, jetez un coup d'œil à ceci: oleb.net/blog/2010/12/...
J'ai essayé longtemps de le faire sans avoir à ajouter des scripts supplémentaires à l'en-tête (que je n'ai aucune idée de JavaScript n'a pas aidé), alors voici la solution:
<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>
Voir aussi Stackoverflow.com/questions/14275249/...
Bonjour, comment utilisez-vous cela dans iOS