使用 Flutter 实现酷炫的粒子动画，可以通过 Shader 来提升效果。这种方法结合 Flutter 的强大绘图功能和 GLSL 的灵活性，可以创造出高性能且自定义程度极高的视觉效果。以下是实现的基本步骤和核心代码：
核心思想
使用 Flutter 的 CustomPainter 绘制粒子。
通过 FragmentProgram (GLSL Shader) 定义粒子的着色效果。
使用动画控制粒子的位置和状态。
实现步骤
1. 添加依赖
确保你的项目依赖版本支持 Shader，Flutter 2.10+ 已内置支持。
2. 编写 GLSL Shader
在项目中创建一个 .glsl 文件（如 particle_shader.glsl），定义粒子的着色逻辑：
// particle_shader.glsl
precision mediump float;
uniform float uTime;
uniform vec2 uResolution;
void main() {
vec2 uv = gl_FragCoord.xy / uResolution;
float dist = length(uv - vec2(0.5));
float alpha = 0.6 + 0.4 * sin(uTime + dist * 10.0);
gl_FragColor = vec4(uv, dist, alpha);
}
3. 加载和使用 Shader
将 Shader 文件加载到 Flutter 中，并将其用于绘制：
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
class ParticlePainter extends CustomPainter {
final double time;
final ui.FragmentProgram shaderProgram;
ParticlePainter(this.time, this.shaderProgram);
@override
void paint(Canvas canvas, Size size) {
final shader = shaderProgram.fragmentShader();
final paint = Paint()
..shader = shader
.handle()
.shader(
floatUniforms: {
'uTime': time,
'uResolution': [size.width, size.height],
},
);
canvas.drawRect(Offset.zero & size, paint);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
4. 主界面集成
将 CustomPaint 嵌入到你的界面，并结合动画更新时间。
class ParticleAnimation extends StatefulWidget {
@override
_ParticleAnimationState createState() => _ParticleAnimationState();
}
class _ParticleAnimationState extends State<ParticleAnimation>
with SingleTickerProviderStateMixin {
late AnimationController _controller;
ui.FragmentProgram? _shaderProgram;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(seconds: 10),
)..repeat();
// 加载 Shader
_loadShader();
}
Future<void> _loadShader() async {
final program = await ui.FragmentProgram.fromAsset('shaders/particle_shader.glsl');
setState(() {
_shaderProgram = program;
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return _shaderProgram == null
? Center(child: CircularProgressIndicator())
: AnimatedBuilder(
animation: _controller,
builder: (context, _) {
return CustomPaint(
painter: ParticlePainter(
_controller.value * 10, // 动态时间
_shaderProgram!,
),
size: MediaQuery.of(context).size,
);
},
);
}
}
运行效果
通过上述代码，粒子会随着时间动态变化，展示出一种炫酷的动画效果。如果需要更复杂的交互，可以调整 GLSL 中的逻辑或结合 Flutter 的手势检测。
优化建议
性能优化：限制帧率或减少粒子数量，以适配低端设备。
扩展性：通过 GLSL 提供更多的 uniform 参数，控制颜色、粒子形状等。
这样，你就能轻松在 Flutter 中实现 Shader 加持的粒子动画了！如果有更多需求，可以进一步调整 Shader 代码和绘制逻辑。
发布者：myrgd，转载请注明出处：https://www.object-c.cn/5050
