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