Android Flutter实现弹簧动画交互的示例详解

更新时间：2023年04月28日 09:16:28 作者：早起的年轻人

物理模拟可以让应用程序的交互感觉逼真和互动，本文章实现了演示了如何使用弹簧模拟将小部件从拖动的点移回中心，感兴趣的可以了解一下

1.创建一个动画控制器

首页创建一个测试使用的Demo页面

void main() {
  runApp(const MaterialApp(home: PhysicsCardDragDemo()));
}
class PhysicsCardDragDemo extends StatelessWidget {
  const PhysicsCardDragDemo({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const DraggableCard(
        child: FlutterLogo(
          size: 128,
        ),
      ),
    );
  }
}

DraggableCard 是自定义的一个 StatefulWidget，代码如下：

class _DraggableCardState extends State<DraggableCard> {
  @override
  void initState() {
    super.initState();
  }
  @override
  void dispose() {
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Card(
        child: widget.child,
      ),
    );
  }
}

然后在 _DraggableCardState 中创建一个动画控制器，并在页面销毁的时候释放动画控制器，代码如下：

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _controller =  AnimationController(vsync: this, duration: const Duration(seconds: 1));
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Card(
        child: widget.child,
      ),
    );
  }
}

SingleTickerProviderStateMixin是用来在StatefulWidget中管理单个AnimationController的Mixin；它提供了一个TickerProvider，用于将AnimationController与TickerProviderStateMixin一起使用。

TickerProviderStateMixin提供了一个Ticker，它可以在每个frame中调用AnimationController的方法，这使得AnimationController可以在每个frame中更新动画。

2.使用手势移动Widget

在 _DraggableCardState 中，结合使用 Alignment 与 GestureDetector，代码如下：

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  Alignment _dragAlignment = const Alignment(0, 0);
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanDown: (details) {},
      onPanUpdate: (details) {
        _dragAlignment += Alignment(
          details.delta.dx / (size.width / 2),
          details.delta.dy / (size.height / 2),
        );
        setState(() {
        });
      },
      onPanEnd: (details) {},
      child: Align(
        alignment: _dragAlignment,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }

GestureDetector用来检测手势，例如轻触、滑动、拖动等，可以用来实现各种交互效果。

Alignment用于控制子widget在父widget中的位置。可以通过Alignment的构造函数来指定子widget相对于父widget的位置，如Alignment.topLeft表示子widget位于父widget的左上角。也可以通过FractionalOffset来指定子widget相对于父widget的位置，如FractionalOffset(0.5, 0.5)表示子widget位于父widget的中心。Alignment还可以与Stack一起使用，实现多个子widget的定位。

3.创建一个动画Widget

我们需要实现，当手指抬起时，被移动的 Widget 动画的方式弹回去。

在这里需要一个 Animation ，再定义一个 runAnimation 方法，同时为第一步创建的动画控制器添加一个更新监听。

class _DraggableCardState extends State<DraggableCard>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Alignment> _animation;
  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));
    _controller.addListener(() {
      setState(() {
        _dragAlignment = _animation.value;
      });
    });
  }
  void _runAnimation() {
    _animation = _controller.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );
    _controller.reset();
    _controller.forward();
  }
 }

然后在手指抬起的时候，执行动画，将被移动的 Widget （如这里的图片）以动画的方式移动回原位：

@override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return GestureDetector(
      onPanDown: (details) {
        _controller.stop();
      },
      onPanUpdate: (details) {
        _dragAlignment += Alignment(
          details.delta.dx / (size.width / 2),
          details.delta.dy / (size.height / 2),
        );
        setState(() {
        });
      },
      onPanEnd: (details) {
        _runAnimation();
      },
      child: Align(
        alignment: _dragAlignment,
        child: Card(
          child: widget.child,
        ),
      ),
    );
  }

4.计算速度以模拟弹簧运动

最后一步是做一些数学运算，计算小部件完成拖动后的速度。这是为了使小部件在被拍回之前能够以这种速度逼真地继续。（_runAnimation方法已经通过设置动画的开始和结束对齐来设置方向。）

导入包如下：

import 'package:flutter/physics.dart';

onPanEnd回调提供了一个DragEndDetails对象。此对象提供指针停止接触屏幕时的速度。速度以像素每秒为单位，但Align小部件不使用像素。它使用介于[-1.0，-1.0]和[1.0，1.0]之间的坐标值，其中[0.0，0.0]表示中心。步骤2中计算的大小用于将像素转换为该范围内的坐标值。

然后修改 runAnimation 执行动画函数如下：

void _runAnimation(Offset pixelsPerSecond, Size size) {
    _animation = _controller.drive(
      AlignmentTween(
        begin: _dragAlignment,
        end: Alignment.center,
      ),
    );
    final unitsPerSecondX = pixelsPerSecond.dx / size.width;
    final unitsPerSecondY = pixelsPerSecond.dy / size.height;
    final unitsPerSecond = Offset(unitsPerSecondX, unitsPerSecondY);
    final unitVelocity = unitsPerSecond.distance;
   //它可以用于模拟弹簧的阻尼、质量和刚度等属性，从而实现更加真实的动画效果。
    const spring = SpringDescription(
      mass: 30,
      stiffness: 1,
      damping: 1,
    );
    //SpringSimulation用来模拟一个弹簧的运动，可以用于创建具有弹性的动画效果。
    final simulation = SpringSimulation(spring, 0, 1, -unitVelocity);
    _controller.animateWith(simulation);
  }

然后在手指抬起的时候调用

onPanEnd: (details) {
    _runAnimation(details.velocity.pixelsPerSecond, size);
  },

以上就是Android Flutter实现弹簧动画交互的示例详解的详细内容，更多关于Android Flutter弹簧动画交互的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

解决Could not find com.android.tools.build:gradle:3.0.0
这篇文章主要介绍了在Android Studio升级时碰到Could not find com.android.tools.build:gradle:3.0.0问题的解决方法，需要的朋友跟随小编一起看看吧
2021-08-08
Android实现开机自动启动Service或app的方法
这篇文章主要介绍了Android实现开机自动启动Service或app的方法,结合实例形式分析了Android开机自启动程序的具体步骤与相关实现技巧,需要的朋友可以参考下
2016-07-07
Android获取设备CPU核数、时钟频率以及内存大小的方法
这篇文章主要介绍了Android获取设备CPU核数、时钟频率以及内存大小的方法,涉及Android针对系统硬件相关操作技巧,需要的朋友可以参考下
2016-07-07
Android 动态改变布局实例详解
这篇文章主要介绍了Android 动态改变布局实例详解的相关资料,这里举例说明如何实现动态改变布局的例子，帮助大家学习理解，需要的朋友可以参考下
2016-11-11
Android 中退出多个activity的经典方法
这篇文章主要介绍了Android 中退出多个activity的经典方法的相关资料,本文给大家分享两种方法，在这小编给大家推荐使用第一种方法，对此文感兴趣的朋友可以参考下
2016-09-09
实例讲解Android应用开发中Fragment生命周期的控制
这篇文章主要介绍了Android应用开发中Fragment生命周期的控制,Fragment依赖于Activity,所以生命周期方面也受Activity的影响,需要的朋友可以参考下
2016-02-02
深入理解Android中View绘制的三大流程
这篇文章主要给大家介绍了关于Android中View绘制的三大流程，View的工作流程主要是指measure、layout、draw这三大流程，即测量、布局和绘制，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-07-07
Android 编辑头像功能简单实现实例（图片选取，裁剪）
这篇文章主要介绍了Android 编辑头像功能简单实现实例（图片选取，裁剪），非常具有实用价值，需要的朋友可以参考下
2017-06-06
Android ProductFlavor的使用详解
如果你的项目需要要区分国内版和国外版甚至还要根据用户是否是VIP会员加上收费和免费的版本，我们可以使用ProductFlavor对UI布局和icon图标进行版本区分，有此类需求的朋友，不妨了解下本文
2021-06-06
Android仿微信语音聊天功能
这篇文章主要介绍了Android仿微信语音聊天功能，很实用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-12-12