Shulou(Shulou.com)05/31 Report--

This article mainly explains "Flutter how to use SizeTransition to achieve component fly-in effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "Flutter how to use SizeTransition to achieve component fly-in effect"!

Preface

To continue the introduction of the Transition series of animation components, this article introduces SizeTransition. SizeTransition is used to change the size of subcomponents for animation. The animation can be modified vertically or horizontally, while the starting position of the size change can start from the top, middle, bottom (vertical) or left, middle, right (horizontal). With these features, we can build the effect of components flying in.

SizeTransition introduction

The construction method of SizeTransition is defined as follows.

Const SizeTransition ({Key? Key, this.axis = Axis.vertical, required Animation sizeFactor, this.axisAlignment = 0.0, this.child,})

The corresponding parameters are described as follows:

Axis: enumeration, vertical identifies changing the component size vertically, that is, changing the component height; horizontal means changing the component size horizontally, that is, changing the width of the component.

SizeFactor: the Animation object that controls the change in the size of the component. In fact, during the animation, the width (horizontal) or height (vertical) of the component size is multiplied by the value of * * Animation**.

AxisAlignment: during animation, the alignment position of the subcomponents, default to 0, changes the size from the middle; when axis is vertical,-1.0 means the top alignment starts the animation (that is, the size increases from top to bottom) When axis is horizontal, the starting direction is related to the reverse of the text (TextDirection.ltr or TextDirection.rtl), and when the text is from left to right (TextDirection.ltr, default),-1.0 means the animation starts from the left (that is, the size increases from left to right).

Application

For our fly-in animation, we want to fly in from left to right, so we need to set axis to horizontal and axisAligment to right. For the picture, find a Superman flying horizontally, and then add animation to achieve the effect of Superman flying in. The complete source code is as follows:

Class SizeTransitionDemo extends StatefulWidget {SizeTransitionDemo ({Key? Key}): super (key: key); @ override _ SizeTransitionDemoState createState () = > _ SizeTransitionDemoState ();} class _ SizeTransitionDemoState extends State with SingleTickerProviderStateMixin {late AnimationController _ controller = AnimationController (duration: const Duration (seconds: 3), vsync: this). Repeat (); / / use custom curve animation transition effect late Animation _ animation = CurvedAnimation (parent: _ controller, curve: Curves.fastLinearToSlowEaseIn) Override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('SizeTransition'), brightness: Brightness.dark, backgroundColor: Colors.blue,), body: SizeTransition (child: Center (child: Image.asset (' images/superman.png', width: 300.0, height: 300.0,)) ), sizeFactor: _ animation, axis: Axis.horizontal, axisAlignment: 1.0,) } @ override void dispose () {_ controller.stop (); _ controller.dispose (); super.dispose ();}} use SizeTransition to achieve other animation effects

We can start the animation from the middle, so there will be an effect of opening the scroll, for example, let's find a scroll painting to see the effect.

The implementation code for this animation is as follows:

Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('SizeTransition'), brightness: Brightness.dark, backgroundColor: Colors.blue,), body: Container (alignment: Alignment.center, child: SizeTransition (child: Image.asset (' images/juanzhou.png',), sizeFactor: _ animation, axis: Axis.horizontal AxisAlignment: 0. 0,) } at this point, I believe you have a deeper understanding of "how Flutter uses SizeTransition to achieve component fly-in effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.