是否可以在Flutter Flame中自定义创建自定义效果（通过继承等方式）？

Question

是否可以在 Flutter Flame 中进行自定义（例如通过继承）并创建自定义效果？例如，在 Siv3D 中，您可以创建自定义效果，例如圆圈出现在单击的位置然后消失。 Flame 中也可以创建类似的自定义效果吗？ （注意：我对创建自定义效果感兴趣，而不是特别是圆形效果）。

Siv3D中自定义效果参考：https://siv3d.github.io/ja-jp/tutorial3/effect/

Siv3D（C++）：
注意：这只是许多其他示例之一。

# include <Siv3D.hpp>

struct RingEffect : IEffect
{
  Vec2 m_pos;

  ColorF m_color;

  // このコンストラクタ引数が、Effect::add<RingEffect>() の引数になる
  explicit RingEffect(const Vec2& pos)
      : m_pos{ pos }
      , m_color{ RandomColorF() } {}

  bool update(double t) override
  {
      // 時間に応じて大きくなる輪を描く
      Circle{ m_pos, (t * 100) }.drawFrame(4, m_color);

      // 1 秒未満なら継続する
      return (t < 1.0);
  }
};

void Main()
{
  Effect effect;

  while (System::Update())
  {
      ClearPrint();

      // アクティブなエフェクトの数
      Print << U"Active effects: {}"_fmt(effect.num_effects());

      if (MouseL.down())
      {
          // エフェクトを追加する
          effect.add<RingEffect>(Cursor::Pos());
      }

      // アクティブなエフェクトのプログラム IEffect::update() を実行する
      effect.update();
  }
}

---

参考资料：

• https://docs.flame-engine.org/latest/flame/effects.html
• https://zenn.dev/reputeless/books/siv3d-documentation
• https://siv3d.github.io/ja-jp/

Answer 1

是的，您可以创建自定义效果。对于圆形示例，您可能希望使用

CircleComponent

，然后添加

SizeEffect

或

ScaleEffect

+

RemoveEffect

。

但是既然您想了解自定义效果，这里有一个自定义效果，它设置

strokeWidth

或使用

Component

mixin 的

HasPaint

上的绘画：

/// The strokeWidth of your paint will go from 0 to thickness.
class ColorThicknessEffect extends ComponentEffect<HasPaint> {
  final double thickness;

  ColorThicknessEffect(
    this.thickness,
    EffectController controller, {
    void Function()? onComplete,
    super.key,
  })  : assert(
          thickness >= 0,
          'Thickness should be greater than 0',
        ),
        super(controller, onComplete: onComplete);

  @override
  Future<void> onMount() async {
    super.onMount();

    _originalThickness = target.paint.strokeWidth;
  }

  @override
  void apply(double progress) {
    target.paint.strokeWidth = thickness * progress;
  }

  @override
  void reset() {
    super.reset();
    target.paint.strokeWidth = _originalThickness;
  }
}