rotation, animation, snap, svg

Habe ich gesehen, diese wunderbare codepen zum erstellen von svg-loading Animationen mit SMIL, aber ich möchte das gleiche zu tun, animation, Snap-SVG-Bibliothek.
Also ich erstelle html wie folgt:

JS:

document.addEventListener("DOMContentLoaded", function(){
	
	var svgElem = document.querySelector("#loading");
	var snapCanvas = Snap(svgElem);
	var innerArch = snapCanvas.select("#inner-arch");

	innerArch.animate({transform: "rotate(360 150 150)"},
	    5000,
	    mina.linear,
	    function(){
	        innerArch.attr({ transform: "rotate(0 150 150)"});
	    });

});

HTML:

<!DOCTYPE html>
<html>
<head>
	<title>Loading Animation</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
	<script type="text/javascript" src="main.js"></script>
</head>
<body>
<svg id="loading" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20%" height="20%"
	 viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
<g>
	<path id="circle" opacity="0.2" enable-background="new    " d="M150,32C87.7,32,38.2,82.2,38.2,143.7
		c0,62.3,50.2,111.7,111.8,111.7s111.8-50.2,111.8-111.7S212.3,32,150,32z M150,230.7c-48,0-87-39-87-87c0-48,39-87,87-87
		s87,39,87,87C237,191.8,198,230.7,150,230.7z"/>
	<path id="inner-arch" d="M193.5,68l12.7-21.7c-16.5-9.8-35.2-15-56.2-15l0,0V56l0,0C165.8,56.8,180.8,61.3,193.5,68z	">
    <!-- <animate  type="rotate" fill="remove" repeatCount="indefinite" additive="replace" accumulate="none" restart="always" to="360 20 20" calcMode="linear" from="0 20 20" attributeName="transform" dur="0.5s" attributeType="xml">
  	</animate> -->
	</path>
</g>
</svg>

</body>
</html>

Wie Sie sehen können gibt es immer noch etwas falsch über die animation des inneren Bogens, Kann mir jemand helfen zu verstehen, warum dies geschieht und wie ich es beheben kann?

  • Wo hast du den path-Werten aus ? Es fühlt sich an wie das Zentrum ist etwas anderes, vielleicht y bei 142 oder so etwas. Sind Sie bereit, sich zu unterhalten, alternative Methoden, wie auch ?
  • Sie haben Recht, ich zentriert die svg-horizontal und vertikal angewendet und der gleiche code, jetzt funktioniert es, postet bitte eine Antwort, so dass ich zu überprüfen wäre, ob es die richtige Antwort. Eine Letzte Sache, was meinst du mit alternativen Methoden, du meinst wie CSS-Animationen? Ja, ich interessiere mich für die CSS-animation sowie
InformationsquelleAutor Wael Showair | 2015-02-20
  1. 2

    Den innerarch Pfad sieht leicht aus, vielleicht versuchen Sie, y zu sein, um 142 oder so.

    Nur für alternativen, die Sie könnten versuchen, die css so gut, ich denke, Sie sollten in der Lage sein zu finden, einige Lösungen.

    Hier ist ein weiteres mit Druckknopf, da ich weiß, dass ein bisschen besser ist...
    Der Vorteil hier ist, dass Sie Geige mit der strokeDasharray Einstellung für einfache schnelle Effekte.

    var s = Snap("#svg");

var c = s.circle(100,100,100).attr({ stroke: 'red', strokeDasharray: "40 280", fill: 'none', strokeWidth: 20 });

function anim() {
    c.transform('r0,100,100');
    c.animate({ transform: "r360,100,100" }, 1000, mina.linear, anim);
};

anim();

    jsfiddle und jsfiddle2

    Wenn Sie versuchen strokeDasharray mit einigen Werten wie "40 40" erhalten Sie ein paar anderen Spinnern.

    InformationsquelleAutor Ian
Schreibe einen Kommentar