https://github.com/roundedinfinity/fluid_animations
Create effortlessly smooth and responsive animations in your Flutter apps inspired by SwiftUI's spring animations.
https://github.com/roundedinfinity/fluid_animations
Last synced: 11 months ago
JSON representation
Create effortlessly smooth and responsive animations in your Flutter apps inspired by SwiftUI's spring animations.
- Host: GitHub
- URL: https://github.com/roundedinfinity/fluid_animations
- Owner: RoundedInfinity
- License: mit
- Created: 2024-03-16T13:15:47.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T12:21:22.000Z (over 1 year ago)
- Last Synced: 2025-04-08T00:51:08.929Z (about 1 year ago)
- Language: Dart
- Size: 1.05 MB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Fluid Animations
[![style: very good analysis][very_good_analysis_badge]][very_good_analysis_link]
[](https://github.com/felangel/mason)
[![License: MIT][license_badge]][license_link]
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:
```dart
final mySpring = FluidSpring.bouncy;
```
You can also create custom springs. `FluidSpring` has two properties: `duration` and `bounce`.
```dart
final mySpring = FluidSpring(bounce: 0.4, duration: 0.5);
```
**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.
```dart
FluidTransitionBuilder(
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()
);
```
When you need more control over your animation you can also use a `AnimationController` and run a spring simulation.
```dart
final spring = FluidSpring.smooth;
final simulation = SpringSimulation(spring, 0, 1, 0);
_controller.animateWith(simulation);
```
See the flutter example on how to [animate a widget using a physics simulation](https://docs.flutter.dev/cookbook/animation/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.
```dart
final Animation scaleAnimation = KeyframeAnimation(
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);
```
### 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](https://github.com/RoundedInfinity/fluid_animations/blob/main/example/lib/main.dart) implementation for guidance.
## Acknowledgements
The math used is based on this [amazing article](https://github.com/jenox/UIKit-Playground/tree/master/01-Demystifying-UIKit-Spring-Animations/).
Values for the prebuilt springs are from the [Apple Documentation](https://developer.apple.com/documentation/swiftui/animation) on animation.
[license_badge]: https://img.shields.io/badge/license-MIT-blue.svg
[license_link]: https://opensource.org/licenses/MIT
[mason_link]: https://github.com/felangel/mason
[very_good_analysis_badge]: https://img.shields.io/badge/style-very_good_analysis-B22C89.svg
[very_good_analysis_link]: https://pub.dev/packages/very_good_analysis