![]() ![]() On the other hand, creating one controller similar to the earlier examples would lead to both animations starting simultaneously. ![]() Here, creating two controllers for two animations would lead to a lot of unnecessary code triggering one controller after the other. Here, the animation proceeds in two steps, or ‘intervals’, the first is expanding from a small to a larger size and the second is changing color once the first animation completes. Now, simply assigning an AnimationController won’t do justice to our idea as it would start all animations at once and not in steps. This may work in some cases, however, it makes changing even a small part of the animation a nightmare.Ī key element of a Staggered Animation is this – there may be several animations but they need to be connected to a single AnimationController. One naïve way to do this is to make several animation controllers and trigger them one after the other. Such an animation is called a Staggered Animation, meaning there are several steps to the animation. Often, developers need several animations that run one after the other, sometimes on one object, sometimes on several. Width = MediaQuery.of(context).size.width Ĭhild: Text("Animate!", style: TextStyle(color: Colors.white),),Īnd that’s it! We have our animation functioning with only so many lines of code! Staggered Animations Height = MediaQuery.of(context).size.height Let’s change the values to the screen size: RaisedButton( Next, on a button click, we change the existing values. Simple variables for storing container values Here, when the button is clicked, the container goes from a smaller initial size and blue in color to a larger size and green in color.įirst, we add an AnimatedContainer and variables to store the current values. Let’s quickly create an example similar to one in the first article: No animation controller, no tween, no animation and yet it animates to the final value! So, why did we not use this approach earlier?īecause, internally, the class uses the same mechanism for creating a Tween for size or color that we used in the first example.įirst, we simply use a ImplicitlyAnimatedWidget, here AnimatedContainer, and on button click, we change the values we want to. Note that the animation duration is specified by the user. Similarly, if color or any other property is changed, it will animate to the final property instead of jumping to the final value. Instead, it will gradually change just like it did with our animation code! When we change the value of the box from, say, 100.0 to 300.0, it will not jump to the final size directly. If we switch the Container used in the example with an AnimatedContainer, we do not need all of the animation code we discussed earlier. Here is where ImplicitlyAnimatedWidgets step in. What if we directly changed the box size from, say, 100.0 to 300.0 without any kind of Tween or AnimationController? It would just jump from the initial size to the final size. To increase the size of the box, we set an initial and final size and then used a Tween to grow the box size gradually. In this example, we used an AnimationController and a Tween to change the size and color of the box. So, let’s first start where left off from the last article: This definition of implicitly animated widgets can sound a bit confusing. Implicitly Animated Widgets are widgets that automatically animate changes in themselves. for implicitly animated widgets, we can effectively say that the code is implicit, meaning it is in-built and does not have to be manually written. When we call something ‘implicit’, we mean a quality is inherent in something.
0 Comments
Leave a Reply. |