Figma prototípus-animációk átalakítása Flutter fizikai widgetekké
Ismerje meg, hogyan exportálhat Figma prototípus-animációkat natív Flutter SpringSimulation és AnimationController kódba nulla átadás-átvételi tartozás nélkül.
Core Takeaway
A Figma animációk Flutter nyelvre történő lefordításához a fejlesztők általában CurvedAnimations segítségével készítenek AnimationControllers-t. A Flutter autentikus mobil érzéséhez azonban SpringSimulation és fizika-alapú gesztusok szükségesek. A ExodeUI a vizuális vektorrétegeket és a rugófeszültségeket közvetlenül Flutter widgetfákra fordítja.
Miért okoz csalódást a CurvedAnimation a Flutter-ben?
A Flutter szabványos görbéket kínál (Curves.easeInOut, Curves.fastOutSlowIn), de ezek időtartamhoz kötöttek. Ha a felhasználó megszakítja a csúsztatást, az időtartam görbéi bepattannak. A SpringSimulation és a SpringDescription (tömeg, merevség, csillapítás) felhasználásával a Flutter animációk teljesen természetesekké válnak.
Gyártási megvalósítási részlet
// 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"))),
);
}
}