Figma Prototip Animasyonlarını Flutter Fizik Widget'larına Dönüştürme
Sıfır geçiş borcuyla Figma prototip animasyonlarını yerel Flutter SpringSimulation ve AnimationController koduna nasıl aktaracağınızı öğrenin.
Ana nokta
Figma animasyonlarını Flutter'e çevirmek için geliştiriciler genellikle CurvedAnimations ile AnimationControllers'ı oluşturur. Ancak Flutter'teki özgün mobil his, SpringSimulation'ı ve fizik tabanlı hareketleri gerektirir. ExodeUI, görsel vektör katmanlarını ve yay gerilimlerini doğrudan Flutter widget ağaçlarına dönüştürür.
Flutter'teki CurvedAnimation Neden Hayal Kırıklığına Uğradı?
Flutter standart Eğriler sunar (Curves.easeInOut, Curves.fastOutSlowIn), ancak bunlar süreye bağlıdır. Kullanıcı kaydırma hareketini yarıda keserse süre eğrileri sabitlenir. SpringSimulation'ı SpringDescription(kütle, sertlik, sönümleme) ile birlikte kullanarak Flutter animasyonları tamamen doğal hale gelir.
Üretim için uygulama örneği
// 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"))),
);
}
}