anim

Fluent Flutter Animation library. Describe Sequences & Parallel animation's workflow, setup startDelay, duration and curve, then run !

Describe the Anim

Anim contains 3 major classes : AnimValues, AnimSequentially and AnimTogether.

Animation

AnimValues(
    name:"animationName", 
    values: [value0, value1, value2, ...],
    duration: Duration(seconds: 1),
);

Animation schedulers

AnimSequentially() to play one after the other animations AnimTogether() to play in parallel animations

AnimSequentially(anims: [
    anim1, anim2, anim3
]);
AnimTogether(anims: [
    anim1, anim2, anim3
]);

Example

this.anim = Anim(
        vsync: this,
        listener: () {
          setState(() {
            /* rebuild */
          });
        },
        /* Define initial values, used when the animation has not been launched */
        initiaValues: {
          "alpha": 1,
          "size": 100,
        },
        animations: [
          AnimSequentially(
              startDelay: const Duration(milliseconds: 400),
              anims: [

                //Animate the alpha, then the size
                AnimValues(
                  name: "alpha",
                  curve: Curves.easeIn,
                  duration: const Duration(milliseconds: 800),
                  values: [1, 0.4, 0.8, 0.5],
                ),
                AnimValues(
                  name: "size",
                  curve: Curves.easeIn,
                  duration: const Duration(milliseconds: 800),
                  values: [100, 140, 80],
                ),

                //and finally animate those two values together
                AnimTogether(anims: [
                  AnimValues(
                    name: "alpha",
                    curve: Curves.easeIn,
                    duration: const Duration(milliseconds: 800),
                    values: [0.5, 1],
                  ),
                  AnimValues(
                    name: "size",
                    curve: Curves.easeIn,
                    duration: const Duration(milliseconds: 800),
                    values: [80, 100],
                  ),
                ])
              ]),
        ]);

Bind your Anim

@override
Widget build(BuildContext context) {
  return Opacity(
      opacity: this.anim["alpha"],
      child: SizedBox(
          height: this.anim["size"],
          width: this.anim["size"]
          child: _yourView(),
      ),
    );
  }
}

Flutter

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.