simple_animations 2.2.2 simple_animations: ^2.2.2 copied to clipboard
Powerful framework to create beautiful custom animations in no time.
🎬 Simple Animations ❷ #
Simple Animations is a powerful framework to create beautiful custom animations in no time.
- 💪 fully tested
- 📝 well documented
- 💼 enterprise-ready
🌞 Highlights #
- Easily create custom animations in stateless widgets
- Animate multiple properties at once
- Create staggered animations within seconds
- Simplified working with AnimationController instances
- Designed with type-safety in mind
⛏️ Getting started #
Add Simple Animations to your project by following the instructions on the install page and start using it:
import 'package:simple_animations/simple_animations.dart';
🛈 If are upgrading from version 1.x.x
read the migration guide.
🍱 Modules #
Simple Animations constists of multiple modules that are provided by this Flutter package. You can also use them separately.
Overview #
Module | Description |
---|---|
🚀 Stateless Animation | Widgets for super simple creating custom animations. |
🎭 MultiTween | Animate multiple properties at once or create staggered animations. |
🎥 Anicoto | Setup managed AnimationControllers instantly. |
Click on a module name to read it's documentation and to see examples.
🛈 Note: These examples uses supercharged for syntactic sugar.
🚀 Stateless Animation #
Stateless Animation provides your app with a powerful set of Flutter widgets that hide the most complex part of creating animations.
Example: Square with a animated, fading background color.
PlayAnimation<Color>( // <-- specify type of animated variable
tween: Colors.red.tweenTo(Colors.blue), // <-- define tween of colors
builder: (context, child, value) { // <-- builder function
return Container(
color: value, // <-- use animated value
width: 100,
height: 100
);
});
Read more about it or watch examples.
🎭 MultiTween #
MultiTween gives is mighty tool thats enables you to tween multiple properties in a single Animatable
or designing staggered animations.
Example: Custom tween with multiple properties.
enum AniProps { width, height, color } // <-- define properties
class MyWidget extends StatelessWidget {
final _tween = MultiTween<AniProps>() // <-- design tween
..add(AniProps.width, 0.0.tweenTo(400.0), 1000.milliseconds)
..add(AniProps.width, 400.0.tweenTo(300.0), 1000.milliseconds)
..add(AniProps.height, 500.0.tweenTo(200.0), 2000.milliseconds)
..add(AniProps.color, Colors.red.tweenTo(Colors.blue), 2.seconds);
@override
Widget build(BuildContext context) {
return ... // <-- use tween
}
}
Read more about it or watch examples.
🎥 Anicoto #
Anicoto fully manages your AnimationController instances and handles initialization, configuration and disposing. No more boilerplate code.
Example: Animated stateful widget with full-fledged AnimationController instance.
class _MyAnimatedWidgetState extends State<MyAnimatedWidget>
with AnimationMixin { // <-- add AnimationMixin to state class
Animation<double> size; // <-- declare animation variable
@override
void initState() {
size = 0.0.tweenTo(200.0).animatedBy(controller); // <-- connect tween and controller and apply to animation variable
controller.play(); // <-- start the animation playback
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
width: size.value, // <-- use animation variable's value here
height: size.value, // <-- use animation variable's value here
color: Colors.red
);
}
}
Read more about it or watch examples.
📈 Improve #
Simple Animations will improve in future updates. Help me by reporting bugs, submit new ideas for features or anything else that you want to share.
- Just write an issue on GitHub. ✏️
- And don't forget to hit the like button for this package ✌️