Coditaiton Animator

Flutter package to ease building animations

Features

This package takes away the hard work of setting up animations in flutter by exposing animator widgets api making it simple to configure a sequence of animations to be applied on a widget.

Using this package, any flutter widget could be configured to go through a customized sequence of animation effects one after the other.

Animators exposed by the package are:

  • Rotation
  • Scale-in
  • Scale-out
  • Flip
  • Fade-in
  • Fade-out
  • Translate

Demo

Getting started

Installation

dependencies:
  coditation_animator: <latest-version>

The package exposes a set of configuration objects corresponding to each animation supported. For instance, RotationAnimatorConfig takes in configurations for setting up rotation animation on a widget. Similarly

  • ScaleInAnimatorConfig for Scale-in animation
  • ScaleOutAnimatorConfig for Scale-out animation
  • FlipAnimatorConfig for Flip animation
  • FadeInAnimatorConfig for Fade-in animation
  • FadeOutAnimatorConfig for Fade-out animation
  • TranslateAnimatorConfig for Fade-out animation

These config objects can also be instantiated using static getter methods in AnimatorConfig class. For instance:

  • AnimatorConfig.rotate(angle: pi/4)
  • AnimatorConfig.scaleIn(scaleIn: 1)
  • AnimatorConfig.scaleOut(scaleOut: 1)
  • AnimatorConfig.flipX()
  • AnimatorConfig.flipY()
  • AnimatorConfig.fadeIn()
  • AnimatorConfig.fadeOut()
  • AnimatorConfig.translate()

The package exposes MultiAnimator which takes in

  • child which expects any widget which will go through the sequence of animations
  • animatorConfigs which expects a list of these animator config objects. The sequence of the config objects passed in the list matters, to obtain the desired sequence of animations being applied on the child.
  • rootAnimatorWidgetStateKey which is of type GlobalKey<AnimatorWidgetState<AnimatorWidget>>
final GlobalKey<AnimatorWidgetState> rootAnimatorWidgetStateKey = GlobalKey();

 MultiAnimator(
    rootAnimatorWidgetStateKey: rootAnimatorStateKey,
    animatorConfigs: [
        AnimatorConfig.translate(offset: const Offset(100, 0)),
        RotationAnimatorConfig(
            curve: Curves.bounceIn,
            angle: pi / 4,
        ),
        FlipAnimatorConfig(curve: Curves.bounceIn),
        FadeOutAnimatorConfig(curve: Curves.linear),
        FadeInAnimatorConfig(curve: Curves.fastOutSlowIn),
        FlipAnimatorConfig(curve: Curves.bounceIn, flipAxis: FlipAxis.x),
        ScaleInAnimatorConfig(
            curve: Curves.bounceOut,
            scaleIn: 1,
        ),
        RotationAnimatorConfig(
            curve: Curves.bounceIn,
            angle: -pi / 4,
        ),
        ScaleOutAnimatorConfig(
            curve: Curves.bounceInOut,
            scaleOut: 1,
        ),
    ],
    child: Container(
        height: 50,
        width: 100,
        color: Colors.red,
    ),
),

Triggering animation

The rootAnimatorWidgetStateKey can be used to trigger the animation sequence through different methods like:

  • animate() method to start animation to trigger sequentially based on the sequence given in the list
    • make sure to invoke reset() method before invoking animate() to start fresh by resetting any affect from previous animation
  • reset() method to reset animators before starting fresh
  • reverseAnimate() method to perform reversal of the animation sequence in reverse order of the list, once the forward animation is done through animate() method
  • repeat() method to repeat animation sequence forever
Row(
    children: [
        Expanded(
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
                FloatingActionButton.extended(
                    heroTag: "Forward",
                    onPressed: rootAnimatorWidgetStateKey.forward,
                    label: const Text("Forward"),
                    icon: const Icon(Icons.forward),
                ),
                FloatingActionButton.extended(
                    heroTag: "Reverse",
                    onPressed: rootAnimatorWidgetStateKey.reverse,
                    label: const Text("Reverse"),
                    icon: const Icon(Icons.undo),
                ),
                FloatingActionButton.extended(
                    heroTag: "Repeat",
                    onPressed: rootAnimatorWidgetStateKey.repeat,
                    label: const Text("Repeat"),
                    icon: const Icon(Icons.repeat),
                ),
            ],
            ),
        ),
    ],
)

Libraries

coditation_animator