question: how to create animation with component ?

[bung87]

I want create a simple fade out animation, I know flutter can use AnimationController in widget which is simple. however in component I can't get right this context pass to AnimationController's vsync parameter . below is the code demonstrate the logic.

   AnimationController controller = new AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    Animation animation = new Tween(begin: 1, end: 0).animate(controller);
    animation.addListener(() {
      introBg.sprite.paint.color =
          const Color(0xFFFFFFFF).withOpacity(animation.value);
    });
    controller.forward();

[erickzanardo]

Flame components are not Flutter widgets, so you can't use AnimationController. To make a component fade, you will need to manipulate the Paint opacity that is used to render that component.

This probably can give you some idea: https://github.com/erickzanardo/cave-ace/blob/c2ef124c7b2e53cddb28c71eacf1f9b1b9311c4e/cave_ace/lib/components/effects/hit_effect.dart#L17

[bung87]

Thank you ! this is helpful, I have suggestion , I think better have ComponentEffect as basic class contains Component could be generic type make it more flexible.

[spydon]

That is actually a pretty good idea @bung87, I did an implementation of it here https://github.com/flame-engine/flame/pull/484 if you want to have a look.

[bung87]

nice!! That's what I need.