flame/examples/lib/stories/effects/move_effect_example.dart

import 'dart:math';

import 'package:flame/components.dart';
import 'package:flame/effects.dart';
import 'package:flame/game.dart';
import 'package:flame/geometry.dart';
import 'package:flame_noise/flame_noise.dart';
import 'package:flutter/material.dart';

class MoveEffectExample extends FlameGame {
  static const description = '''
    Top square has `MoveEffect.to` effect that makes the component move along a
    straight line back and forth. The effect uses a non-linear progression
    curve, which makes the movement non-uniform.

    The middle green square has a combination of two movement effects: a
    `MoveEffect.to` and a `MoveEffect.by` which forces it to periodically jump.

    The purple square executes a sequence of shake effects.

    At the bottom there are 60 more components which demonstrate movement along
    an arbitrary path using `MoveEffect.along`.
  ''';

  MoveEffectExample()
      : super(
          camera: CameraComponent.withFixedResolution(
            width: 400,
            height: 600,
          )..viewfinder.anchor = Anchor.topLeft,
          world: _MoveEffectWorld(),
        );
}

class _MoveEffectWorld extends World {
  @override
  void onLoad() {
    final paint1 = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5.0
      ..color = Colors.deepOrange;
    final paint2 = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5.0
      ..color = Colors.greenAccent;
    final paint3 = Paint()..color = const Color(0xffb372dc);

    // Red square, moving back and forth
    add(
      RectangleComponent.square(
        position: Vector2(20, 50),
        size: 20,
        paint: paint1,
      )..add(
          MoveEffect.to(
            Vector2(380, 50),
            EffectController(
              duration: 3,
              reverseDuration: 3,
              infinite: true,
              curve: Curves.easeOut,
            ),
          ),
        ),
    );

    // Green square, moving and jumping
    add(
      RectangleComponent.square(
        position: Vector2(20, 150),
        size: 20,
        paint: paint2,
      )
        ..add(
          MoveEffect.to(
            Vector2(380, 150),
            EffectController(
              duration: 3,
              reverseDuration: 3,
              infinite: true,
            ),
          ),
        )
        ..add(
          MoveEffect.by(
            Vector2(0, -50),
            EffectController(
              duration: 0.25,
              reverseDuration: 0.25,
              startDelay: 1,
              atMinDuration: 2,
              curve: Curves.ease,
              infinite: true,
            ),
          ),
        ),
    );

    // Purple square, vibrating from two noise controllers.
    add(
      RectangleComponent.square(
        size: 15,
        position: Vector2(40, 240),
        paint: paint3,
      )..add(
          SequenceEffect(
            [
              MoveEffect.by(
                Vector2(5, 0),
                NoiseEffectController(
                  duration: 1,
                  noise: PerlinNoise(frequency: 20),
                ),
              ),
              MoveEffect.by(Vector2.zero(), LinearEffectController(2)),
              MoveEffect.by(
                Vector2(0, 10),
                NoiseEffectController(
                  duration: 1,
                  noise: PerlinNoise(frequency: 10),
                ),
              ),
            ],
            infinite: true,
          ),
        ),
    );

    // A circle of moving rectangles.
    final path2 = Path()..addOval(const Rect.fromLTRB(80, 230, 320, 470));
    for (var i = 0; i < 20; i++) {
      add(
        RectangleComponent.square(size: 10)
          ..position = Vector2(i * 10, 0)
          ..paint = (Paint()..color = Colors.tealAccent)
          ..add(
            MoveAlongPathEffect(
              path2,
              EffectController(
                duration: 6,
                startDelay: i * 0.3,
                infinite: true,
              ),
              absolute: true,
              oriented: true,
            ),
          ),
      );
    }

    // A star of moving rectangles.
    final path1 = Path()..moveTo(200, 250);
    for (var i = 1; i <= 5; i++) {
      final x = 200 + 100 * sin(i * tau * 2 / 5);
      final y = 350 - 100 * cos(i * tau * 2 / 5);
      path1.lineTo(x, y);
    }
    for (var i = 0; i < 40; i++) {
      add(
        CircleComponent(radius: 5)
          ..position = Vector2(i * 10, 0)
          ..add(
            MoveAlongPathEffect(
              path1,
              EffectController(
                duration: 10,
                startDelay: i * 0.2,
                infinite: true,
              ),
              absolute: true,
            ),
          ),
      );
    }
  }
}