Figma Motion集群阅读时间 9 分钟·ExodeUI 团队
将 Figma 原型动画转换为 Flutter 物理小部件
了解如何将 Figma 原型动画导出到本机 Flutter SpringSimulation 和 AnimationController 代码中，且切换债务为零。
直接总结和定义
核心要点
要将 Figma 动画转换为 Flutter，开发人员通常使用 CurvedAnimations 构建 AnimationController。然而，Flutter 中真实的移动感觉需要 SpringSimulation 和基于物理的手势。 ExodeUI 将视觉矢量图层和弹簧张力直接转换为 Flutter 小部件树。
为什么 Flutter 中的 CurvedAnimation 令人失望
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"))),
);
}
}