Konvertieren von Figma-Prototypanimationen in Flutter-Physik-Widgets
Erfahren Sie, wie Sie Figma-Prototypanimationen in nativen Flutter SpringSimulation- und AnimationController-Code ohne Übergabeschulden exportieren.
Kernaussage
Um Figma-Animationen in Flutter zu übersetzen, erstellen Entwickler normalerweise AnimationController mit CurvedAnimations. Für ein authentisches Mobilgefühl in Flutter sind jedoch SpringSimulation und physikbasierte Gesten erforderlich. ExodeUI übersetzt visuelle Vektorebenen und Federspannungen direkt in Flutter-Widget-Bäume.
Warum CurvedAnimation in Flutter enttäuscht
Flutter bietet Standardkurven (Curves.easeInOut, Curves.fastOutSlowIn), diese sind jedoch an die Dauer gebunden. Wenn ein Benutzer eine Wischgeste unterbricht, rasten die Dauerkurven ein. Durch die Nutzung von SpringSimulation mit SpringDescription (Masse, Steifigkeit, Dämpfung) werden Flutter-Animationen völlig natürlich.
Produktionsnahes Implementierungsbeispiel
// Flutter Spring Simulation Widget
import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
class SpringCard extends StatefulWidget {
@override
_SpringCardState createState() => _SpringCardState();
}
class _SpringCardState extends State<SpringCard> with SingleTickerProviderStateMixin {
late AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
void _runSpring(double target) {
final spring = SpringDescription(mass: 1.0, stiffness: 420.0, damping: 24.0);
final simulation = SpringSimulation(spring, _controller.value, target, 0);
_controller.animateWith(simulation);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTapDown: (_) => _runSpring(0.92),
onTapUp: (_) => _runSpring(1.0),
child: ScaleTransition(scale: _controller, child: Card(child: Text("Exode Flutter"))),
);
}
}