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

This article mainly introduces "Android how to use ScaleTransition to achieve balloon blowing animation". In daily operation, I believe many people have doubts about how Android uses ScaleTransition to achieve balloon blowing animation. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubt of "how Android uses ScaleTransition to achieve balloon blowing animation". Next, please follow the editor to study!

Preface

For situations that only need to zoom in or out, you can use ScaleTransition directly. For example, we have realized the animation effect of a balloon that feels like being blown up from small to big.

ScaleTransition introduction

The use of ScaleTransition is very simple, with only three parameters, and the constructor is defined as follows.

Const ScaleTransition ({Key? Key, required Animation scale, this.alignment = Alignment.center, this.child,})

The corresponding parameters are described as follows:

Scale: the scaled size of the component, which is an Animation object, and the actual size of the component is equal to the actual size of the component multiplied by the value of the object.

Alignment: the starting alignment position of the zoom. You can control the zoom direction of the component through this parameter. For example, our balloon is scaled from bottomCenter, so that the balloon mouth feels like it is not moving.

Child: the subcomponent to be scaled.

Application

The balloon animation we want to achieve is very simple, find a balloon picture. Then use an Animation object to control the time and size of the zoom. Because the back of the balloon is getting harder to blow, we set the curve to easeOut (fast then slow). The source code is as follows:

Class ScaleTransitionDemo extends StatefulWidget {ScaleTransitionDemo ({Key? Key}): super (key: key); @ override _ ScaleTransitionDemoState createState () = > _ ScaleTransitionDemoState ();} class _ ScaleTransitionDemoState extends State with SingleTickerProviderStateMixin {late AnimationController _ controller = AnimationController (duration: const Duration (seconds: 10), vsync: this). Repeat (); / / use custom curve animation transition effect late Animation _ animation = CurvedAnimation (parent: _ controller, curve: Curves.easeOut) @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('ScaleTransition'), brightness: Brightness.dark, backgroundColor: Colors.blue,), body: Center (child: balloon (),);} @ override void dispose () {_ controller.stop (); _ controller.dispose (); super.dispose () } Widget balloon () {return ScaleTransition (alignment: Alignment.bottomCenter, child: Image.asset ('images/balloon.png',), scale: _ animation,);}} at this point, the study on "how Android uses ScaleTransition to realize balloon blowing animation" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.