焦虑粉碎机应用欢迎加入开源鸿蒙跨平台社区https://openharmonycrossplatform.csdn.net一、项目概述运行效果图1.1 应用简介焦虑粉碎机是一款帮助用户释放心理压力的情绪管理应用。用户可以将内心的烦恼、焦虑写下来通过粉碎动画效果象征性地将负面情绪消除达到心理疏导的目的。应用采用输入-粉碎-记录的闭环设计让用户在写下烦恼的过程中梳理情绪在粉碎动画中获得释放感在历史记录中回顾自己的成长轨迹。1.2 核心功能功能模块功能描述实现方式烦恼输入多行文本输入、字数限制TextField、maxLength粉碎动画震动效果 粒子飞散AnimationController、CustomPainter历史记录分类展示、状态管理SliverList、状态筛选记录管理粉碎、删除操作状态更新、列表操作统计展示待粉碎/已粉碎数量实时统计卡片1.3 粉碎动画流程阶段时长效果描述1500ms输入框快速震动模拟蓄力21500ms50个彩色粒子飞散模拟粉碎3即时记录状态更新显示完成提示1.4 技术栈技术领域技术选型版本要求开发框架Flutter 3.0.0编程语言Dart 2.17.0设计规范Material Design 3-状态管理setState-动画控制AnimationController-目标平台鸿蒙OSAPI 21二、项目结构lib/ ├── main_anxiety_crusher.dart # 应用主入口712行 │ ├── AnxietyCrusherApp # 根应用组件 │ ├── AnxietyRecord # 数据模型 │ ├── AnxietyCrusherHomePage # 主页面 │ ├── Particle # 粒子模型 │ └── ParticlePainter # 粒子绘制器三、数据模型3.1 AnxietyRecord 模型classAnxietyRecord{finalStringid;// 唯一标识时间戳finalStringcontent;// 烦恼内容finalDateTimecreatedAt;// 创建时间DateTime?crushedAt;// 粉碎时间bool isCrushed;// 是否已粉碎AnxietyRecord({requiredthis.id,requiredthis.content,requiredthis.createdAt,this.crushedAt,this.isCrushedfalse,});}3.2 Particle 模型classParticle{double x;// X坐标double y;// Y坐标double vx;// X轴速度double vy;// Y轴速度double size;// 粒子大小Colorcolor;// 粒子颜色double rotation;// 旋转角度double rotationSpeed;// 旋转速度double opacity1.0;// 透明度voidupdate(){xvx;yvy;vy0.3;// 重力加速度rotationrotationSpeed;opacity-0.015;// 渐隐效果}}四、核心功能实现4.1 粉碎动画实现粉碎动画由三个阶段组成震动、粒子生成、飞散动画。void_startCrushAnimation()async{setState(()_isCrushingtrue);// 阶段1震动效果for(int i0;i5;i){await_shakeController.forward(from:0);awaitFuture.delayed(constDuration(milliseconds:50));}// 阶段2生成粒子_generateParticles();// 阶段3粒子飞散动画await_particleController.forward(from:0);// 更新记录状态setState((){_currentRecord!.isCrushedtrue;_currentRecord!.crushedAtDateTime.now();_isCrushingfalse;_particles.clear();});}4.2 粒子生成算法生成50个随机属性的粒子确保视觉效果丰富void_generateParticles(){_particles.clear();finalrandomRandom();for(int i0;i50;i){_particles.add(Particle(x:0,y:0,vx:(random.nextDouble()-0.5)*15,// 随机水平速度vy:(random.nextDouble()-0.5)*15-5,// 随机垂直速度向上偏移size:random.nextDouble()*84,// 随机大小 4-12color:[// 随机颜色constColor(0xFF6C5CE7),constColor(0xFF00B894),constColor(0xFFFDCB6E),constColor(0xFFE17055),constColor(0xFF74B9FF),][random.nextInt(5)],rotation:random.nextDouble()*2*pi,rotationSpeed:(random.nextDouble()-0.5)*0.3,));}}4.3 粒子绘制器使用 CustomPainter 实现高性能粒子渲染classParticlePainterextendsCustomPainter{finalListParticleparticles;finaldouble progress;overridevoidpaint(Canvascanvas,Sizesize){finalcenterXsize.width/2;finalcenterYsize.height/2;for(varparticleinparticles){if(particle.opacity0)continue;finalpaintPaint()..colorparticle.color.withValues(alpha:particle.opacity)..stylePaintingStyle.fill;canvas.save();canvas.translate(centerXparticle.x,centerYparticle.y);canvas.rotate(particle.rotation);// 绘制不规则碎片形状finalpathPath();path.moveTo(-particle.size/2,-particle.size/2);path.lineTo(particle.size/2,-particle.size/3);path.lineTo(particle.size/3,particle.size/2);path.lineTo(-particle.size/3,particle.size/3);path.close();canvas.drawPath(path,paint);canvas.restore();}}overrideboolshouldRepaint(covariantCustomPainteroldDelegate)true;}五、UI设计5.1 色彩系统用途色值说明主色调#6C5CE7紫色代表平静与治愈辅助色1#00B894绿色代表已粉碎状态辅助色2#FDCB6E黄色代表待处理状态辅助色3#E17055橙色用于粒子效果辅助色4#74B9FF蓝色用于粒子效果背景渐变起始#6C5CE7头部渐变背景渐变结束#8B7FD4头部渐变5.2 页面结构┌─────────────────────────────────┐ │ 焦虑粉碎机 │ ← 渐变头部 │ 写下烦恼一键粉碎 │ │ ┌─────────┐ ┌─────────┐ │ │ │待粉碎 3 │ │已粉碎 5 │ │ ← 统计卡片 │ └─────────┘ └─────────┘ │ ├─────────────────────────────────┤ │ 写下你的烦恼 │ │ ┌─────────────────────────┐ │ │ │ 工作压力太大了... │ │ ← 输入框 │ │ │ │ │ └─────────────────────────┘ │ │ ┌─────────────────────────┐ │ │ │ ⚡ 立即粉碎 │ │ ← 粉碎按钮 │ └─────────────────────────┘ │ ├─────────────────────────────────┤ │ ▼ 待粉碎的烦恼 │ │ ┌─────────────────────────┐ │ │ │ ⏳ 待粉碎 今天 14:30 ⚡️│ │ ← 烦恼卡片 │ │ 工作压力太大了... │ │ │ └─────────────────────────┘ │ ├─────────────────────────────────┤ │ ▼ 已粉碎的烦恼 │ │ ┌─────────────────────────┐ │ │ │ ✓ 已粉碎 今天 14:25 ️│ │ ← 已粉碎删除线 │ │ ~~考试好紧张~~ │ │ │ └─────────────────────────┘ │ └─────────────────────────────────┘5.3 交互设计交互元素触发方式响应行为输入框点击获取焦点可输入文字立即粉碎按钮点击触发粉碎动画清空输入框烦恼卡片-粉碎按钮点击对该记录触发粉碎动画烦恼卡片-删除按钮点击删除该记录空状态无记录时显示提示用户写下烦恼六、动画详解6.1 震动动画使用正弦函数实现左右震动效果AnimatedBuilder(animation:_shakeController,builder:(context,child){finalshakesin(_shakeController.value*pi*10)*5;returnTransform.translate(offset:Offset(shake,0),child:Container(...),);},)参数说明pi * 10震动频率数值越大震动越快* 5震动幅度单位是像素循环5次每次100ms6.2 粒子动画粒子动画基于物理模拟物理属性计算方式效果位置更新x vx, y vy匀速运动重力模拟vy 0.3向下加速旋转rotation rotationSpeed自转效果渐隐opacity - 0.015逐渐消失6.3 动画时序震动阶段0ms开始震动100ms第1次震动200ms第2次震动300ms第3次震动400ms第4次震动500ms第5次震动结束粒子阶段500ms生成50个粒子1000ms粒子飞散中1500ms粒子渐隐2000ms动画结束粉碎动画时序图七、状态管理7.1 状态分类状态类型状态名称说明输入状态_textController输入框文本动画状态_isCrushing是否正在粉碎粒子状态_particles当前粒子列表记录状态_records所有烦恼记录当前记录_currentRecord正在粉碎的记录7.2 状态流转打开应用点击粉碎按钮动画完成继续输入添加记录点击粉碎点击删除点击删除输入中粉碎中已粉碎待粉碎已删除八、性能优化8.1 渲染优化优化点实现方式效果粒子复用使用对象池可扩展减少内存分配脏区域渲染CustomPainter精准重绘只重绘动画区域列表懒加载SliverList只渲染可见项8.2 内存管理overridevoiddispose(){_textController.dispose();_shakeController.dispose();_particleController.dispose();_scaleController.dispose();super.dispose();}8.3 性能指标指标目标值实测值动画帧率60fps60fps内存占用 50MB待测试启动时间 2s待测试九、常见问题9.1 问题排查问题原因解决方案粒子不显示AnimationController未启动检查forward()调用震动效果不明显震动幅度太小调整震动参数记录状态不更新未调用setState确保状态更新后调用setState历史记录丢失内存存储重启清空迁移至持久化存储9.2 调试技巧// 打印粒子数量debugPrint(Particles:${_particles.length});// 检查动画状态debugPrint(IsCrushing:$_isCrushing);debugPrint(Animation Value:${_particleController.value});// 检查记录状态for(varrecordin_records){debugPrint(Record:${record.content}, Crushed:${record.isCrushed});}十、运行说明10.1 环境要求环境版本要求Flutter SDK 3.0.0Dart SDK 2.17.0鸿蒙OSAPI 2110.2 运行命令# 查看可用设备flutter devices# 运行到鸿蒙设备flutter run-d127.0.0.1:5555 lib/main_anxiety_crusher.dart# 运行到Windowsflutter run-dwindows-tlib/main_anxiety_crusher.dart# 代码分析flutter analyze lib/main_anxiety_crusher.dart十一、扩展建议11.1 功能扩展功能优先级实现思路数据持久化高使用SharedPreferences或SQLite粉碎音效中集成audioplayers播放音效震动反馈中使用HapticFeedback分享功能低使用share_plus数据统计低记录粉碎次数、时间分布11.2 设计扩展方向描述主题切换支持多种粉碎主题火焰、雪花、星星等粒子定制允许用户选择粒子颜色和形状成就系统粉碎一定数量解锁成就徽章十二、总结焦虑粉碎机应用通过直观的写下-粉碎交互模式帮助用户释放心理压力。应用核心亮点包括沉浸式动画50个粒子飞散效果视觉冲击力强流畅交互震动粒子双重反馈操作感好状态管理清晰的待粉碎/已粉碎分类简洁设计Material Design 3界面清爽应用代码结构清晰共712行无第三方依赖易于理解和维护。后续可扩展数据持久化、音效反馈等功能提升用户体验。粉碎焦虑释放压力