coditation_animator

Description:

coditation animator

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


Getting started #
Installation #
dependencies:
coditation_animator: <latest-version>
copied to clipboard
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,
),
),
copied to clipboard
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),
),
],
),
),
],
)
copied to clipboard