Μετατροπή κινούμενων σχεδίων πρωτοτύπων Figma σε γραφικά στοιχεία φυσικής Flutter
Μάθετε πώς να εξάγετε πρωτότυπα κινούμενα σχέδια Figma σε εγγενή κώδικα Flutter SpringSimulation και AnimationController με μηδενικό χρέος μεταβίβασης.
Core Takeaway
Για να μεταφράσουν τα κινούμενα σχέδια Figma σε Flutter, οι προγραμματιστές κατασκευάζουν συνήθως AnimationControllers με CurvedAnimations. Ωστόσο, η αυθεντική αίσθηση κινητού στο Flutter απαιτεί SpringSimulation και χειρονομίες που βασίζονται στη φυσική. Το ExodeUI μεταφράζει οπτικά διανυσματικά στρώματα και τάσεις ελατηρίου απευθείας σε δέντρα γραφικών στοιχείων Flutter.
Γιατί το CurvedAnimation στο Flutter απογοητεύει
Το Flutter προσφέρει τυπικές καμπύλες (Curves.easeInOut, Curves.fastOutSlowIn), αλλά αυτές έχουν περιορισμένη διάρκεια. Εάν ένας χρήστης διακόψει μια κίνηση ολίσθησης, οι καμπύλες διάρκειας θραύονται. Αξιοποιώντας το SpringSimulation με το SpringDescription (μάζα, ακαμψία, απόσβεση), τα κινούμενα σχέδια Flutter γίνονται εντελώς φυσικά.
Απόσπασμα υλοποίησης παραγωγής
// 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"))),
);
}
}