🎬 Simple Animations ❷

Simple Animations is a powerful framework to create beautiful custom animations in no time.

💪 fully tested
📝 well documented
💼 enterprise-ready

🌞 Highlights

Easily create custom animations in stateless widgets
Animate multiple properties at once
Create staggered animations within seconds
Simplified working with AnimationController instances
Designed with type-safety in mind

⛏️ Getting started

Add the dependency simple_animations: ^2.1.1 to your project and start using it:

import 'package:simple_animations/simple_animations.dart';

For more details have a look at the install tab.

🛈 If are upgrading from version 1.x.x read the migration guide.

🍱 Modules

Simple Animations constists of multiple modules that are provided by this Flutter package. You can also use them separately.

Overview

Module	Description
🚀 Stateless Animation	Widgets for super simple creating custom animations.
🎭 MultiTween	Animate multiple properties at once or create staggered animations.
🎥 Anicoto	Setup managed AnimationControllers instantly.

Click on a module name to read it's documentation and to see examples.

🛈 Note: These examples uses supercharged for syntactic sugar.

🚀 Stateless Animation

Stateless Animation provides your app with a powerful set of Flutter widgets that hide the most complex part of creating animations.

Example: Square with a animated, fading background color.

PlayAnimation<Color>( // <-- specify type of animated variable
  tween: Colors.red.tweenTo(Colors.blue), // <-- define tween of colors
  builder: (context, child, value) { // <-- builder function
    return Container(
        color: value, // <-- use animated value
        width: 100, 
        height: 100
    );
});

🎭 MultiTween

MultiTween gives is mighty tool thats enables you to tween multiple properties in a single Animatable or designing staggered animations.

Example: Custom tween with multiple properties.

enum AniProps { width, height, color } // <-- define properties

class MyWidget extends StatelessWidget {

  final _tween = MultiTween<AniProps>() // <-- design tween
    ..add(AniProps.width, 0.0.tweenTo(400.0), 1000.milliseconds)
    ..add(AniProps.width, 400.0.tweenTo(300.0), 1000.milliseconds)
    ..add(AniProps.height, 500.0.tweenTo(200.0), 2000.milliseconds)
    ..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 2.seconds);

  @override
  Widget build(BuildContext context) {
    return ... // <-- use tween
  }
}

🎥 Anicoto

Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.

Example: Animated stateful widget with full-fledged AnimationController instance.

class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
    with AnimationMixin {  // <-- add AnimationMixin to state class

  Animation<double> size; // <-- declare animation variable

  @override
  void initState() {
    size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
    controller.play(); // <-- start the animation playback
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.value, // <-- use animation variable's value here 
      height: size.value, // <-- use animation variable's value here
      color: Colors.red
    );
  }
}

👓 Project overview

Module	Tests	Repository	Pub
Stateful Animation		Github
MultiTween		Github
Anicoto		Github

📈 Improve

Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features or anything else that you want to share.

Just write an issue on GitHub. ✏️
And don't forget to hit the like button for this package ✌️

raghut / simple_animations