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（来自：0.0）；

至

controller.repeat（周期：持续时间（秒：1））；

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

flutter - 颤动中的气泡波纹动画

问题描述

解决方案

推荐阅读