How to use AnimatedOpacity to realize picture gradual animation in Flutter

Today, I would like to share with you how to use AnimatedOpacity to achieve picture gradual animation in Flutter. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Introduction to AnimatedOpacity

As the name implies, AnimatedOpacity is used to dynamically display the transparency of components. In fact, it implements the animation effect of dynamically transitioning the transparency of its subcomponents from the initial value to the specified value. The construction method of AnimatedOpacity is as follows:

Const AnimatedOpacity ({Key? Key, this.child, required this.opacity, Curve curve = Curves.linear, required Duration duration, VoidCallback? OnEnd, this.alwaysIncludeSemantics = false,})

The corresponding parameters are:

Child: the sub-component to control transparency

Opacity: the final transparency value, which needs to be between 0 and 1

Curve: dynamic effect curve. The default is linear Curves.linear. You can use Curves to build curve effects.

Duration: duration of dynamic effect

AlwaysIncludeSemantics: whether it always contains semantic information, the default is false. This is mainly used for auxiliary access, and in the case of true, semantic information (which can be read aloud) will be displayed regardless of the transparency, which is more friendly to the visually impaired.

OnEnd: callback method for the end of animation.

AnimatedOpacity application

The application is simple, just take the components that need to be scaled out as subcomponents of the AnimatedOpacity, and then change the transparency when the event occurs. Let's achieve the gradual effect of the following picture.

Transparency gradient. Gif

The implementation code is as follows:

Class AnimatedOpacityDemo extends StatefulWidget {const AnimatedOpacityDemo ({Key? Key}): super (key: key); @ override _ AnimatedOpacityDemoState createState () = > _ AnimatedOpacityDemoState ();} class _ AnimatedOpacityDemoState extends State {var opacity = 0.0 @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('AnimatedOpacity Animation'),), body: Center (child: Stack (alignment: Alignment.center, children: [Text (where is the Little Sister), AnimatedOpacity (duration: Duration (seconds: 3), opacity: opacity Child: ClipOval (child: Image.asset ('images/beauty.jpeg', width: 300, height: 300,), curve: Curves.ease,) FloatingActionButton: FloatingActionButton (child: Text (opacity = = 0? 'Show':' Hide', style: TextStyle (color: Colors.white,), textAlign: TextAlign.center,), onPressed: () {setState (() {opacity = opacity = = 0? 1.0: 0;});},),);}} picture gradual transition

In photo album applications, we often see a picture gradually change into another picture, so as to provide a better picture browsing experience, and even create a feeling of time flies. This effect can be achieved using AnimatedOpactity. Gradually reduce the transparency of one picture to 0 and increase the transparency of the other to 1, so as to achieve the effect of gradual transition of the picture, such as the following effect, does it feel more natural for the little sister to change from pure wind to high cold wind?

The younger sister's style has changed. Gif

The way to achieve this is to use Stack to stack two images together, and then change the transparency of the two images in the opposite direction. The code is as follows:

Class _ SwtichImageDemoState extends State {var opacity1 = 1.0; var opacity2 = 0.0 Override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text), brightness: Brightness.dark, backgroundColor: Colors.black,), backgroundColor: Colors.black, body: Center (child: Stack (alignment: Alignment.center, children: [AnimatedOpacity (duration: Duration (milliseconds: 5000)) Opacity: opacity1, child: ClipOval (child: Image.asset ('images/beauty.jpeg', width: 300, height: 300,), curve: Curves.ease,) AnimatedOpacity (duration: Duration (milliseconds: 5000), opacity: opacity2, child: ClipOval (child: Image.asset ('images/beauty2.jpeg', width: 300, height: 300,),) Curve: Curves.ease,),],), floatingActionButton: FloatingActionButton (child: Text ('change', style: TextStyle (color: Colors.white,), textAlign: TextAlign.center,) OnPressed: () {setState (() {opacity1 = 0.0) Opacity2 = 1.0;});},),}} above is all the content of the article "how to use AnimatedOpacity in Flutter to realize picture gradual animation". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.