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"))),
);
}
}