Konwersja animacji prototypu Figma na widżety fizyki Flutter
Dowiedz się, jak eksportować animacje prototypów Figma do natywnego kodu Flutter SpringSimulation i AnimationController z zerowym długiem przekazywania.
Rdzeń na wynos
Aby przetłumaczyć animacje Figma na Flutter, programiści zazwyczaj konstruują kontrolery AnimationController za pomocą CurvedAnimations. Jednak autentyczne wrażenia mobilne w Flutter wymagają SpringSimulation i gestów opartych na fizyce. ExodeUI przekłada wizualne warstwy wektorowe i naprężenia sprężyn bezpośrednio na drzewa widżetów Flutter.
Dlaczego CurvedAnimation w Flutter rozczarowuje
Flutter oferuje standardowe krzywe (Curves.easeInOut, Curves.fastOutSlowIn), ale są one ograniczone czasem trwania. Jeśli użytkownik przerwie gest machnięcia, krzywe czasu trwania zostaną przesunięte. Wykorzystując SpringSimulation z SpringDescription (masa, sztywność, tłumienie), animacje Flutter stają się całkowicie naturalne.
Fragment wdrożenia produkcyjnego
// 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"))),
);
}
}