Mathe vor Ostern: Easing

[Matthias Scharwies]

Servus!

Hallo Matthias,

hatte ich mir angeschaut, aber ich weiß nicht ob die mir helfen.

Wie gesagt, wenn ich animate verwende, kann ich zwar einen Path von "M0,0" nach "M0,0 A... A... A..." animieren, mit p1, p2, p3 als jeweiligen Endpunkten der A Segmente, aber dann wandert der Endpunkt der Animationsschritte auf einem Geradenzug von 0,0 über p1 und p2 nach p3 und das bewirkt, dass der path nicht stetig wächst sondern rumeiert.

Ich hatte als Baustelle etwas in dieser Art in der Seite. Habe ich jetzt aktiviert und neu hochgeladen. http://www.borchmann.one/test/animationspline.html

Lass es ablaufen und drück dann mal Space.

Das Timing der animate-Sequenz ist gruselig, aber das kriegt man mit keySplines und keyTimes mutmaßlich wie gewünscht hin. Aber der Bewegungsablauf wird damit wohl unverändert bleiben, oder? Den Pfeil müsste man wohl mit animateMotion und rotate=auto lösen können - aber solange der Pfad sich beim Animieren durch die Gegend windet, hilft das auch nicht viel.

So animierst du ja den Pfad (bzw. die d-Koordinaten) selbst.

Wenn Du den Pfeil entlang eines Pfades laufen lassen willst, musst Du SMIL/animateMotion oder CSS-offset verwenden.

Ob der Animationspfad sichtbar ist, entscheidest du. Die blaue Färbung des Pfades (dessen d-Koordinaten ja nicht geändert werden) kannst du mit stroke-dashoffset verändern.

Wofür ich das haben will, kannst Du Dir sicher denken 😉

Ja!

Herzliche Grüße

Matthias Scharwies