Conversia animațiilor prototip Figma în widget-uri de fizică Flutter
Aflați cum să exportați animațiile prototip Figma în codul nativ Flutter SpringSimulation și AnimationController cu zero datorii de transfer.
Core Takeaway
Pentru a traduce animațiile Figma în Flutter, dezvoltatorii construiesc de obicei AnimationControllers cu CurvedAnimations. Cu toate acestea, simțul mobil autentic în Flutter necesită SpringSimulation și gesturi bazate pe fizică. ExodeUI traduce straturile vectoriale vizuale și tensiunile arcului direct în arbori widget Flutter.
De ce CurvedAnimation în Flutter dezamăgește
Flutter oferă curbe standard (Curves.easeInOut, Curves.fastOutSlowIn), dar acestea sunt legate de durată. Dacă un utilizator întrerupe un gest de glisare, curbele de durată se fixează. Prin folosirea SpringSimulation cu SpringDescription (masă, rigiditate, amortizare), animațiile Flutter devin complet naturale.
Fragment de implementare a producției
// 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"))),
);
}
}