gpt4 book ai didi

flutter - flutter 中的气泡波纹动画

转载 作者:行者123 更新时间:2023-12-03 02:45:47 25 4
gpt4 key购买 nike

Bubble effect animation on tap
任何人都可以建议我如何使用 flutter 应用程序制作这个气泡效果动画,粗略的想法将不胜感激。

最佳答案

您可以使用 pimp_my_button 创建与此类似的气泡效果。包裹。此包裹不在 pub.dev所以你需要通过github安装它。

您可以按照以下方式安装它

pimp_my_button:
git:
url: git://github.com/Norbert515/pimp_my_button.git

之后你需要实现按钮如下
PimpedButton(
particle: DemoParticle(),
pimpedWidgetBuilder: (context, controller) {
return FloatingActionButton(onPressed: () {
controller.forward(from: 0.0);
},);
},
),

你可以测试它,你可以看到你的按钮上有这种烟花效果。

现在要创建自定义动画,您必须创建自己的粒子动画。
我在下面附上了一个简单的气泡动画,您可以根据需要对其进行调整。

class MyParticle extends Particle {
@override
void paint(Canvas canvas, Size size, progress, seed) {
int randomMirrorOffset = 6;
CompositeParticle(children: [
// Firework(),
CircleMirror(
numberOfParticles: 16,
child: AnimatedPositionedParticle(
begin: Offset(0.0, 20.0),
end: Offset(0.0, 60.0),
child: FadingCircle(radius: 3.0, color: Colors.pink),
),
initialRotation: -pi / randomMirrorOffset),
CircleMirror.builder(
numberOfParticles: 16,
particleBuilder: (index) {
return IntervalParticle(
child: AnimatedPositionedParticle(
begin: Offset(0.0, 30.0),
end: Offset(0.0, 50.0),
child: FadingCircle(radius: 3.0, color: Colors.pink),
),
interval: Interval(
0.5,
1,
));
},
initialRotation: -pi / randomMirrorOffset ),
]).paint(canvas, size, progress, seed);
}
}

现在更换 DemoParticle()MyParticle() &你会有一个气泡涟漪效应。

要不断重复气泡动画,请执行以下操作。
改变

controller.forward(from: 0.0);





controller.repeat(period: Duration(seconds: 1));



在这里,您可以使用 period 属性更改或跳过动画持续时间。

关于flutter - flutter 中的气泡波纹动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57961852/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com