Преобразование анимации прототипа 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"))),
);
}
}