“This is the third day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021.”

preface

The basic animation components that Flutter comes with are called implicit animation components. If we count them up, there are dozens of them, including general animation construction classes, specific animation effects classes, and encapsulated animation components. So many, the advantage is to want to use the basic have, the disadvantage is to remember, not very convenient to find. This article has specially arranged the implicit animation components of Flutter for all Flutter lovers to view and use at any time.

AnimatedWidget

The AnimatedWidget is an abstract class that dynamically refreshes each frame using the value of the Animation object to animate it. If you want to build your own reusable animation components, you can use the AnimatedWidget. We squeak around the Windmill. This windmill load indicator widget is fun! This article uses the AnimatedWidget to build a windmill loading directive animation component. The AnimatedWidget is constructed as follows, where ListEnable is an abstract listEnable object, typically an Animation or ChangeNotifier.

const AnimatedWidget({
  Key? key,
  required this.listenable,
}) 
Copy the code

Animation

Animation is not a component, but building implicit Animation components requires an Animation object to control the start and end parameters of Animation, Animation curves, and so on. With Animation, you can build your own Animation classes based on StatefulWidget or StatelessWidget. We used Animation to build the Animation of the size change of the heart in Flutter. An Animation usually relies on the AnimationController to combine the Animation effects.

AnimatedBuilder

AnimatedBuilder separates animation effects from components so that motion effects can be applied to different components. AnimatedBuilder is preferred if a dynamic effect is used for multiple different components in an application. We have done a sample application of The AnimatedBuilder in Flutter introduction and Practice (96) : Using AnimatedBuilder to separate components and animation to achieve dynamic reuse. The AnimatedBuilder is constructed as follows: The Animation and Builder are passed in externally, so it is possible to construct reusable animation effects separate from the component.

const AnimatedBuilder({
    Key? key,
    required Listenable animation,
    required this.builder,
    this.child,
  }) 
Copy the code

AnimatedContainer

AnimatedContainer is the animation replacement component of a Container. You can animate the Container by modifying the dimensions, alignment, and TranForm parameters during animation. We used AnimatedContainer to implement a smiley face animation: do you see this animated smiley face I made? Does it look like a coder fixing a computer? The AnimatedContainer is constructed as follows, and you can see that almost all of the layout-related properties can be controlled by dynamic effects.

AnimatedContainer({
  Key? key,
  this.alignment,
  this.padding,
  Color? color,
  Decoration? decoration,
  this.foregroundDecoration,
  double? width,
  double? height,
  BoxConstraints? constraints,
  this.margin,
  this.transform,
  this.transformAlignment,
  this.child,
  this.clipBehavior = Clip.none,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
})
Copy the code

AnimatedPositioned

The animatedtoy is the animation replacement of the Stack. The position of the Stack can be realized by animatedtoy, thereby providing a glimpse of the Stack, for example: 🚀🚀🚀 to celebrate the launch of Shenzhou XIii, a rocket launch animation animatedtoy is constructed as follows, Note that only two of the three horizontal parameters (left, right, and width) and vertical parameters (top, bottom, and height) can be set, otherwise it will cause layout conflicts.

const AnimatedPositioned({
  Key? key,
  required this.child,
  this.left,
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
})
Copy the code

AnimatedCrossFade

AnimatedCrossFade is used to switch between two components, and the dynamic effect is fade in. Also, if two child components have different sizes, you can use layoutBuilder to smooth the transition sizes. The animation curves of the two child components can be configured separately. The simplest application is to change the display of the two child components to be switched, as shown below:

AnimatedCrossFade(
  duration: const Duration(seconds: 3),
  firstChild: const FlutterLogo(style: FlutterLogoStyle.horizontal, size: 100.0),
  secondChild: const FlutterLogo(style: FlutterLogoStyle.stacked, size: 100.0),
  crossFadeState: _first ? CrossFadeState.showFirst : CrossFadeState.showSecond,
)
Copy the code

AnimatedCrossFade is constructed as follows, where the default component layout is built by layoutBuilder.

const AnimatedCrossFade({
  Key? key,
  required this.firstChild,
  required this.secondChild,
  this.firstCurve = Curves.linear,
  this.secondCurve = Curves.linear,
  this.sizeCurve = Curves.linear,
  this.alignment = Alignment.topCenter,
  required this.crossFadeState,
  required this.duration,
  this.reverseDuration,
  this.layoutBuilder = defaultLayoutBuilder,
})
Copy the code

AnimatedDefaultTextStyle

AnimatedDefaultTextStyleUsed for text style animation effects, if you want to control the font change process (such as staying in the middle state)DefaultTextStyleTransitionTo complete. The following GIF is the effect of the official website. The animation of font transition can be used to make the animation of brand text, which can deepen the impression of users. AnimatedDefaultTextStyleIs constructed as follows.

const AnimatedDefaultTextStyle({
  Key? key,
  required this.child,
  required this.style,
  this.textAlign,
  this.softWrap = true.this.overflow = TextOverflow.clip,
  this.maxLines,
  this.textWidthBasis = TextWidthBasis.parent,
  this.textHeightBehavior,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd,
})
Copy the code

AnimatedList

AnimatedList AnimatedListState allows you to animate the transition between inserting and removing elements, providing better feedback on adding and removing elements from a list and improving the user experience. Are we still using ListView? AnimatedList Lets list elements move with AnimatedList. The overall implementation is still a bit complicated and is recommended for use when there are not many elements in the list. The AnimatedList is constructed as follows. Crucially, the itemBuilder receives an Animation object, so it can be used to perform the insert animation. To remove an element, use the removeItem method of AnimatedListState.

const AnimatedList({
  Key? key,
  required this.itemBuilder,
  this.initialItemCount = 0.this.scrollDirection = Axis.vertical,
  this.reverse = false.this.controller,
  this.primary,
  this.physics,
  this.shrinkWrap = false.this.padding,
  this.clipBehavior = Clip.hardEdge,
})
Copy the code

AnimatedModalBarrier

AnimatedModelBarrier is a replacement for ModalBarrier, which blocks its underlying components from interacting with the user and adds a color animation transition mask over them. The AnimatedModelBarrier is constructed as follows. If the dismissible parameter is true, the transmissible mask will exit the current page and return to the previous page.

const AnimatedModalBarrier({
  Key? key,
	requiredAnimation<Color? > color,bool dismissible,
	String? semanticsLabel,
	bool? barrierSemanticsDismissible
})
Copy the code

You can use AnimatedModalBarrier to create custom shells. When ejecting shells, use the AnimatedModalBarrier to cover the bottom layer, and then overlay new components on top of it. Here is an example of our implementation where clicking a button pops up a mask layer and then adds a text layer to the mask.

AnimatedOpacity

AnimatedOpacity is a transparency control animation that controls the transparency of its child components. This is easy to understand, changing component transparency during animation. We have already introduced Flutter introduction and Combat (95) : AnimatedOpacity effect.

AnimatedPhysicalModel

Controls the physical model of the component such as shadow, color and border arc, but the shape of the component itself does not change. For example, in the picture below, the official gave an example of changing the shadow. Although the component itself did not change, it felt like opening a gap because of the shadow change, which was also quite interesting.

The AnimatedPhysicalModel is constructed as follows, where the color and shadow colors are determined by animateColor and animateShadowColor, Boolean values.

const AnimatedPhysicalModel({
  Key? key,
  required Widget child,
  required BoxShape shape,
  Clip clipBehavior,
  BorderRadius borderRadius,
  required double elevation,
  required Color color,
  bool animateColor,
  required Color shadowColor,
  bool animateShadowColor,
  Curve curve = Curves.linear,
  required Duration duration,
  VoidCallback? onEnd
})
Copy the code

Here is an example of code that changes the z-axis shadow by changing the elevation attributes and animates the color transition:

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('AnimatedPhysicalModel animation'),
    ),
    body: Center(
      child: AnimatedPhysicalModel(
        child: Container(
          width: 300,
          height: 300,
        ),
        duration: Duration(seconds: 1),
        color: _elevation == 0.0 ? Colors.blue : Colors.green,
        animateColor: true,
        animateShadowColor: true,
        elevation: _elevation,
        shape: BoxShape.circle,
        shadowColor: Colors.blue[900]! , curve: Curves.easeInOutCubic, ), ), floatingActionButton: FloatingActionButton( child: Text('Play',
        style: TextStyle(
          color: Colors.white,
        ),
        textAlign: TextAlign.center,
      ),
      onPressed: () {
        setState(() {
          _elevation = _elevation == 0 ? 10.0 : 0.0; }); },),); }Copy the code

AnimatedSize

Animation component, by changing the size of the effect can be made to zoom in and out, the following is an official example, click on the component to change the size of the component, feel like scaling.

Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () => _updateSize(),
    child: Container(
      color: Colors.amberAccent,
      child: AnimatedSize(
        curve: Curves.easeIn,
        duration: const Duration(seconds: 1),
        child: FlutterLogo(size: _size),
      ),
    ),
  );
}
Copy the code

conclusion

This article lists the 12 basic components of Flutter implicit animation, which can be used to create normal animation effects. If you need to Transition your animations, you need to use Transition. In the next article, we’ll look at the Transition animations. The source code can be downloaded here: animation component demo source code.

extra

I have two 50% off gold nuggets booklet coupons (valid until 23:59 on November 30), you can add my wechat island-coder, first-come, first-served, free gift!

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

👍🏻 : a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!