Перетворення анімації прототипу Figma у віджети фізики Flutter
Дізнайтеся, як експортувати анімацію прототипу Figma у власний код Flutter SpringSimulation і AnimationController з нульовою заборгованістю передавання.
Основний винос
Щоб перекласти анімацію 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"))),
);
}
}