Android Flutter实现弹簧动画交互的示例详解.docx
第
Android?Flutter实现弹簧动画交互的示例详解
目录1.创建一个动画控制器2.使用手势移动Widget3.创建一个动画Widget4.计算速度以模拟弹簧运动物理模拟可以让应用程序的交互感觉逼真和互动，例如，你可能希望为一个Widget设置动画，使其看起来像是附着在弹簧上或是重力下落。本文章实现了演示了如何使用弹簧模拟将小部件从拖动的点移回中心。
实现步骤如下
设置动画控制器使用手势移动小部件为小部件制作动画计算速度以模拟弹簧运动
1.创建一个动画控制器
首页创建一个测试使用的Demo页面
voidmain(){
runApp(constMaterialApp(home:PhysicsCardDragDemo()));
classPhysicsCardDragDemoextendsStatelessWidget{
constPhysicsCardDragDemo({super.key});
@override
Widgetbuild(BuildContextcontext){
returnScaffold(
appBar:AppBar(),
body:constDraggableCard(
child:FlutterLogo(
size:128,
}
DraggableCard是自定义的一个StatefulWidget，代码如下：
class_DraggableCardStateextendsStateDraggableCard{
@override
voidinitState(){
super.initState();
@override
voiddispose(){
super.dispose();
@override
Widgetbuild(BuildContextcontext){
returnAlign(
child:Card(
child:widget.child,
}
然后在_DraggableCardState中创建一个动画控制器，并在页面销毁的时候释放动画控制器，代码如下：
class_DraggableCardStateextendsStateDraggableCard
withSingleTickerProviderStateMixin{
lateAnimationController_controller;
@override
voidinitState(){
super.initState();
_controller=AnimationController(vsync:this,duration:constDuration(seconds:1));
@override
voiddispose(){
_controller.dispose();
super.dispose();
@override
Widgetbuild(BuildContextcontext){
returnAlign(
child:Card(
child:widget.child,
}
SingleTickerProviderStateMixin是用来在StatefulWidget中管理单个AnimationController的Mixin；它提供了一个TickerProvider，用于将AnimationController与TickerProviderStateMixin一起使用。
TickerProviderStateMixin提供了一个Ticker，它可以在每个frame中调用AnimationController的方法，这使得AnimationController可以在每个frame中更新动画。
2.使用手势移动Widget
在_DraggableCardState中，结合使用Alignment与GestureDetector，代码如下：
class_DraggableCardStateextendsStateDraggableCard
withSingleTickerProviderStateMixin{
lateAnimationController_controller;
Alignment_dragAlignment=constAlig