1、增加悬浮按钮的小声波效果[未使用]

2、增加底部按钮的大声波效果
3、更换footer底部图标
This commit is contained in:
2025-08-12 16:47:34 +08:00
parent 130755f9e1
commit 4035804b73
5 changed files with 239 additions and 36 deletions

View File

@@ -0,0 +1,58 @@
import 'package:flutter/material.dart';
import 'dart:math' as math;
/// 小型按钮波形动画组件
///
/// 用于显示适合小按钮的波形动画包含8个竖线动画效果由外部动画控制器驱动
class AudioWaveLargeMini extends StatelessWidget {
/// 动画控制器,用于驱动波形动画
final AnimationController animationController;
/// 波形颜色,默认为白色
final Color waveColor;
/// 构造函数
const AudioWaveLargeMini({
super.key,
required this.animationController,
this.waveColor = Colors.white,
});
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animationController, // 使用传入的动画控制器
builder: (context, child) {
return Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: List.generate(8, (index) { // 生成8个波形条
// 为每个竖线设置不同的相位,使动画更自然
final phase = index * 0.4;
// 设置不同的频率变化
final frequency = 1.0 + (index % 3) * 0.2;
// 计算波形高度最小4.0最大14.0
final height = 4.0 + 10.0 * math.sin(
(animationController.value * 2 * math.pi * frequency) + phase
).abs();
// 构建单个波形条
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2.0), // 左右间隔4px
child: Container(
width: 2, // 波形条宽度2px
height: height, // 高度随动画变化
decoration: BoxDecoration(
color: waveColor,
borderRadius: BorderRadius.circular(2), // 圆角效果
),
),
);
}),
);
},
);
}
}