flutter - flutter 中的气泡波纹动画

Question

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

Answer 1

您可以使用 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 属性更改或跳过动画持续时间。