Figma-prototyyppianimaatioiden muuntaminen Flutter-fysiikka-widgeteiksi
Opi viemään Figma-prototyyppianimaatioita alkuperäiseen Flutter SpringSimulation- ja AnimationController-koodiin ilman kanavanvaihtovelkaa.
Core Takeaway
Kääntääkseen Figma-animaatioita Flutter:ksi kehittäjät yleensä rakentavat AnimationControllers-ohjaimia CurvedAnimationsilla. Aito mobiilitunne Flutter:ssä vaatii kuitenkin SpringSimulationin ja fysiikkaan perustuvia eleitä. ExodeUI muuntaa visuaaliset vektorikerrokset ja jousijännitykset suoraan Flutter-widget-puiksi.
Miksi CurvedAnimation in Flutter pettyy
Flutter tarjoaa vakiokäyrät (Curves.easeInOut, Curves.fastOutSlowIn), mutta ne ovat kestoon sidottuja. Jos käyttäjä keskeyttää pyyhkäisyeleen, kestokäyrät napsahtavat. Käyttämällä SpringSimulationia SpringDescriptionilla (massa, jäykkyys, vaimennus), Flutter-animaatioista tulee täysin luonnollisia.
Tuotannon toteutuskatkelma
// 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"))),
);
}
}