Convertendo animações de protótipo Figma em widgets de física Flutter
Aprenda como exportar animações de protótipo Figma para código nativo Flutter SpringSimulation e AnimationController com dívida de transferência zero.
Ponto principal
Para traduzir animações Figma em Flutter, os desenvolvedores normalmente constroem AnimationControllers com CurvedAnimations. No entanto, a sensação móvel autêntica no Flutter requer SpringSimulation e gestos baseados na física. ExodeUI traduz camadas vetoriais visuais e tensões de mola diretamente em árvores de widgets Flutter.
Por que CurvedAnimation em Flutter decepciona
Flutter oferece curvas padrão (Curves.easeInOut, Curves.fastOutSlowIn), mas estas são limitadas pela duração. Se um usuário interromper um gesto de deslizar, as curvas de duração serão ajustadas. Ao aproveitar SpringSimulation com SpringDescription (massa, rigidez, amortecimento), as animações Flutter tornam-se completamente naturais.
Trecho de implementação em produção
// 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"))),
);
}
}