Anchor Effects

Anchor effects are used to change the anchor point of a component over time. The anchor point is the point around which the component rotates and scales.

AnchorByEffect

Changes the location of the target’s anchor by the specified offset. This effect can also be created using AnchorEffect.by().

anchor_by_effect.dart

import 'package:doc_flame_examples/flower.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';

class AnchorByEffectGame extends FlameGame {
  bool reset = false;

  @override
  Future<void> onLoad() async {
    final flower = Flower(
      size: 60,
      position: canvasSize / 2,
      onTap: (flower) {
        flower.add(
          AnchorByEffect(
            reset ? Vector2(-0.5, -0.5) : Vector2(0.5, 0.5),
            EffectController(speed: 1),
          ),
        );
        reset = !reset;
      },
    );
    add(flower);
  }
}

Code

final effect = AnchorByEffect(
  Vector2(0.1, 0.1),
  EffectController(speed: 1),
);

AnchorToEffect

Changes the location of the target’s anchor. This effect can also be created using AnchorEffect.to().

anchor_to_effect.dart

import 'package:doc_flame_examples/flower.dart';
import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';

class AnchorToEffectGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    final flower = Flower(
      size: 60,
      position: canvasSize / 2,
      onTap: (flower) {
        flower.add(
          AnchorToEffect(
            flower.anchor == Anchor.center ? Anchor.bottomLeft : Anchor.center,
            EffectController(speed: 1),
          ),
        );
      },
    );
    add(flower);
  }
}

Code

final effect = AnchorToEffect(
  Anchor.center,
  EffectController(speed: 1),
);