Klastr Figma Motion9 min čtení·Tým ExodeUI
Převod prototypových animací Figma na fyzikální widgety Flutter
Naučte se exportovat prototypové animace Figma do nativního kódu Flutter SpringSimulation a AnimationController s nulovým předáním.
Přímé shrnutí a definice
Core Takeaway
K překladu animací Figma do Flutter vývojáři obvykle vytvářejí AnimationControllers s CurvedAnimations. Autentický mobilní pocit v Flutter však vyžaduje SpringSimulation a fyzikální gesta. ExodeUI převádí vizuální vektorové vrstvy a napětí pružin přímo do stromů widgetů Flutter.
Proč CurvedAnimation v Flutter zklame
Flutter nabízí standardní křivky (Curves.easeInOut, Curves.fastOutSlowIn), ale ty jsou vázány na dobu trvání. Pokud uživatel přeruší gesto přejetí, křivky trvání se zachytí. Díky využití SpringSimulation s SpringDescription (hmotnost, tuhost, tlumení) se animace Flutter stanou zcela přirozenými.
Fragment implementace výroby
Implementace interaktivních komponent
// 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"))),
);
}
}