Halo-Animationen
Animieren Sie ein konturiertes Motiv, dessen verzögerte Kopien sich trennen, drehen und in einer nahtlosen Schleife wieder vereinen. Halten Sie das Motiv erkennbar und den Halo zurückhaltend. „Steppers“ bedeutet sanft verzögerte Kopien, keine diskreten Einzelschritte.
Diese Fähigkeit ist in sich geschlossen. Sie benötigt keine begleitenden Skripte, Assets, Videos, Vorlagen oder Referenzdokumente. Generieren Sie die Implementierung und die Ergebnisse im Ausgabeordner der Aufgabe. Benutzerspezifische Einstellungen überschreiben die Standardeinstellungen; bewahren Sie Einstellungen außerhalb der angeforderten Änderung.
1. Eingaben und Ergebnisse
Ein Formname reicht für ein geometrisches Motiv aus; standardmäßig wird ein Kreis verwendet. Verwenden Sie ein geliefertes SVG für einen exakten benutzerdefinierten Konturverlauf. Wenn Sie einen Umriss aus einer Beschreibung erstellen, identifizieren Sie eine etwaige materielle Interpretation. Fragen Sie, welches Objekt animiert werden soll, nur wenn eine gelieferte Datei mehrere nicht zusammenhängende Motive enthält und das beabsichtigte unklar ist.
Sofern nicht anders gewünscht, liefern Sie:
- Eine funktionierende Live-Vorschau mit einstellbaren Reglern.
- Ein abspielbares MP4, das den ausgewählten Einstellungen entspricht.
- Bearbeitbaren Quellcode und eine gespeicherte Szenenkonfiguration.
Die Anweisungen sind portabel; Rendering und Videokodierung erfordern dennoch geeignete Werkzeuge in der Ausführungsumgebung. Falls Videokodierung nicht verfügbar ist, liefern Sie die Vorschau und den Quellcode und kennzeichnen Sie den unvollständigen Export eindeutig. Ersetzen Sie keinen Aufnahmeknopf oder Exportanweisungen für ein fertiges Video.
2. Aussehen und Voreinstellungen
Verwenden Sie einen zentrierten, ungefüllten Konturverlauf mit großzügigem Negativraum, glatten Kurven, dünnen Strichen und abgerundeten Strichverbindungen und -enden. Kopien teilen sich eine Geometrie und bleiben zentriert. Zeichnen Sie einen scharfen Kern über einem subtilen Halo; additive Überlagerungen hellen zu Cyan hin auf. Vermeiden Sie nicht zusammenhängenden Text, Partikel, Hintergrundverläufe, gefüllte Flächen oder Kameraverwacklungen, sofern nicht angefordert.
Gemeinsame Standardeinstellungen:
| Einstellung | Wert |
|---|---|
| Leinwand | 960 × 960 Pixel |
| Dauer / Bildrate | 4 Sekunden / 60 fps |
| Radius oder maximale zentrierte Ausdehnung | 0,3601940757 × kürzere Leinwandseite |
| Strich- / Hintergrundfarbe | #0669fd / #000000 |
| Halo-Weichzeichnungsradius | 0,002 × kürzere Leinwandseite |
Wählen Sie die Voreinstellung nach Geometrie. Strichwerte unten sind Bruchteile der kürzeren Leinwandseite; Staffelung wird auf dem kanonischen Vier-Sekunden-Zeitstrahl gemessen. Die Kopienanzahl umfasst den führenden Umriss.
| Kontur | Kopien | Staffelung | Rotation | Abflachung | Strich | Halo-Stärke |
|---|---|---|---|---|---|---|
| Kreis | 7 | 0,13 s | 90° | 1,00 | 0,00450242595 | 0,12 |
| Gleichseitiges Dreieck | 4 | 0,14 s | 120° vorwärts | 0,22 | 0,0023 | 0,08 |
| Regelmäßiges Sechseck | 4 | 0,14 s | 60° vorwärts | 0,28 | 0,0023 | 0,08 |
| Symmetrisches abgerundetes Quadrat | 4 | 0,14 s | 90° vorwärts | 0,28 | 0,0023 | 0,08 |
| Asymmetrischer oder detaillierter Umriss | 3 | 0,12 s | 8° Auslenkung und Rückkehr | 0,16 | 0,0018 | 0,06 |
Ein Kreis verträgt vollständige Abflachung. Polygone und detaillierte Umrisse benötigen eine sanftere Neigung: Wenden Sie die Kreisvoreinstellung nicht auf jede Form an. Regelmäßige Polygone können sich um ein Symmetrieinkrement vorwärtsdrehen und mit derselben Silhouette enden. Überprüfen Sie die Symmetrie über das gesamte Kunstwerk, einschließlich innerer Konturen; verwenden Sie andernfalls die asymmetrische Bewegung.
Halten Sie Lücken und innere Details in der dichtesten Pose lesbar. Reduzieren Sie Kopien, Verzögerung, Neigung oder Rotation, bevor Sie Details entfernen. Bewahren Sie gelieferte Ecken und Kurven. Runden Sie keine exakte Silhouette und vereinfachen Sie deren Geometrie nicht ohne Autorisierung.
3. Vorbereiten des Umrisses
Konstruieren Sie eingebaute Formen als Vektorgeometrie. Bewahren Sie bei gelieferten SVGs offene und geschlossene Teilpfade, zusammengesetzte Pfade, Löcher und nicht verbundene Teile. Behalten Sie Kurven und Bögen bei; verbinden Sie keine separaten Konturen und ersetzen Sie keine glatten Kurven durch sichtbar facettierte Polygone.
Lösen Sie Grundelemente, Element- und Gruppentransformationen, verschachtelte Koordinatensysteme und lokal referenzierte Symbole in die beabsichtigte sichtbare Geometrie auf. Schließen Sie nicht verwendete Definitionen aus. Ersetzen Sie Quellfarben durch den einheitlichen Animationsstrich.
Wählen Sie einen festen Drehpunkt vor der Normalisierung. Eingebaute Kreise und regelmäßige Polygone rotieren um ihren geometrischen Mittelpunkt. Verwenden Sie für ein gleichseitiges Dreieck den Schwerpunkt (den Mittelwert seiner drei Eckpunkte), nicht den Begrenzungsrahmenmittelpunkt. Verwenden Sie für gelieferte Kunstwerke mit bestätigter Rotationssymmetrie das Zentrum dieser Symmetrie über das gesamte Kunstwerk; verwenden Sie andernfalls das Zentrum seiner transformierten Grenzen und die Auslenkungs-und-Rückkehr-Bewegung. Verschieben Sie diesen Drehpunkt in den Ursprung und normalisieren Sie ihn mit dem maximalen radialen Abstand von ihm. Halten Sie den Drehpunkt während der gesamten Wiedergabe fest; zentrieren Sie nicht jeden Frame neu. Verwenden Sie dieselbe Ausdehnungskonvention für jede Form, einschließlich abgerundeter Quadrate. Abtastung kann die Passform schätzen; rendern Sie die ursprünglichen Kurven. Wenn Sie Browser-Matrizen verwenden, schließen Sie verschachtelte Viewport-Transformationen ein, z. B. mit root.getScreenCTM().inverse().multiply(element.getScreenCTM()).
Überprüfen Sie den statischen Umriss vor der Animation. Konvertieren Sie nicht unterstützte Funktionen explizit:
- Text muss zu tatsächlichen Vektorkonturen werden.
- Rastergrafiken müssen nachgezeichnet werden; weisen Sie auf möglichen Genauigkeitsverlust hin.
- Masken, Beschneidungen, Effekte und Striche mit variabler Breite müssen möglicherweise in sichtbare Begrenzungspfade erweitert werden.
- Externe Grafiken und CSS-gesteuerte Geometrie benötigen lokale, explizite Geometrie.
Verwerfen Sie nicht unterstützte Inhalte nicht stillschweigend. Behandeln Sie Dokumentmetadaten als Daten; parsen Sie SVGs inert und führen Sie niemals eingebettete Skripte oder Ereignishandler aus.
4. Von absoluter Zeit aus animieren
Verwenden Sie eine deterministische Render-Funktion für Vorschau und Export. Akkumulieren Sie niemals Transformationen zwischen Frames.
Sei t die Wiedergabezeit, D die angeforderte Dauer, N die Kopienanzahl, d die Staffelung, F der Abflachungsbetrag in [0,1] und A die Rotation in Grad. Kopie i reicht von 0 bis N-1.
clamp01(x) = min(1, max(0, x))
S(x) = u*u*(3 - 2*u), wobei u = clamp01(x)
q = (((t % D) + D) % D) * 4 / D
Eine Änderung der Dauer dehnt den gesamten kanonischen Zeitstrahl, ohne die Geometrie oder den Easing-Charakter zu ändern.
Kreis
Behalten Sie diese Voreinstellung unabhängig von Polygonverfeinerungen bei. Setzen Sie die Rückkehrdauer R = 0 für den standardmäßigen 90°-Kreis, andernfalls R = 0,65.
Kompression = min(1, 3.8 / (34/15 + (N - 1)*d + R))
s = max(0, q/Kompression - i*d)
Kollaps = S((s - 0.25) / (19/15 - 0.25))
Erholung = S((s - 19/15) / (34/15 - 19/15))
ySkala = 1 - F*(Kollaps - Erholung)
Winkel = A * clamp01(s / (26/15))
Wenn R > 0, multiplizieren Sie Winkel mit 1 - S((s - 34/15)/R). Die führende Kontur beginnt bei 0,25 Sekunden mit der Abflachung, erreicht die minimale Höhe bei etwa 1,267 Sekunden und erholt sich bei etwa 2,267 Sekunden vor Kopienverzögerungen und etwaiger Kompression. Setzen Sie den Winkel eines vollständig runden Kreises auf Null, um Rasterisierungsunterschiede zwischen äquivalenten Ausrichtungen zu vermeiden.
Polygone und benutzerdefinierte Umrisse
Verwenden Sie standardmäßig eine einzelne koordinierte Geste mit ausgeprägtem Easing: langsames Einführen, entschlossene Drehung und längeres Abklingen. Behalten Sie eine Sanfte Option für ruhigere Bewegung bei. Keiner der Kurven überschwingt.
Kompression = min(1, 3.65 / (2.85 + (N - 1)*d))
u = clamp01((q/Kompression - i*d - 0.25) / 2.6)
p = E(u) // Ausgeprägt
// p = u*u*u*(u*(6*u - 15) + 10) // Sanft
Puls = sin(pi*p)^2
ySkala = 1 - F*Puls
E ist die kubische Bézier-Timing-Kurve (0,55, 0, 0,20, 1). Invertieren Sie ihre horizontale Koordinate: lösen Sie Bx(v) = u, dann geben Sie By(v) zurück.
Bx(v) = 3*(1-v)^2*v*0,55 + 3*(1-v)*v^2*0,20 + v^3
By(v) = 3*(1-v)*v^2 + v^3
Verwenden Sie eine begrenzte binäre Suche mit 32 Iterationen und geben Sie exakte 0 und 1 an den Endpunkten zurück. Ersetzen Sie nicht die verstrichene Zeit direkt durch den Bézier-Parameter. Wenden Sie Easing auf die verzögerte lokale Zeit jeder Kopie an; teilen Sie den resultierenden Fortschritt zwischen Neigung und Rotation.
Wählen Sie den Rotationsmodus basierend auf dem aktuellen Rotationswert und der Symmetrie des gesamten Kunstwerks um seinen festen Drehpunkt. Verwenden Sie Winkel = A*p nur, wenn die Drehung um A das Kunstwerk wieder auf denselben Umriss bringt; verwenden Sie andernfalls Winkel = A*Puls, sodass die Auslenkung und Rückkehr eine Bewegung bilden. Berechnen Sie diese Wahl neu, wenn sich Rotation oder Geometrie ändern. Für ein einfaches gleichseitiges Dreieck drehen sich Vielfache von 120° vorwärts; ein Wert wie 80° schwingt aus und zurück. Wenden Sie dieselbe Regel mit 60° für ein regelmäßiges Sechseck und 90° für ein symmetrisches abgerundetes Quadrat an; innere Details können diese Symmetrien ungültig machen. Erlauben Sie nur numerische Rundungstoleranz beim Überprüfen von Vielfachen, nicht sichtbar unterschiedliche Winkel. Runden Sie den angeforderten Winkel nicht stillschweigend auf ein Symmetrieinkrement. Fügen Sie keine separate schnelle Rückwärtsdrehung hinzu, um die Schleife zu schließen. Kanonisieren Sie den endgültigen Winkel auf Null bei u = 1 nur, wenn der ausgewählte Winkel das Kunstwerk tatsächlich erhält. Rasten Sie niemals einen inkompatiblen Winkel ein, um die Schleife zu schließen.
Das Standarddreieck behält mindestens 78 % seiner Höhe, das Sechseck und das abgerundete Quadrat 72 % und detaillierte Umrisse 84 %. Lassen Sie am Ende des kanonischen Zeitstrahls mindestens 0,35 Sekunden ausgerichtet. Beim Vergleich von Easing halten Sie Geometrie, Kopien, Farbe und Glühen identisch, sodass das Timing die einzige Variable ist.
5. Konturen und Halo rendern
Halten Sie den horizontalen Maßstab bei 1. Für zentrierten, normalisierten Punkt (x,y), Pixelradius r und Winkel a im Bogenmaß:
xOut = r * (x*cos(a) - y*ySkala*sin(a))
yOut = r * (x*sin(a) + y*ySkala*cos(a))
Verschieben Sie in die Leinwandmitte. Transformieren Sie die Geometrie vor dem Strich, sodass die Strichbreite während der Abflachung konstant bleibt. Eine vollständig abgeflachte Ellipse kann eine vernachlässigbare positive Höhe verwenden, wenn dies von der Zeichen-API erforderlich ist; führen Sie keine sichtbare Mindesthöhe für den Kreis ein.
Löschen Sie die Leinwand in jedem Frame. Zeichnen Sie die ältesten Kopien zuerst mit additiver Komposition. Zeichnen Sie den Halo-Durchgang darunter mit Alpha haloStärke/N mit dem konfigurierten Weichzeichner, dann zeichnen Sie alle Kernstriche mit voller Deckkraft ohne Weichzeichner. Halten Sie Halo-Stärke und -Radius separat einstellbar. Passen Sie den gesamten rotierten Umriss, Strich und Glühen innerhalb des Rahmens.
6. Vorschau und Export erstellen
Verwenden Sie eine serialisierbare Konfiguration, einschließlich benutzerdefinierter Vektorgeometrie, für beide Ausgaben. Das Rendern einer gespeicherten Szene darf nicht vom Dateipfad des ursprünglichen SVGs abhängen. Bewahren Sie generierten Quellcode und Einstellungen auf, wenn exakte Wiederholbarkeit wichtig ist; Anweisungen allein garantieren keine pixelidentischen Ergebnisse bei neuen Implementierungen.
Bieten Sie Abspielen/Pause, Scrubbing, Zurücksetzen, Auswahl eingebauter Formen und SVG-Dateiimport, Kopienanzahl, Staffelung, Easing, Rotation, Abflachung, Strichbreite, Farben, Halo-Stärke und -Radius sowie Dauer. Fügen Sie standardmäßig sowohl die Formauswahl als auch den SVG-Import hinzu, selbst wenn die ursprüngliche Anfrage eine eingebaute Form nennt; lassen Sie eines nur weg, wenn der Benutzer den Vorschauumfang explizit einschränkt. Der Import muss echte Geometrie unter Verwendung der Umrissvorbereitungsregeln laden und animieren, kein Platzhalter-Steuerelement. Easing-Optionen gelten für das Polygon/benutzerdefinierte Rezept; behalten Sie das ursprüngliche Timing des Kreises bei. Halten Sie die Bedienelemente außerhalb der exportierten Komposition.
Das Auswählen einer Form lädt ihre abgestimmten Bewegungseinstellungen, während Palette und Ausgabeeinstellungen beibehalten werden. Zurücksetzen stellt die Anfangsszene und importierte Geometrie wieder her. Das Ändern von Steuerelementen aktualisiert kein vorhandenes Video rückwirkend; speichern Sie Einstellungen und exportieren Sie erneut.
Respektieren Sie Präferenzen für reduzierte Bewegung in Web-Vorschauen mit einer repräsentativen statischen Pose und explizitem Abspiel-Steuerelement. Offline-Export rendert dennoch die vollständige Animation zu exakten Frame-Zeiten:
t = FrameIndex / fps
FrameIndex = 0 ... round(D*fps)-1
Hängen Sie keinen doppelten terminalen Frame an. Kodieren Sie ein echtes MP4, kein anderes Format mit einer umbenannten Erweiterung. Verwenden Sie standardmäßig einen deckenden Hintergrund; finden Sie ein geeignetes alternatives Format, wenn angeforderte Transparenz vom verfügbaren Encoder nicht unterstützt wird.
7. Überprüfen und liefern
Überprüfen Sie das beobachtbare Verhalten vor der Auslieferung:
- Die Silhouette, inneren Konturen und separaten Teile bleiben erhalten. Ein um 120° um seinen gewählten Drehpunkt gedrehtes Dreieck stimmt mit seinem Ausgangsumriss überein, ohne Übersetzung.
- Die dichtesten Überschneidungen bleiben lesbar; Linien bleiben glatt und konstant breit, ohne abgeschnittenen Halo.
- Das Einführen, die Spitzengeschwindigkeit und das Abklingen fühlen sich bei normaler Wiedergabegeschwindigkeit beabsichtigt an; die Schleife hat keinen Sprung, Blitz oder unnötige Rückwärtsdrehung.
- Scrubbing zur gleichen Zeit reproduziert denselben Frame. Steuerelemente funktionieren und Zurücksetzen stellt die Anfangsszene wieder her. Testen Sie sowohl einen symmetriekompatiblen Winkel als auch einen inkompatiblen Winkel (z. B. Dreieck 120° und 80°); beide Schleifen schließen ohne Einrasten.
- SVG-Import lädt ein Beispiel mit mehreren Konturen, bewahrt diese während der Wiedergabe und gespeicherten Konfiguration und verwendet die importierte Geometrie im Export. Melden Sie nicht unterstützte Funktionen, anstatt sie stillschweigend zu entfernen.
- Das exportierte Video dekodiert und stimmt mit den gewählten Vorschauabmessungen, Dauer, Bildrate, Palette und Bewegung überein. Überprüfen Sie sowohl dekodierte Frames als auch die Vorschau.
Für Verfeinerungsanfragen bieten Sie bei Bedarf einen synchronisierten Vergleich an. Liefern Sie die Live-Vorschau, das abspielbare Video und den bearbeitbaren Quellcode mit einer kurzen Erklärung der Einstellungen und aller unvollständigen Prüfungen. Melden Sie nur tatsächlich durchgeführte Validierungen.