)Hallo Forum, hallo Christoph,
vielen Dank, Christoph, für die neue Version 3.7. Besonders (für mich) die Einrastfunktion bei den Animationspunkten ist super
! Ich habe dafür auch gleich eine Anwendung:Das Zeichnen eines fast idealen Kreises mit einer Animationskurve, wobei das Einrasten sowohl der Animations-Knotenpunkte als auch der Anfasser äußerst vorteilhaft ist.
Über das Thema, wie man mit Bézierkurven einen Kreis annähert, gibt natürlich das Internet Auskunft. Auf der entsprechenden Seite wird das Ganze zwar höchst mathematisch abgehandelt, aber durch etwas Vereinfachung kann man durchaus in der Praxis anwendbare Methoden ableiten.
Die zwei wesentlichen Excerpte sind:
- "Die Standardmethode zur Approximation eines Kreises besteht darin, ihn in vier gleiche Abschnitte zu unterteilen und jeden rechten Kreisbogen durch eine kubische Bézierkurve zu ersetzen."
- Die Bézier-Anfasser zum jeweiligen Animations-Kurvenpunkt verlaufen tangential im rechten Winkel zum Radius Kreismittelpunkt-Kurvenpunkt. Der Anfasser wird im Abstand von 55% des Radius platziert.
Zur praktischen Vorgehensweise:
Vorgabe: In einem Screen von 1400 x 1050 px soll ein Kreis mit Durchmesser 400 px zentral per Animation unter Verwendung von Hilfslinien erstellt werden.
Vor weiteren Erklärungen hier erst mal ein Screenshot der Hilfslinien:
(Nicht verwechseln: Die Hilfslinien sind keine Koordinatenachsen, sondern bezeichnen den jeweiligen Abstand vom Nullpunkt im linken oberen Eck. Horizontale Linien geben also den Abstand in Richtung der Y-Achse an, vertikale Linien den Abstand in Richtung der X-Achse.)
- KreisAnimation1.jpg (81.46 KiB) 72 mal betrachtet
In der nachfolgenden Koordinatenberechnung der einzelnen Hilfslinien sind alle Werte in Pixel angegeben. Der Radius ist R=200.
(Die Koordinatenwerte lassen sich durch Selektieren der jeweiligen Hilfslinie exakt in den Eigenschaften unter Position eintragen.)
- Als erstes wird im Pool ein Hilfslinienobjekt 1x1 angelegt. Damit ist das Zentrum vorgegeben. Dieses "Fadenkreuz" ist im Screen mit roten Linien dargestellt (X0 und Y0).
Die Positionen der Nullpunkt-Hilfslinien: X0 = 1400/2 = 700 | Y0 = 1050/2 = 525 - Nun werden die (blauen) Hilfslinien ("Tangenten") für den Kreis eingefügt, und zwar zwei vertikale (X-R und XR) und zwei horizontale (Y-R und YR).
Die Positionen der Tangential-Hilfslinien: X-R = X0 - R = 700-200 = 500 | XR = Y0 + R = 700+200 = 900 | Y-R = Y0 - R = 525-200 =325 | YR = Y0 + R = 525+200 = 725 - Als letztes kommen noch die (grauen) Hilfslinien für die Bézier-Anfasser dazu (XA und YA).
Die Positionen der Anfasser-Hilfslinien (siehe Punkt 2. oben "Excerpte"): XA = X0 + 0,55 x R = 700+0,55 x 200 = 810 | YA=Y0 + 0,55 x R = 525+0,55 x 200 = 635 - Nun wird im Pool eine Animation z.B. "Kreis1" erzeugt:
- Die Texte "Start" und "Ziel" aus den (Pool-)Eigenschaften löschen
- Das Symbol aus den (Pool-)Eigenschaften löschen
- Linienbreite und Farbe in den (Pool-)Eigenschaften vorgeben
- Nach dem Ziehen der Animation in die Timeline werden dort noch drei weitere Kontrollpunkte in die Animation eingefügt. Laut obigem Excerpt 1 braucht man zur Kreis-Approximation zwar nur vier Punkte, aber wir benötigen zusätzlich noch einen Endpunkt. D.h. bei unserem Kreis fallen Start- und Endpunkt zusammen, werden also übereinander platziert.
(Bildbearbeitung macht's möglich, alle Kontrollpunkte zugleich zu selektieren
)- KreisAnimation2.jpg (100.5 KiB) 72 mal betrachtet
- Nun werden die einzelnen Kontrollpunkte wie im Screenshot dargestellt platziert:
- Der Startpunkt P1 wird im Hilfslinien-Schnittpunkt Y0/X-R mit gedrückter Taste G (Einrastung an Hilfslinien aktiv) platziert.
- Entsprechend werden die Punkte P2...P4 positioniert, immer mit Taste G.
- P5 wird z.B. direkt im Zentrum platziert, um genaue Einstellungen der Bézier-Anfasser vornehmen zu können und ganz am Schluss über P1 geschoben.
- In den Eigenschaften aller Kontrollpunkte P1...P5 ist bei den Eigenschaften -> Allgemein -> Kurvenverlauf die Option Gespiegelte Bezier-Anfasser auszuwählen.
- Wegen der Spiegelung der Anfasser genügen zum Ausrichten der Bézier-Handles zwei Hilfslinien. Entsprechend wird der jeweilige Anfasser wiederum mit gedrückter G-Taste an den passenden Schnittpunkten eingerastet (z.B. X-R / YA für Anfasser A1).
- Als letzte Aktion wird P5 direkt über P1 geschoben (Taste G nicht vergessen).
- KreisAnimation3.jpg (62.3 KiB) 72 mal betrachtet
Dieser Kreis kann nun mit verschiedenen Eigenschaften in der Timeline platziert werden. Dabei ist jedoch unbedingt zu unterscheiden:
- Die Animation "Kreis1" kann beliebig oft vom Pool in die Timeline gezogen und dort mit den TL-Eigenschaften modifiziert werden, d.h.
- die Größe des Kreises lässt sich einfach mit der Zoomfunktion einstellen und
- die Position des Kreises im Screen ist beliebig.
- Sollen allerdings Farbe, Linienstärke oder Strichlierung geändert werden, muss im Pool eine neue Animation erstellt werden. Am besten "Kreis1" im Pool mit rechter Maustaste und Animation duplizieren eine Kopie erstellen und dort dann Farbe etc. modifizieren.
, aber wenn man einen exakten Kreis nachbilden will... . Wer das Ganze nicht nachbasteln mag, kann sich bei Interesse das Kreis-Miniprojekt hier herunterladen (Voraussetzung: Wings X Advanced Version 3.7):https://magentacloud.de/s/qkp6BALSWA227kR
Übrigens: Auf einer zweiten Timeline in diesem Musterprojekt habe ich mich an den Olympischen Ringen versucht. Weil die ineinander verschlungen sind, geht das zwar nur mit mehr oder weniger komplizierten Masken, aber schaut ganz gut aus...
Und jetzt wünsche ich Euch allen, eingeschlossen natürlich auch die beiden Christophs, friedvolle Weihnachten, entspannte Feiertage und einen guten Rutsch in ein glückliches, gesundes 2026!
Gerhard