Chuyển đổi Ảnh động nguyên mẫu Figma thành Widget Vật lý Flutter
Tìm hiểu cách xuất hoạt ảnh nguyên mẫu Figma thành mã Flutter SpringSimulation và AnimationController gốc với khoản nợ chuyển giao bằng 0.
Điểm chính
Để dịch hoạt ảnh Figma sang Flutter, các nhà phát triển thường xây dựng AnimationControllers bằng CurvedAnimations. Tuy nhiên, cảm giác di động đích thực trong Flutter yêu cầu SpringSimulation và các cử chỉ dựa trên vật lý. ExodeUI chuyển các lớp vectơ trực quan và lực căng lò xo trực tiếp thành cây phụ tùng Flutter.
Tại sao CurvedAnimation trong Flutter lại gây thất vọng
Flutter cung cấp các Curves tiêu chuẩn (Curves.easeInOut, Curves.fastOutSlowIn), nhưng chúng có giới hạn về thời lượng. Nếu người dùng làm gián đoạn cử chỉ vuốt, đường cong thời lượng sẽ thay đổi. Bằng cách tận dụng SpringSimulation với SpringDescription(khối lượng, độ cứng, độ giảm chấn), hoạt ảnh Flutter trở nên hoàn toàn tự nhiên.
Đoạn mã triển khai thực tế
// 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"))),
);
}
}