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：持续时间（seconds：1））;

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

颤动中的气泡波纹动画

1 个答案: