Juicy Motion

Was macht Juicy Motion?

Denke wie ein Motion Designer: Nutze Antizipation, Impact und Dissipation, um jedes Ereignis ausdrucksstark und lesbar zu machen. Die vom Benutzer geschätzte Referenz ist der Vorschlag Quinas 03 · Der Lohn ist da: Ein Umschlag erwacht zum Leben und enthüllt die Belohnung in Schichten. Das wiederverwendbare Prinzip ist die Bewegungssprache; das Objekt, die Marke und die Intensität hängen vom Produkt ab.

Familie auswählen

Behalte den gemeinsamen Kern innerhalb dieser Skill und konsultiere nur die notwendigen Rezepte:

• Belohnungen und Enthüllungen: Truhen, Umschläge, Erfolge, Gegenstände und Münzen. Konsultiere Belohnungs- und Timing-Rezepte.
• Impacts und Kampf: Treffer, Schwertbögen, Schüsse und Reaktion des Ziels. Konsultiere Impacts und VFX.
• Magie und Elemente: Aufladen, Projektile, Blitze und Eis. Konsultiere ebenfalls Impacts und VFX beim entsprechenden Rezept.

Die sieben Videos von qutsune/EgorV befinden sich im Referenzkatalog, mit dem, was beobachtet wurde und der vorgeschlagenen Anwendung. Konsultiere ihn, um eine Referenz auszuwählen oder einen gewünschten Effekt anzunähern. Die Truhe war bereits der visuelle Ursprung des Quinas-Rezepts; die anderen erweitern das Repertoire auf Impacts und VFX. Trenne eine andere Skill ab, wenn es einen eigenen, substanziellen Workflow gibt, z. B. Shader und VFX-Integration in eine bestimmte Engine; ein anderes visuelles Element reicht als Rezept innerhalb dieser Skill.

Das Ereignis entwerfen

• Identifiziere den Auslöser, den Ursprung der Aktion, den enthüllten Inhalt oder das getroffene Ziel und das Endergebnis. Bei einem Geldgewinn kann das Ziel die Geldbörse sein; bei einer Freischaltung die neue verfügbare Option; bei einem Angriff der Kontakt und die Reaktion des Ziels.
• Wähle die passende Vorbereitung: Wackeln und Stauchen bei einer Öffnung, Rückzug bei einem Schlag oder Aufladen, bevor Energie abgegeben wird. Koordiniere Strecken mit dem Austritt, Überschwingen mit der Ankunft und Beruhigung mit dem Lesen, wenn dies sinnvoll ist. Vermeide eine Ansammlung von Elementen, die nur gemeinsam einblenden.
• Trenne die Ebenen zeitlich. Bei einer Belohnung: Öffnen → Licht aussenden → Objekt/Wert enthüllen → Impact markieren → Sterne verteilen → mit Staub verlängern. Bei einem Angriff: Vorbereiten → Abfeuern/Schlagen → Kontakt → Reagieren → Verpuffen. Die Erzählung hat Vorrang vor der Anzahl der Partikel oder der Menge der Ebenen.
• Passe die Intensität an die Häufigkeit an. Eine seltene Feier kann präsenter sein; eine häufige Warnung benötigt weniger Wartezeit und geringere Belegung. Lokalisiere den Impact auf dem Objekt/der Karte, ohne die gesamte Anwendung automatisch zu erschüttern.
• Bei einem häufigen Effekt oder Kampf erhalte die Lesbarkeit der Aktion, des Ziels und der Befehle. Die zeremonielle Zeit einer Belohnung ist nicht das Timing eines Angriffs.
• Die Erstellungsreihenfolge eines Tutorials bestimmt nicht die Verzögerungen des Effekts. Verankere die Ebenen im selben Ereignis: Aufblitzen, Reaktion und Ton können im Kontakt zusammenfallen, während Spur und Rückstände eigene Dauern haben. Auch die Videodauer ist nicht die Dauer der gezeigten Aktion.

Bau und Vorschau

Bevorzuge HTML/CSS/SVG und die Web Animations API für Objekte und UI-Effekte. Nutze die Ressourcen und die Architektur des Projekts; generiere kein Bitmap für einen Effekt, der von Verformung, Öffnung und einstellbaren Bahnen abhängt. Verwende in Spielen den vorhandenen Renderer und Update-Zyklus für Effekte in der Welt; eine Web-Vorschau kann das Timing studieren, ohne dem Integrationsziel DOM/CSS aufzuzwingen.

Um ein eigenständiges Belohnungsexperiment zu starten, kopiere und passe assets/reward-envelope.html an. Es ist ein in sich geschlossenes Beispiel ohne Bibliotheken, Bilder oder Netzwerk: Umschlag, generisches Medaillon, Licht, Sterne, Staub, Gewinn und simulierte Geldbörse, mit Replay, Scrubber, Geschwindigkeit, Ebenen und reduzierter Bewegung. Ändere CONFIG, die Komposition und die Bahnen nach Bedarf; das Beispiel ersetzt nicht das produktspezifische Design.

Die Vorschau soll es ermöglichen, das Ergebnis zu fühlen und das Timing zu inspizieren: Replay, Play/Pause, Zeitlupe und Zeitleiste. Ebenen-Toggles helfen, den Beitrag von Antizipation, Licht und Partikeln zu verstehen. Vergleiche beim Erkunden die Basisaktion mit den hinzugefügten Ebenen und identifiziere das Problem, das jede löst: unklarer Ursprung, schwacher Kontakt, reaktionsloses Ziel oder unlesbare Konsequenz. Zeige Nutzungsgröße und Kontext, nicht nur ein großes isoliertes Objekt. Die Anzahl der Varianten richtet sich nach der Anfrage und den lokalen Regeln; beim Verfeinern einer genehmigten Variante behalte das Beispiel und fokussiere die Verfeinerung, anstatt die Erkundung neu zu eröffnen.

Ein Screenshot ist eine Hilfe; er beweist keine Bewegung. Überprüfe die Wiedergabe und stoppe auch die Zeitleiste bei Vorbereitung, Aktion/Kontakt, Reaktion und Abschluss. Liefere einen direkten Link zum interaktiven Beispiel. Unterscheide simulierte Werte von echten Ereignissen und Zahlungen.

Nützliche Invarianten

• Verwende eine gemeinsame Zeitleiste für die Ebenen. Replay/Seek soll denselben Zustand liefern und eine Duplizierung von Partikeln, Timern oder Listenern vermeiden. Bei prozeduraler Variation konserviere den Seed, um zu reproduzieren und zu vergleichen.
• Animieren in UI hauptsächlich transform und opacity. Verwende Wrapper, um Verformung, Verschiebung und Austritt zu trennen, wenn mehrere Effekte um dieselbe Eigenschaft konkurrieren würden.
• Ein verspäteter Austritt darf nicht den Anfangszustand überschreiben: Verwende in WAAPI fill: 'forwards' bei diesem Austritt oder komponiere die Phasen in einer einzigen Animation. Überprüfe den Zustand bei t=0 und nach dem Zurückziehen des Scrubbalkens.
• Berechne das Ziel der Münzen aus der tatsächlichen Position der Geldbörse innerhalb der Szene und berechne bei Größenänderung neu. Fixiere die Bahn nicht auf den Monitor des Autors.
• Bei reduzierter Bewegung halte Inhalt und Ergebnis direkt lesbar und entferne Wackeln, Stauchen, Partikel, Flug, Rütteln und Blitze. Eine Vorschau kann einen expliziten Befehl anbieten, um die Bewegung zu erleben; behalte die manuelle Wahl des Benutzers.
• Ton ist eine optionale Ebene, die durch Interaktion gestartet wird und über eine Steuerung verfügt. Erhalte die vorhandenen Einstellungen und vermeide zwei Töne für denselben Gewinn.
• Respektiere bei der Integration die Ereignisse und Verträge der Domäne. Eine Belohnung geht von einem bestätigten Ereignis aus; die Animation weist kein Geld zu, ändert keine Inventare und erschließt den Gewinn nicht durch Kontodifferenz oder Timer-Ablauf. Unterscheide bei Kampf zwischen Abfeuern, Kontakt und bestätigtem Schaden; respektiere die bestehende visuelle Vorhersage, ohne das Ende des Effekts in einen Treffernachweis zu verwandeln.

Konservieren und Wiederverwenden

Im Quinas konsultiere docs/Identity/MOTION.md und docs/Identity/motion/recompensas-03/ innerhalb des Repositorys. Dies ist die kanonische Quelle für die Wahl, die T01/Q-Ressourcen und das genehmigte Beispiel. Folge auch den lokalen Regeln für Vorschauen, S2/T2, Themen und Artefakt-Speicherung.

In anderen Projekten konserviere die Methode und verwende die Identität dieses Produkts. Übernimm nicht automatisch die Marke, die Währung oder die Steuerelemente des Quinas.

Wenn der Benutzer genehmigt und um Konservierung bittet, speichere reproduzierbaren Code, Ressourcen, Timing und Umfang der Wahl an einem dauerhaften Ort der Identität, zusätzlich einem Link in den Design-Indizes. Unterscheide genehmigte Referenz von echter Integration. Eine Aufgabe zur Vorschau oder Konservierung verbleibt in diesem Umfang; eine Implementierungsanfrage folgt der bereits bestehenden Autorisierung, ohne ein neues Gate zu erfinden.

Überprüfe den kleinsten relevanten Umfang: Wiedergabe, Rückwärts-Suche, Replay, Inhaltswechsel, Themen, kleiner Bildschirm, Ziel der Bahnen, Ressourcen und Konsole. Führe die vom Projekt geforderten Integrationstests durch, wenn du das Produkt änderst.