Figma Motion-klynge9 min lesing·Av ExodeUI-teamet
Konvertering av Figma-prototypeanimasjoner til Flutter Physics Widgets
Lær hvordan du eksporterer Figma-prototypeanimasjoner til opprinnelig Flutter SpringSimulation og AnimationController-kode med null overleveringsgjeld.
Direkte sammendrag og definisjon
Kjerne takeaway
For å oversette Figma-animasjoner til Flutter, konstruerer utviklere vanligvis AnimationControllers med CurvedAnimations. Autentisk mobilfølelse i Flutter krever imidlertid vårsimulering og fysikkbaserte bevegelser. ExodeUI oversetter visuelle vektorlag og fjærspenninger direkte til Flutter-widget-trær.
Hvorfor CurvedAnimation i Flutter skuffer
Flutter tilbyr standard kurver (Curves.easeInOut, Curves.fastOutSlowIn), men disse er varighetsbundne. Hvis en bruker avbryter en sveipebevegelse, klikker varighetskurvene. Ved å utnytte SpringSimulation med SpringDescription (masse, stivhet, demping), blir Flutter-animasjoner helt naturlige.
Snippet for produksjonsimplementering
Interaktiv komponentimplementering
// 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"))),
);
}
}