easy_animate

beautiful simple animation for flutter!🚀
With this package, you can add animation effects super easily!!⛱

for example...

const FadeInAnimation(
        child: YourFavoriteWidget(),
    );

It`s so easy!🤩

You can easily add animation effects to your apps without setting any further properties. However, you can customize/set Durtation, Direction, moveAmount and more properties as needed.

• easy_animate
  • Dependency
  • Animation List
    • FadeIn
    • FadeOut
    • SlideIn
    • ScaleIn
    • Shake
    • Bounce
    • Fluffy
    • Pulse
  • Customizing Animation
  • Developer mode
  • Acknowledgments

Dependency

simple_animation package

Animation List

FadeIn

FadeInAnimation(
        animateDirection: AnimateDirection.left,
        child: SomeWidget(),
      );

FadeOut

FadeOutAnimation(
        animateDirection: AnimateDirection.right,
        child: SomeWidget(),
      );

SlideIn

SlideInAnimation(
        animateDirection: AnimateDirection.left,
        child: SomeWidget(),
      );

ScaleIn

ScaleInAnimation(
        child: SomeWidget(),
      );

Shake

ShakeAnimation(
        isHorizontal: true,
        child: SomeWidget(),
      );

Bounce

 BouncingAnimation(
        developerMode: true,
        child: SomeWidget(),
      );

Fluffy

FluffyAnimation(
        child: SomeWidget(),
      );

Pulse

PulseAnimation(
        child: SomeWidget(),
      );

Customizing Animation

for example, you can customize FadeInAnimation like this.

FadeInAnimation(
        animateDirection: AnimateDirection.right,
        animateType: AnimateType.loop,
        durationMilliseconds: 300,
        moveAmount: 200,
        child: MockBox(),
      );

property	value	description
animateDirection	AnimateDirection.top, AnimateDirection.right, AnimateDirection.bottom, AnimateDirection.left, AnimateDirection.none	Defines the direction of the animation
animateType	AnimateType.once, AnimateType.loop, AnimateType.mirror	Defines the type of animation
durationMilliseconds	double	Defines the duration(ms) of the animation
moveAmount	double	Defines the distance of the animation
delay	Duration	Defines the delay of the animation

Developer mode

You can check the animation effect in the developer mode. It`s very useful for debugging.

AnimationDeveloperTools(
        child: PulseAnimation(
            developerMode: true, // don't forget this!
            child: SomeWidget(),
        )
    );

Yes, just set AnimationDeveloperTools() as the parent widget and enable developerMode.

See simple_animation package for more details.

Acknowledgments

I'm grateful for package simple_animation & Development team🙏