wolfplus
1 year ago
7 changed files with 755 additions and 562 deletions
@ -0,0 +1,104 @@ |
|||
import 'dart:ui'; |
|||
import 'package:flutter/material.dart'; |
|||
|
|||
/// 使用Shader实现的麦克风流动动画组件 |
|||
class ShaderMicFlow extends StatefulWidget { |
|||
final double size; |
|||
final double amplitude; |
|||
|
|||
const ShaderMicFlow({ |
|||
super.key, |
|||
required this.size, |
|||
this.amplitude = 0.0, |
|||
}); |
|||
|
|||
@override |
|||
State<ShaderMicFlow> createState() => _ShaderMicFlowState(); |
|||
} |
|||
|
|||
class _ShaderMicFlowState extends State<ShaderMicFlow> |
|||
with SingleTickerProviderStateMixin { |
|||
late AnimationController _controller; |
|||
FragmentShader? _shader; |
|||
|
|||
@override |
|||
void initState() { |
|||
super.initState(); |
|||
_controller = AnimationController( |
|||
duration: const Duration(seconds: 60), |
|||
vsync: this, |
|||
)..repeat(); |
|||
|
|||
_loadShader(); |
|||
} |
|||
|
|||
Future<void> _loadShader() async { |
|||
try { |
|||
final program = await FragmentProgram.fromAsset('shaders/mic_flow.frag'); |
|||
setState(() { |
|||
_shader = program.fragmentShader(); |
|||
}); |
|||
} catch (e) { |
|||
debugPrint('Failed to load shader: $e'); |
|||
} |
|||
} |
|||
|
|||
@override |
|||
void dispose() { |
|||
_controller.dispose(); |
|||
_shader?.dispose(); |
|||
super.dispose(); |
|||
} |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return SizedBox( |
|||
width: widget.size, |
|||
height: widget.size, |
|||
child: AnimatedBuilder( |
|||
animation: _controller, |
|||
builder: (context, child) { |
|||
return CustomPaint( |
|||
painter: _shader != null |
|||
? _ShaderPainter( |
|||
shader: _shader!, |
|||
time: _controller.value * 60.0, |
|||
amplitude: widget.amplitude, |
|||
) |
|||
: null, |
|||
size: Size.square(widget.size), |
|||
); |
|||
}, |
|||
), |
|||
); |
|||
} |
|||
} |
|||
|
|||
class _ShaderPainter extends CustomPainter { |
|||
final FragmentShader shader; |
|||
final double time; |
|||
final double amplitude; |
|||
|
|||
_ShaderPainter({ |
|||
required this.shader, |
|||
required this.time, |
|||
required this.amplitude, |
|||
}); |
|||
|
|||
@override |
|||
void paint(Canvas canvas, Size size) { |
|||
// 设置shader uniforms |
|||
shader.setFloat(0, size.width); // u_resolution.x |
|||
shader.setFloat(1, size.height); // u_resolution.y |
|||
shader.setFloat(2, time); // u_time |
|||
shader.setFloat(3, amplitude); // u_amp |
|||
|
|||
final paint = Paint()..shader = shader; |
|||
canvas.drawRect(Offset.zero & size, paint); |
|||
} |
|||
|
|||
@override |
|||
bool shouldRepaint(covariant _ShaderPainter oldDelegate) { |
|||
return oldDelegate.time != time || oldDelegate.amplitude != amplitude; |
|||
} |
|||
} |
|||
@ -1,89 +0,0 @@ |
|||
import 'dart:ui'; |
|||
import 'package:flutter/material.dart'; |
|||
import 'package:flutter_shaders/flutter_shaders.dart'; |
|||
|
|||
class VoiceMicFlow extends StatefulWidget { |
|||
const VoiceMicFlow({super.key, this.size = 280, this.amp = 0.0}); |
|||
final double size; |
|||
final double amp; // 音量振幅 0.0-1.0 |
|||
|
|||
@override |
|||
State<VoiceMicFlow> createState() => _VoiceMicFlowState(); |
|||
} |
|||
|
|||
class _VoiceMicFlowState extends State<VoiceMicFlow> |
|||
with SingleTickerProviderStateMixin { |
|||
late final AnimationController _ctl; |
|||
|
|||
@override |
|||
void initState() { |
|||
super.initState(); |
|||
_ctl = AnimationController( |
|||
duration: const Duration(seconds: 100), // 100秒的长周期 |
|||
vsync: this, |
|||
)..repeat(); |
|||
} |
|||
|
|||
@override |
|||
void dispose() { |
|||
_ctl.dispose(); |
|||
super.dispose(); |
|||
} |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return ClipOval( |
|||
child: ShaderBuilder( |
|||
assetKey: 'shaders/mic_flow.frag', |
|||
(context, shader, child) { |
|||
return AnimatedBuilder( |
|||
animation: _ctl, |
|||
builder: (_, __) { |
|||
// 将0.0-1.0的动画值映射到更大的时间范围 |
|||
final time = _ctl.value * 100.0; |
|||
shader |
|||
..setFloat(0, widget.size) // u_resolution.x |
|||
..setFloat(1, widget.size) // u_resolution.y |
|||
..setFloat(2, time) // u_time |
|||
..setFloat(3, widget.amp); // u_amp (音量振幅) |
|||
return CustomPaint( |
|||
size: Size.square(widget.size), |
|||
painter: _ShaderPainter(shader), |
|||
); |
|||
}, |
|||
); |
|||
}, |
|||
// 着色器编译时的占位符 |
|||
child: Container( |
|||
width: widget.size, |
|||
height: widget.size, |
|||
decoration: const BoxDecoration( |
|||
shape: BoxShape.circle, |
|||
gradient: LinearGradient( |
|||
begin: Alignment.topLeft, |
|||
end: Alignment.bottomRight, |
|||
colors: [ |
|||
Color(0xFF1565C0), // 深蓝 |
|||
Color(0xFFE3F2FD), // 浅蓝 |
|||
], |
|||
), |
|||
), |
|||
), |
|||
), |
|||
); |
|||
} |
|||
} |
|||
|
|||
class _ShaderPainter extends CustomPainter { |
|||
_ShaderPainter(this.shader); |
|||
final FragmentShader shader; |
|||
|
|||
@override |
|||
void paint(Canvas canvas, Size size) { |
|||
final paint = Paint()..shader = shader; |
|||
canvas.drawRect(Offset.zero & size, paint); |
|||
} |
|||
|
|||
@override |
|||
bool shouldRepaint(covariant _ShaderPainter oldDelegate) => true; |
|||
} |
|||
Loading…
Reference in new issue