Flutter-实现物理小球碰撞效果

效果

在这里插入图片描述

引言

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

准备工作

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

dependencies:flutter:sdk: fluttersensors_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);
}