Animations-Magie
Erwecken Sie Ihre Konfiguratoren zum Leben
Animations-Grundlagen
Fügen Sie Bewegung und Interaktivität zu Ihren Konfiguratoren hinzu.
Objekte bewegen
Entlang Pfaden animieren
Elemente rotieren
Über Zeit drehen
Zustandsübergänge
Zwischen Zuständen morphen
Interaktive Demos
Produkte präsentieren
Timer-basierte Animationen
Verwenden Sie Timer für zeitbasierte Bewegungen.
Timer-Element
Type | Duration | Loop | Autostart timer | 2000 | true | true
type
Elementtyp
timer
duration
Animationslänge (ms)
2000
loop
Animation wiederholen
true
autostart
Automatisch starten
true
Animierte Eigenschaften
Animieren Sie jede numerische Eigenschaft mit Formeln.
Sinuswellen-Bewegung
Type | X | Y | Z cube | =50 + SIN(Timer*0.01)*100 | 0 | 0
Bewegt einen Würfel basierend auf dem Timer-Wert entlang der X-Achse hin und her.
Kameraflüge
Erstellen Sie filmreife Kamerapfade.
Kamerapfad
type
Elementtyp
cameraflight
positions
Array von Kamerapositionen
[[0,0,100],[100,0,100]]
duration
Flugdauer (ms)
5000
loop
Flug wiederholen
true
Übergänge
Sanft zwischen Werten animieren.
Wert-Übergang
Type | Property | From | To | Duration | Easing transition | opacity | 0 | 1 | 500 | easeInOut
Easing-Funktionen
Steuern Sie das Gefühl Ihrer Animationen.
Linear
Konstante Geschwindigkeit
Ease In
Langsam starten
Ease Out
Langsam enden
Ease In/Out
Langsam starten und enden
Bounce
Hüpfender Effekt
Elastic
Federnder Effekt
Ausgelöste Animationen
Starten Sie Animationen bei Benutzerinteraktion.
Schaltflächen-Auslöser
Type | Label | OnClick button | Animieren | startAnimation
Performance-Tipps
Halten Sie Ihre Animationen flüssig und schnell.
Objekte begrenzen
Zu viele Animationen verlangsamen
Einfache Pfade
Komplexe Berechnungen reduzieren FPS
Geräte testen
Überall flüssige Wiedergabe sichern
Loop-Einstellungen
Endlosschleifen brauchen mehr Ressourcen
Beispiel: Rotierendes Schaufenster
Type | Name | RY timer | Rotation | 0 cube | Box | =Rotation * 0.1
Erstellt einen langsam rotierenden Würfel für Produktpräsentationen.