Staggered Animation In Flutter
A staggered animation includes consecutive or covering animations.To make an staggered animation, to utilize a few/couple of Animation items.One Animation Controller controls all the Animations.Each Animation object shows the movement at some point or another of an Interval.For each preferred position being animated, make a Tween.
Staggered animations movements are a direct idea: visual changes occur as a progression of tasks, instead of at the same time. The activity may be simply consecutive, with one change occuring after the following, or it may somewhat or totally cover. It may likewise have holes, where no progressions happen.
Here is the demo video you can take a look staggered animationhttps://www.youtube.com/embed/0fFvnZemmh8?feature=oembed
In this video, you will see the accompanying animation movement of a single widget, which starts as a bordered blue square with marginally adjusted corners. The square runs they will blur and afterward change in square was broaden in measure and afterward square becomes taller while moving upwards and they will changes into an outskirt circle and the progressions shading blue to orange,after walking forward, the activity runs backward.
Structure of a staggered animation
The entire of the animations are pushed by methods for a similar Animation Controller.Regardless of the way extensive the animation movement keeps going in genuine time, the controller’s qualities should be among zero.0 and 1.0, comprehensive.
Every animation movement has an Interval among zero.Zero and 1.0, comprehensive.
For every having a place that animates in an interval, make a Tween. The Tween determines the beginning and give up values for that assets.The Tween produces a Animation thing that is made do with the guide of the controller.
To set up the animation:
- Make a Animation Controller that deals with every one of the Animations.
- Make a Tween for each having a place being animated.
- The Tween characterizes different values.
- The Tween’s animate technique requires the decide controller, and produces a Animation for that assets.
- Determine the interval time frame at the Animation’s curve assets.
How to use Staggered animation in Flutter:
The following code makes a tween for the avatarSize property. It constructs a CurvedAnimation, determining an elasticOut curve. See Curves for other accessible pre-characterized animation Curves.
avatarSize = Tween<double>(
begin: 50.0,
end: 150.0,
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(
0.125, 0.250,
curve: Curves.elasticOut,
),
),
),
Animation controller and Animation define an instance of the class AnimationController for the animation controller and five instances of the class Animation to handle animations (double to get a progressive value from 0 to 1).
final AnimationController controller;
final Animation<double> barHeight;
final Animation<double> avatarSize;
final Animation<double> titleOpacity;
final Animation<double> textOpacity;
final Animation<double> imageOpacity;
Animation initializing override the initState method and define the parameters for the animation. For this situation, the duration is set to three seconds.
_controller = AnimationController(
duration: const Duration(milliseconds: 3500),
vsync: this,);
How to implement in dart file:
You need to implement it in your code respectively:
This stateful widget, Staggered Trekking Animation add as a mixin the SingleTickerProviderStateMixin and makes the AnimationController was determining a 3500 ms duration. It will plays the animation movement and builds the non-animating portion of the widget. The animation start when a tap is distinguished in the screen. The animation movement runs forward and then reverse automatically.
In Staggered Trekking Enter Animation, using the tween’s current values and next you will make a Stateless widget,Staggered Trekking make a build() function an AnimatedBuilder—this widget for building animations. We create a function named _buildAnimation() and it work UI updates and assigns it to its builder property.
AnimatedBuilder will listen to the notifications from the animation controller will marking the widget for the values change. For each tick of the animation, the values were updated, resulting in a call to _buildAnimation().
here in the video posted below, you will see how staggered animation were working and when you tap anywhere in that screen it starts animation and run reverse automatically animation, you can control the speed of animation also.
So this was the basic example of Staggered Animation where we did a simple example and you can learn it.
Click the GitHub link below to find the source code of the Staggered Animation.
flutter-devs/Flutter-StaggeredAnimation
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
