fluid_animations

Description:

fluid animations

Fluid Animations #



Create effortlessly smooth and responsive animations in your Flutter apps inspired by Apple's SwiftUI animations.

Features #

⚡️ Effortlessly create smooth and responsive spring animations
🎨 Choose from preset animation styles (bouncy, smooth, snappy, interactive, ...)
🔧 Simplify creating smooth animations

Usage #
The simplest way of creating a spring is using the prebuilt ones. For example:
final mySpring = FluidSpring.bouncy;
copied to clipboard
You can also create custom springs. FluidSpring has two properties: duration and bounce.
final mySpring = FluidSpring(bounce: 0.4, duration: 0.5);
copied to clipboard
Duration: Defines the pace of the spring. This is approximately equal to the settling duration.
Bounce: How bouncy the spring should be. A value of 0 indicates no bounces, positive values indicate increasing amounts of bounciness up to a maximum of 1.0 (corresponding to undamped oscillation), and negative values indicate overdamped springs with a minimum value of -1.0.
Animating #
The simplest way to animate your widgets with a spring is using the FluidTransitionBuilder. It animates all changes of value using a spring.
FluidTransitionBuilder<double>(
value: isHovered ? 200.0 : 100.0,
spring: FluidSpring.bouncy, // Use a bouncy spring animation
builder: (animation, child) {
return Container(
width: animation.value,
height: animation.value,
child: child,
);
},
child: const FlutterLogo()
);
copied to clipboard
When you need more control over your animation you can also use a AnimationController and run a spring simulation.
final spring = FluidSpring.smooth;

final simulation = SpringSimulation(spring, 0, 1, 0);

_controller.animateWith(simulation);
copied to clipboard
See the flutter example on how to animate a widget using a physics simulation.
Animate using keyframes #
You can also create a complex custom animation using keyframes.
This example defines an animation that starts at 1 then interpolates to 0.8
for 20% of the animation's duration using a easing curve. Then it
interpolates to 1.4 for 50% of the duration using a spring and then
settles back to 1 for the last 30% of the animation using a different
spring.
final Animation<double> scaleAnimation = KeyframeAnimation<double>(
startingValue: 1,
keyframes: const [
CurvedKeyframe(
value: 0.8,
duration: 0.2,
curve: Curves.easeIn,
),
SpringKeyframe(
value: 1.4,
duration: 0.5,
spring: FluidSpring.bouncy,
),
SpringKeyframe(
value: 1,
duration: 0.3,
spring: FluidSpring.smooth,
velocity: 2,
),
],
).animate(myAnimationController);
copied to clipboard
2D Spring animations #
For 2D animations (e.g. animating positions like those seen in the demo video), use the SpringSimulation2D class. Refer to the example implementation for guidance.
Acknowledgements #
The math used is based on this amazing article.
Values for the prebuilt springs are from the Apple Documentation on animation.