flutter_animator 1.0.1 flutter_animator: ^1.0.1 copied to clipboard
Create animations with less code in a chaining manner. This package allows you to combine and chain multiple animations based on percentages of the duration.
animator #
Enables you to create stunning flutter animations, faster, efficient and with less code.
Partly inspired by the amazing Animate.css package by Dan Eden. Please note, that although it's inspired by Animate.css, this still is a Flutter package, meaning it will be available for all flutter-supported platforms
Features:
- Combine and chain Tweens with multiple easing-curves.
- Less boilerplate code by using a mixin which directly provides the controller, animations etc.
- Automatically (re)starts animations on hot-reload after saving.
- Animate your project with ease using the Animate.css based Widgets.
Getting Started #
Note: To see all of the animated widgets in action be sure to run the app in the example package, or view them on the Animate.css page.
Put the dependency inside your pubspec.yml and run packages get.
Using one of the Animate.css style widgets:
import 'package:flutter/widgets.dart';
import 'package:animator/animator.dart';
class TestAnimatedWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return RubberBand(
child: Text(
'Rubber',
style: TextStyle(fontSize: 60),
),
);
}
}
Create your own:
Below is the code (with extra comments) from the actual Flash animated widget. It should give you a clear insight on how to animate with the Animator.
import 'package:flutter/widgets.dart';
import 'package:animator/animator.dart';
class Flash extends StatefulWidget {
final Widget child;
final Duration offset;
final Duration duration;
final AnimationStatusListener animationStatusListener;
Flash({Key key, @required this.child,
this.offset = Duration.zero,
this.duration = const Duration(seconds: 1),
this.animationStatusListener,
}) {
assert(child != null, 'Error: child in $this cannot be null');
assert(offset != null, 'Error: offset in $this cannot be null');
assert(duration != null, 'Error: duration in $this cannot be null');
}
@override
_FlashState createState() => _FlashState();
}
class _FlashState extends State<Flash> with SingleAnimatorStateMixin { //<- implement SingleAnimatorStateMixin
@override
Widget build(BuildContext context) {
return FadeTransition(
opacity: animation.get("opacity"), //<- use "opacity" Animation as defined below in createAnimation()
child: widget.child,
);
}
@override
Animator createAnimation() {
return Animator.sync(this) //<- sync initializes a new Animator instance with this as TickerProvider
.at(offset: widget.offset, duration: widget.duration) //<- use at() to define offset and duration for animations below
.add(
key: "opacity", //<- add "opacity" animation
tweens: TweenList<double>( //<- create a blended tween of double values
[
TweenPercentage(percent: 0, value: 1.0), //<- at 0 percent we want a value of 1.0
TweenPercentage(percent: 25, value: 0.0),//<- at 25 percent we want a value of 0.0, etc.
TweenPercentage(percent: 50, value: 1.0),
TweenPercentage(percent: 75, value: 0.0), // Note that it's also possible to assign a curve here.
TweenPercentage(percent: 100, value: 1.0),
],
),
)
.addStatusListener(widget.animationStatusListener)
.generate(); //<- Generate must always be called at the end, to generate the AnimationController.
}
}
Chaining animations
You can chain animations in the following manner:
Animator.sync(this)
.at(duration: Duration(seconds: 1))
.add(...)
.add(...)//<- Add multiple animations from 0 to 1 seconds
.at(offset: Duration(seconds: 1), duration: Duration(seconds: 1))
.add(...)
.add(...)//<- Add multiple animations from 1 to 2 seconds
.generate();
Available default animations: #
Attention Seekers #
- Bounce
- Flash
- HeadShake
- HeartBeat
- Jello
- Pulse
- RubberBand
- Shake
- Swing
- Tada
- Wobble
Bouncing Entrances #
- BounceIn
- BounceInDown
- BounceInLeft
- BounceInRight
- BounceInUp
Bouncing Exits #
- BounceOut
- BounceOutDown
- BounceOutLeft
- BounceOutRight
- BounceOutUp
Fading Entrances #
- FadeIn
- FadeInDown
- FadeInDownBig
- FadeInLeft
- FadeInLeftBig
- FadeInRight
- FadeInRightBig
- FadeInUp
- FadeInUpBig
Fading Exits #
- FadeOut
- FadeOutDown
- FadeOutDownBig
- FadeOutLeft
- FadeOutLeftBig
- FadeOutRight
- FadeOutRightBig
- FadeOutUp
- FadeOutUpBig
Flippers #
- Flip
- FlipInX
- FlipInY
- FlipOutX
- FlipOutY
Lightspeed #
- LightSpeedIn
- LightSpeedOut
Rotating Entrances #
No previews available.
- RotateIn
- RotateInDownLeft
- RotateInDownRight
- RotateInUpLeft
- RotateInUpRight
Rotating Exits #
No previews available.
- RotateOut
- RotateOutDownLeft
- RotateOutDownRight
- RotateOutUpLeft
- RotateOutUpRight
Sliding Entrances #
- SlideInDown
- SlideInLeft
- SlideInRight
- SlideInUp
Sliding Exits #
- SlideOutDown
- SlideOutLeft
- SlideOutRight
- SlideOutUp
Specials #
No previews available.
- Hinge
- JackInTheBox
- RollIn
- RollOut
Zooming Entrances #
- ZoomIn
- ZoomInDown
- ZoomInLeft
- ZoomInRight
- ZoomInUp
Zooming Exits #
- ZoomOut
- ZoomOutDown
- ZoomOutLeft
- ZoomOutRight
- ZoomOutUp