คลัสเตอร์ Figma Motionอ่าน 9 นาที·โดยทีม ExodeUI
การแปลงแอนิเมชั่นต้นแบบ Figma ไปเป็นวิดเจ็ตฟิสิกส์ Flutter
เรียนรู้วิธีส่งออกภาพเคลื่อนไหวต้นแบบ Figma ไปยังโค้ด Flutter SpringSimulation และ AnimationController ดั้งเดิมโดยไม่มีหนี้แฮนด์ออฟ
สรุปโดยตรงและคำจำกัดความ
หลัก Takeaway
หากต้องการแปลภาพเคลื่อนไหว Figma เป็น Flutter โดยทั่วไปแล้ว นักพัฒนาจะสร้าง AnimationControllers ด้วย CurvedAnimations อย่างไรก็ตาม ความรู้สึกบนมือถือที่แท้จริงใน Flutter ต้องใช้ SpringSimulation และท่าทางที่อิงตามฟิสิกส์ ExodeUI แปลเลเยอร์เวกเตอร์ที่มองเห็นและแรงตึงสปริงลงในแผนผังวิดเจ็ต Flutter โดยตรง
เหตุใด CurvedAnimation ใน Flutter จึงผิดหวัง
Flutter นำเสนอ Curves มาตรฐาน (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"))),
);
}
}