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);
}

PhysicsBallWidget类

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

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_xy/application.dart';
import 'package:flutter_xy/xydemo/ball/ball_model.dart';
import 'package:sensors_plus/sensors_plus.dart';
//https://github.com/yixiaolunhui/flutter_xy
class PhysicsBallWidget extends StatefulWidget {final List<Ball> ballList;final double height;final double width;const PhysicsBallWidget({required this.ballList,required this.width,required this.height,Key? key,}) : super(key: key);@overrideState<StatefulWidget> createState() => _PhysicsBallState();
}class _PhysicsBallState extends State<PhysicsBallWidget> {List<Widget> badgeBallList = [];List<ValueKey<BadgeBallConfig>> keyList = [];late Size ballSize;@overridevoid initState() {super.initState();fillKeyList();WidgetsBinding.instance.addPostFrameCallback((timeStamp) {App.get().addPersistentFrameCallback(travelHitMap);});}@overridevoid dispose() {App.get().removePersistentFrameCallback(travelHitMap);super.dispose();}@overrideWidget build(BuildContext context) {fillWidgetList();return Stack(children: badgeBallList,);}void fillKeyList() {var badgeSize = (widget.width - 20) / 6;badgeSize = (badgeSize >= 84.0 || badgeSize <= 0.0 || !badgeSize.isFinite)? 84.0: badgeSize;var maxCount = ((widget.height - badgeSize) ~/ badgeSize) *(widget.width ~/ badgeSize);if (widget.ballList.length >= maxCount) {badgeSize = 50.0;}ballSize = Size(badgeSize, badgeSize);var initOffsetX = 0.0;var initOffsetY = widget.height - badgeSize;for (var element in widget.ballList) {keyList.add(ValueKey<BadgeBallConfig>(BadgeBallConfig()..size = ballSize..name = element.name..setPosition(Offset(initOffsetX, initOffsetY)),));initOffsetX += badgeSize;if (initOffsetX + badgeSize > widget.width - 20) {initOffsetX = 0;initOffsetY -= badgeSize;}}}void fillWidgetList() {badgeBallList.clear();for (var e in keyList) {badgeBallList.add(BallItemWidget(key: e,limitWidth: widget.width,limitHeight: widget.height,onTap: () {},),);}}void travelHitMap(Duration timeStamp) {for (var i = 0; i < keyList.length - 1; i++) {for (var j = i + 1; j < keyList.length; j++) {hit(keyList[i].value, keyList[j].value);}}}void hit(BadgeBallConfig a, BadgeBallConfig b) {final distance = a.size.height / 2 + b.size.height / 2;final w = b.getCurrentCenter().dx - a.getCurrentCenter().dx;final h = b.getCurrentCenter().dy - a.getCurrentCenter().dy;if (sqrt(w * w + h * h) <= distance) {var aOriginSpeed = a.getCurrentSpeed();var bOriginSpeed = b.getCurrentSpeed();var aOffset = a.getCurrentPosition();var angle = atan2(h, w);var sinNum = sin(angle);var cosNum = cos(angle);var aCenter = [0.0, 0.0];var bCenter = coordinateTranslate(w, h, sinNum, cosNum, true);var aSpeed = coordinateTranslate(aOriginSpeed.x, aOriginSpeed.y, sinNum, cosNum, true);var bSpeed = coordinateTranslate(bOriginSpeed.x, bOriginSpeed.y, sinNum, cosNum, true);var vxTotal = aSpeed[0] - bSpeed[0];aSpeed[0] = (2 * 10 * bSpeed[0]) / 20;bSpeed[0] = vxTotal + aSpeed[0];var overlap = distance - (aCenter[0] - bCenter[0]).abs();aCenter[0] -= overlap;bCenter[0] += overlap;var aRotatePos =coordinateTranslate(aCenter[0], aCenter[1], sinNum, cosNum, false);var bRotatePos =coordinateTranslate(bCenter[0], bCenter[1], sinNum, cosNum, false);var bOffsetX = aOffset.dx + bRotatePos[0];var bOffsetY = aOffset.dy + bRotatePos[1];var aOffsetX = aOffset.dx + aRotatePos[0];var aOffsetY = aOffset.dy + aRotatePos[1];var aSpeedF =coordinateTranslate(aSpeed[0], aSpeed[1], sinNum, cosNum, false);var bSpeedF =coordinateTranslate(bSpeed[0], bSpeed[1], sinNum, cosNum, false);a.afterCollusion(Offset(aOffsetX, aOffsetY), Speed(aSpeedF[0], aSpeedF[1]));b.afterCollusion(Offset(bOffsetX, bOffsetY), Speed(bSpeedF[0], bSpeedF[1]));}}List<double> coordinateTranslate(double x, double y, double sin, double cos, bool reverse) {return reverse? [x * cos + y * sin, y * cos - x * sin]: [x * cos - y * sin, y * cos + x * sin];}
}

BallItemWidget类

BallItemWidget类用于具体显示每个球，并处理其动画和事件：

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_xy/application.dart';
import 'package:flutter_xy/xydemo/ball/ball_model.dart';
import 'package:sensors_plus/sensors_plus.dart';class BallItemWidget extends StatefulWidget {final double limitWidth;final double limitHeight;final Function onTap;const BallItemWidget({required this.limitWidth,required this.limitHeight,required this.onTap,Key? key,}) : super(key: key);@overrideState<StatefulWidget> createState() => BallItemState();
}class BallItemState extends State<BallItemWidget> {final List<StreamSubscription<dynamic>> _streamSubscriptions = [];late BadgeBallConfig config;Duration sensorInterval = SensorInterval.normalInterval;var color = Color.fromARGB(255,Random().nextInt(256),Random().nextInt(256),Random().nextInt(256),);Timer? timer;double x = 0;double y = 0;double limitY = 0;double limitX = 0;@overridevoid initState() {super.initState();initData();_streamSubscriptions.add(accelerometerEvents.listen((AccelerometerEvent event) {config.setAcceleration(-double.parse(event.x.toStringAsFixed(1)) * 50,double.parse(event.y.toStringAsFixed(1)) * 50,);},),);_streamSubscriptions.add(userAccelerometerEvents.listen((UserAccelerometerEvent event) {config.inertiaStart(double.parse(event.x.toStringAsFixed(1)) * 50,-double.parse(event.y.toStringAsFixed(1)) * 20,);},),);timer = Timer.periodic(const Duration(milliseconds: 20), (timer) {if (!SchedulerBinding.instance.hasScheduledFrame) {SchedulerBinding.instance.scheduleFrame();}});WidgetsBinding.instance.addPostFrameCallback((timeStamp) {App.get().addPersistentFrameCallback(updatePosition);});}@overridevoid dispose() {super.dispose();for (var subscription in _streamSubscriptions) {subscription.cancel();}App.get().removePersistentFrameCallback(updatePosition);timer?.cancel();timer = null;}@overrideWidget build(BuildContext context) {return AnimatedPositioned(left: x,top: y,duration: const Duration(milliseconds: 16),child: GestureDetector(onTap: () {widget.onTap.call();},child: Container(width: config.size.width,alignment: Alignment.center,height: config.size.height,decoration: BoxDecoration(shape: BoxShape.circle,border: Border.all(color: color, width: 2.w),),child: Text(config.name,style: TextStyle(fontSize: 16.w, color: Colors.red),),),),);}void initData() {limitX = widget.limitWidth;limitY = widget.limitHeight;config = (widget.key as ValueKey<BadgeBallConfig>).value;config.collusionCallback = (offset) {setState(() {x = offset.dx;y = offset.dy;config.setPosition(offset);});};x = config.getCurrentPosition().dx;y = config.getCurrentPosition().dy;}void updatePosition(Duration timeStamp) {setState(() {var tempX = config.getOffset().dx;var tempY = config.getOffset().dy;if (tempX < 0) {tempX = 0;config.setOppositeSpeed(true, false);}if (tempX > limitX - config.size.width) {tempX = limitX - config.size.width;config.setOppositeSpeed(true, false);}if (tempY < 0) {tempY = 0;config.setOppositeSpeed(false, true);}if (tempY > limitY - config.size.height) {tempY = limitY - config.size.height;config.setOppositeSpeed(false, true);}x = tempX;y = tempY;config.setPosition(Offset(x, y));});}
}

BallListPage类

BallListPage类是测试页面，用于展示物理球动画效果：

import 'package:flutter/material.dart';
import 'package:flutter_xy/xydemo/ball/ball_model.dart';
import 'package:flutter_xy/xydemo/ball/ball_widget.dart';class BallListPage extends StatefulWidget {const BallListPage({super.key});@overrideState<BallListPage> createState() => _BallListPageState();
}class _BallListPageState extends State<BallListPage> {final List<Ball> badgeList = [Ball(name: '北京'),Ball(name: '上海'),Ball(name: '天津'),Ball(name: '徐州'),Ball(name: '南京'),Ball(name: '苏州'),Ball(name: '杭州'),Ball(name: '合肥'),Ball(name: '武汉'),Ball(name: '常州'),Ball(name: '香港'),Ball(name: '澳门'),Ball(name: '新疆'),Ball(name: '成都'),Ball(name: '宿迁'),];@overrideWidget build(BuildContext context) {return Scaffold(body: Stack(children: [PhysicsBallWidget(ballList: badgeList,height: MediaQuery.of(context).size.height,width: MediaQuery.of(context).size.width,),],),);}
}

结论

通过这篇博客，我们展示了如何在Flutter中实现一个物理球动画效果，并且集成了sensors_plus插件来获取设备的加速度传感器数据。希望这篇博客能对您在Flutter开发中实现类似效果有所帮助。
详情见：github.com/yixiaolunhui/flutter_xy

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/870675.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

一文详解DDL同步及其应用场景

一文详解DDL同步及其应用场景

目录 一、什么是DDL&#xff1f; 二、什么是DDL同步&#xff1f; 三、DDL同步的痛点 1、缺少自动DDL同步机制 2、缺少DDL变更监测预警 四、解决方案 五、应用场景及案例 案例一 案例二 案例三 在现代数据管理中&#xff0c;数据库的结构变更频繁且不可避免&#xff0c;特别是在…
阅读更多...
Kubelet 认证

Kubelet 认证

当我们执行kubectl exec -it pod [podName] sh命令时&#xff0c;apiserver会向kubelet发起API请求。也就是说&#xff0c;kubelet会提供HTTP服务&#xff0c;而为了安全&#xff0c;kubelet必须提供HTTPS服务&#xff0c;且还要提供一定的认证与授权机制&#xff0c;防止任何知…
阅读更多...
HTTP3.0

HTTP3.0

HTTP/3是HTTP协议的最新版本&#xff0c;它基于QUIC协议&#xff0c;具有以下特点&#xff1a; 无队头阻塞: QUIC 使用UDP协议来传输数据。一个连接上的多个stream之间没有依赖, 如果一个stream丢了一个UDP包&#xff0c;不会影响后面的stream&#xff0c;不存在 队头阻塞问题…
阅读更多...
迪卡斯特拉算法与前式链向星结合的易错点

迪卡斯特拉算法与前式链向星结合的易错点

进行迪克特斯拉算法的时候我们需要标记已经访问过的节点&#xff0c;而这个节点是否访问过的判断也是需要注意的 int dikj() {priority_queue<pair<int, int>> q;int ma 0;//vis[start] 1; // 记录一下 不用写for (int i 0; i < n; i) vis[i] 0,di[i] 0x…
阅读更多...
C语言 | Leecode C语言题解之第229题多数元素II

C语言 | Leecode C语言题解之第229题多数元素II

题目&#xff1a; 题解&#xff1a; /*** Note: The returned array must be malloced, assume caller calls free().*//*假定 num1&#xff0c;num2 为出现次数大于 nums.length / 3 的两个数。&#xff08;最多出现两个&#xff09;遍历 nums&#xff0c; 若出现 num1、num2…
阅读更多...
《C语言程序设计 第4版》笔记和代码 第十一章 指针和数组

《C语言程序设计 第4版》笔记和代码 第十一章 指针和数组

第十一章 指针和数组 11.1 指针和一维数组间的关系 1 由于数组名代表数组元素的连续存储空间的首地址&#xff0c;因此&#xff0c;数组元素既可以用下标法也可以用指针来引用。 例11.1见文末 2 p1与p在本质上是两个不同的操作&#xff0c;前者不改变当前指针的指向&#xf…
阅读更多...
无人机之遥控器保养

无人机之遥控器保养

一、使用存放 1、避免让遥控器受到强烈的震动或从高处跌落&#xff0c;以免影响内部结构的精度&#xff1b; 2、遥控器在使用完后&#xff0c;需要将天线收拢&#xff0c;避免折断&#xff0c;养成定期检查天线的习惯&#xff1b; 3、定期检查遥控器按键有无裂纹、畸变、松旷…
阅读更多...
LiteOS GPIO中断处理

LiteOS GPIO中断处理

在LiteOS系统里主要使用IoTGpioRegisterIsrFunc函数注册GPIO的中断&#xff1a; 函数原型&#xff1a; unsigned int IoTGpioRegisterIsrFunc(unsigned int id, IotGpioIntType intType, IotGpioIntPolarity intPolarity, GpioIsrCallbackFunc func, char *arg)参数功能&#…
阅读更多...
vue + Lodop 实现浏览器自动打印 无需预览打印

vue + Lodop 实现浏览器自动打印 无需预览打印

官网地址&#xff1a;https://www.lodop.net/download.html 先去Lodop官网下载相应的安装包 解压安装将LodopFuncs.js放在项目中utils文件夹中加一行代码 export { getLodop }; //导出<template><div><div class"main"><ul class"btns&qu…
阅读更多...
ISO/OIS的七层模型②

ISO/OIS的七层模型②

OSI模型是一个分层的模型&#xff0c;每一个部分称为一层&#xff0c;每一层扮演固定的角色&#xff0c;互不干扰。OSI有7层&#xff0c;从上到下分别是&#xff1a; 一&#xff0c;每层功能 7.应用层&#xff08;Application layer &#xff09;&#xff1a;应用层功能&#x…
阅读更多...
Java发展过程中，JVM的演进

Java发展过程中，JVM的演进

1. 初期的JVM&#xff08;Java 1.0 到 Java 1.1&#xff09; Java 1.0 于1996年发布&#xff0c;最初的JVM设计主要是为了跨平台兼容性和基本的垃圾回收功能。早期的JVM以解释执行字节码为主&#xff0c;性能相对较低。 2. 引入即时编译&#xff08;JIT&#xff09;&#xff…
阅读更多...
如何从gitlab删除仓库

如何从gitlab删除仓库

嗨&#xff0c;我是兰若姐姐。今天发现gitlab上有些仓库的代码没有用&#xff0c;是个多余的仓库&#xff0c;想要删掉&#xff0c;经过一番操作之后&#xff0c;成功的删除了&#xff0c;git上没有 多余的仓库&#xff0c;看着干净舒服很多&#xff0c;现在把删除的过程分享出…
阅读更多...
基于ssm的图书管理系统的设计与实现

基于ssm的图书管理系统的设计与实现

摘 要 在当今信息技术日新月异的时代背景下&#xff0c;图书管理领域正经历着深刻的变革&#xff0c;传统的管理模式已难以适应现代社会的快节奏和高要求&#xff0c;逐渐向数字化、智能化的方向演进。本论文聚焦于这一转变趋势&#xff0c;致力于设计并成功实现一个基于 SSM&…
阅读更多...
开发不认可bug策略

开发不认可bug策略

作为测试&#xff0c;不仅仅要发现问题&#xff0c;更需要站在用户层面主动推进问题得到有效解决&#xff1b; 首先要积极耐心和开发进行沟通并共同复现bug&#xff0c;提供测试环境、操作步骤、测试数据、截图、日志等&#xff0c;确保rd对bug有充分的了解&#xff0c;更好地理…
阅读更多...
U-net和U²-Net网络详解

U-net和U²-Net网络详解

目录 U-Net: Convolutional Networks for Biomedical Image Segmentation摘要U-net网络结构pixel-wise loss weight U-Net: Going Deeper with Nested U-Structure for Salient Object Detection摘要网络结构详解整体结构RSU-n结构RSU-4F结构saliency map fusion module -- 显著…
阅读更多...
JavaFx+MySql学生管理系统

JavaFx+MySql学生管理系统

前言: 上个月学习了javafx和mysql数据库,于是写了一个学生管理系统,因为上个月在复习并且有一些事情,比较忙,所以没有更新博客了,这个项目页面虽然看着有点简陋了,但是大致内容还是比较简单的,于是现在跟大家分享一下我的学生管理系统,希望对这方面有兴趣的同学提供一些帮助 &a…
阅读更多...
如何将canvas画布变成一张img图片

如何将canvas画布变成一张img图片

将Canvas画布转换成一张图片&#xff08;通常是PNG或JPEG格式&#xff09;可以通过Canvas的toDataURL()方法来实现。这个方法可以将Canvas上的内容转换为一个表示图像数据的URL&#xff0c;这个URL可以被用作<img>标签的src属性&#xff0c;或者通过JavaScript进一步处理…
阅读更多...
Vue 3 中创建一个动态的组件实例

Vue 3 中创建一个动态的组件实例

本文将介绍如何在 Vue 3 中实现一个动态 Toast 组件实例。我们将创建一个简单的 Toast 组件&#xff0c;并使用一个动态创建实例的脚本来显示 Toast 消息。在 Vue 3 中创建动态组件实例有许多好处&#xff0c;这些好处主要体现在灵活性、性能、可维护性和用户体验等方面。 创建…
阅读更多...
【JavaScript 算法】快速排序：高效的排序算法

【JavaScript 算法】快速排序：高效的排序算法

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、算法原理二、算法实现三、应用场景四、优化与扩展五、总结 快速排序&#xff08;Quick Sort&#xff09;是一种高效的排序算法&#xff0c;通过分治法将数组分为较小的子数组&#xff0c;递归地排序子数组。快速排序通常…
阅读更多...
北方园艺期刊

北方园艺期刊

《北方园艺》是由黑龙江省农科院主管、黑龙江省园艺学会和黑龙江省农科院主办的以科学研究和技术普及相结合的园艺类综合性科技期刊。创刊四十年来&#xff0c;《北方园艺》紧随时代及行业的发展&#xff0c;根据前沿热点不断完善栏目设置&#xff1b;积极引进高学历人才&#…
阅读更多...
最新文章

Copyright @ 2022~2023