效果

引言

在Flutter应用中实现物理动画效果，可以大大提升用户体验。本文将详细介绍如何在Flutter中创建一个模拟物理碰撞的动画小球界面，主要代码实现基于集成sensors_plus插件来获取设备的加速度传感器数据。

准备工作

在开始之前，请确保在pubspec.yaml文件中添加sensors_plus插件：

dependencies:
  flutter:
    sdk: flutter
  sensors_plus: 4.0.2

然后运行flutter pub get命令来获取依赖。

代码结构

我们将实现一个名为PhysicsBallWidget的自定义小部件，主要包含以下几部分：

• Ball类：表示每个球的基本信息。
• BadgeBallConfig类：管理每个球的状态和行为。
• PhysicsBallWidget类：主部件，包含球的逻辑和动画。
• BallItemWidget类：具体显示每个球的小部件。
• BallListPage类：测试页面，展示物理球动画效果。

Ball类

首先定义Ball类，用于表示每个球的基本信息，例如名称：

class Ball {
   
  final String name;

  Ball({
   required this.name});
}

BadgeBallConfig类

BadgeBallConfig类用于管理每个球的状态和行为，包括加速度、速度、位置等信息：

class BadgeBallConfig {
   
  final Acceleration _acceleration = Acceleration(0, 0);
  final double time = 0.02;
  late Function(Offset) collusionCallback;
  Size size = const Size(100, 100);
  Speed _speed = Speed(0, 0);
  late Offset _position;
  late String name;
  double oppositeAccelerationCoefficient = 0.7;

  void setPosition(Offset offset) {
   
    _position = offset;
  }

  void setInitSpeed(Speed speed) {
   
    _speed = speed;
  }

  void setOppositeSpeed(bool x, bool y) {
   
    if (x) {
   
      _speed.x = -_speed.x * oppositeAccelerationCoefficient;
      if (_speed.x.abs() < 5) _speed.x = 0;
    }
    if (y) {
   
      _speed.y = -_speed.y * oppositeAccelerationCoefficient;
      if (_speed.y.abs() < 5) _speed.y = 0;
    }
  }

  void setAcceleration(double x, double y) {
   
    _acceleration.x = x * oppositeAccelerationCoefficient;
    _acceleration.y = y * oppositeAccelerationCoefficient;
  }

  Speed getCurrentSpeed() => _speed;

  Offset getCurrentCenter() => Offset(
    _position.dx + size.width / 2,
    _position.dy + size.height / 2,
  );

  Offset getCurrentPosition() => _position;

  void inertiaStart(double x, double y) {
   
    if (x.abs() > _acceleration.x.abs()) _speed.x += x;
    if (y.abs() > _acceleration.y.abs()) _speed.y += y;
  }

  void afterCollusion(Offset offset, Speed speed) {
   
    _speed = Speed(
      speed.x * oppositeAccelerationCoefficient,
      speed.y * oppositeAccelerationCoefficient,
    );
    _position = offset;
    collusionCallback(offset);
  }

  Offset getOffset() {
   
    var offsetX = (_acceleration.x.abs() < 5 && _speed.x.abs() < 3) ? 0.0 : _speed.x * time + (_acceleration.x * time * time) / 2;
    var offsetY = (_acceleration.y.abs() < 5 && _speed.y.abs() < 6) ? 0.0 : _speed.y * time + (_acceleration.y * time * time) / 2;

    _position = Offset(_position.dx + offsetX, _position.dy + offsetY);

    _speed = Speed(
      _speed.x + _acceleration.x * time,
      _speed.y + _acceleration.y * time,
    );

    return _position;
  }
}

class Speed {
   
  double x;
  double y;

  Speed(this.x, this.y);
}

class Acceleration {
   
  double x;
  double y;

  Acceleration(this.x, this.y);
}

PhysicsBallWidget类

PhysicsBallWidget类是主部件，负责处理球的逻辑和动画：

import