Klaster Figma Motion9 min čítanie·Tím ExodeUI
Prevod animácií prototypu Figma na widgety fyziky Flutter
Zistite, ako exportovať prototypové animácie Figma do natívneho kódu Flutter SpringSimulation a AnimationController s nulovým odovzdaním dlhu.
Priame zhrnutie a definícia
Core Takeaway
Na preklad animácií Figma do Flutter vývojári zvyčajne vytvárajú AnimationControllers s CurvedAnimations. Autentický mobilný pocit v Flutter však vyžaduje SpringSimulation a fyzikálne gestá. ExodeUI prekladá vizuálne vektorové vrstvy a pružinové napätia priamo do stromov widgetov Flutter.
Prečo CurvedAnimation v Flutter sklame
Flutter ponúka štandardné krivky (Curves.easeInOut, Curves.fastOutSlowIn), ale tieto sú viazané na trvanie. Ak používateľ preruší gesto potiahnutia, krivky trvania sa zachytia. Využitím SpringSimulation s SpringDescription (hmotnosť, tuhosť, tlmenie) sa animácie Flutter stanú úplne prirodzenými.
Snippet implementácie výroby
Implementácia interaktívnych komponentov
// 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"))),
);
}
}