Create Custom Animations with Simplicity: A Guide to Simple Animations

Simple Animations is a robust Flutter library that simplifies the creation of custom animations. Here's a comprehensive guide to its versatile features and usage patterns.

Getting Started

To use Simple Animations, add it to your project's dependencies:

dependencies:
  simple_animations: latest_version

Animation Builder Widgets

PlayAnimationBuilder: Plays an animation once.

PlayAnimationBuilder(
  tween: Tween(begin: 0.0, end: 100.0),
  duration: const Duration(seconds: 5),
  builder: (context, value, child) => Container(
    width: value,
    height: value,
    color: Colors.blue,
  ),
);

LoopAnimationBuilder: Plays an animation continuously in a loop.

LoopAnimationBuilder(
  tween: Tween(begin: 0.0, end: 100.0),
  duration: const Duration(seconds: 5),
  builder: (context, value, child) => Container(
    width: value,
    height: value,
    color: Colors.blue,
  ),
);

MirrorAnimationBuilder: Plays an animation forward and backward in a loop.

MirrorAnimationBuilder(
  tween: Tween(begin: 0.0, end: 100.0),
  duration: const Duration(seconds: 5),
  builder: (context, value, child) => Container(
    width: value,
    height: value,
    color: Colors.blue,
  ),
);

CustomAnimationBuilder: Provides fine-grained control over the animation.

CustomAnimationBuilder(
  control: Control.play,
  tween: Tween(begin: 0.0, end: 100.0),
  duration: const Duration(seconds: 5),
  builder: (context, value, child) => Container(
    width: value,
    height: value,
    color: Colors.blue,
  ),
);

Movie Tween

Movie Tween allows you to combine multiple tweens into a single, orchestrated animation, including timeline control and value extrapolation.

final tween = MovieTween()
  ..tween('width', Tween(begin: 0.0, end: 100.0), duration: const Duration(milliseconds: 700))
  ..tween('height', Tween(begin: 100.0, end: 200.0), duration: const Duration(milliseconds: 700));

Animation Mixin

The Animation Mixin simplifies working with AnimationController instances. It automatically initializes and disposes of controllers.

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State with AnimationMixin {
  late Animation size;

  @override
  void initState() {
    size = Tween(begin: 0.0, end: 200.0).animate(controller);
    controller.play();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value,
      height: size.value,
      color: Colors.red,
    );
  }
}

Animation Developer Tools

The Animation Developer Tools help debug and fine-tune animations. They enable pausing, scrubbing, and modifying animations.

AnimationDeveloperTools(
  child: PlayAnimationBuilder(
    tween: Tween(begin: 0.0, end: 100.0),
    duration: const Duration(seconds: 5),
    developerMode: true,
    builder: (context, value, child) => Container(
      width: value,
      height: value,
      color: Colors.blue,
    ),
  ),
);

Conclusion

Simple Animations empowers you to create sophisticated custom animations in Flutter with ease. Its intuitive widgets, powerful tween capabilities, and developer tools make it an invaluable asset for any Flutter developer.