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

This article mainly introduces the relevant knowledge of "how to achieve grinning dynamic expressions in Flutter". The editor shows you the operation process through actual cases, the operation method is simple and fast, and it is practical. I hope this article "how to achieve smiling dynamic expressions in Flutter" can help you solve the problem.

The effect is shown in the following figure

AnimatedContainer introduction

Before implementing, let's introduce a new component-- AnimatedContainer. If you look at this name, you can see that it has something to do with Container. In fact, AnimatedContainer is an animation container in Flutter. Container has basically all its properties. Let's take a look at the difference between the construction methods of the two.

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,}); Container ({Key? Key, this.alignment, this.padding, this.color, this.decoration, this.foregroundDecoration, double? Width, double? Height, BoxConstraints? Constraints, this.margin, this.transform, this.transformAlignment, this.child, this.clipBehavior = Clip.none,})

As you can see, there are actually only three attributes missing between AnimatedContainer and Container, and these three attributes are the parameters that control the animation:

Curve: animation curve, default is linear

Duration: dynamic effect duration parameter

OnEnd: callback method after the end of the dynamic effect.

The characteristic of AnimatedContainer is that all properties related to appearance generate a transition dynamic effect, and when these appearance properties change, they will use the generated dynamic effect to complete the transition, thus showing the animation effect. The grinning expression that we want to achieve is actually realized by using AnimatedContainer.

Component structure

Our smiling dynamic effect, at the bottom is a round head, with two eyes and a mouth, in which the eyes and mouth have a moving effect, and the eyes have a directional effect. These dynamic effects can be achieved using AnimatedContainer. The large page structure is as follows:

Detail implementation

It's easy to cut the head directly with the prototype and set the size and background color:

/ / head ClipOval (child: Container (width: 120, height: 120, color: Colors.blue,))

The left eye is a little different from the right eye, the eyeball is actually AnimatedContainer cut into a circle using borderRadius, and the eyeball is a sub-component of AnimatedContainer-a black circle. The specific implementation of looking to the left or right is controlled by a variable seeLeft, and the effect of the transition from left to right is controlled by AnimatedContainer.

SeeLeft = true, look to the left: the way of eye alignment is bottomLeft, the left eye moves down slightly in the longitudinal direction; the right eye moves a certain position to the left, so it will have the effect of looking left.

SeeLeft = false, look to the right: the way the eyeball is aligned is bottomRight, the right eye moves down slightly in the longitudinal direction; the left eye moves a certain position to the right, so it will have the effect of looking right.

The implementation code is as follows:

/ / Positioned (top: marginTop, left: marginLR, child: AnimatedContainer (alignment: seeLeft? Alignment.bottomLeft: Alignment.bottomRight, padding: EdgeInsets.all (eyePadding), transform: Matrix4.identity ().. translate (seeLeft? 0: sideOffset, seeLeft? EyeOffset: 0.0,0), duration: Duration (seconds: 1), curve: Curves.fastOutSlowIn, width: eyeSize, height: eyeSize, decoration: BoxDecoration (color: Colors.white, borderRadius: BorderRadius.circular (eyeSize / 2), child: ClipOval (child: Container (color: Colors.black, width: eyeBallSize, height: eyeBallSize,) / / Positioned (top: marginTop, right: marginLR, child: AnimatedContainer (alignment: seeLeft? Alignment.bottomLeft: Alignment.bottomRight, padding: EdgeInsets.all (eyePadding), transform: Matrix4.identity ().. translate (seeLeft?-sideOffset: 0, seeLeft? 0: eyeOffset, 0), duration: Duration (seconds: 1), curve: Curves.fastOutSlowIn, width: eyeSize, height: eyeSize, decoration: BoxDecoration (color: Colors.white, borderRadius: BorderRadius.circular (eyeSize / 2),) Child: ClipOval (child: Container (color: Colors.black, width: eyeBallSize, height: eyeBallSize,),)

The eyeball alignment here uses the alignment parameter control of AnimatedContainer, and the position of the eyeball is realized by the translation of Matrix4:

Matrix4.identity ().. translate (seeLeft?-sideOffset: 0, seeLeft? 0: eyeOffset, 0)

The implementation of smiley face uses ClipPath to draw two arcs, and then the range of translation is the same as that of the eyeball, and you can feel that it is the effect of turning head. The code of AnimatedContainer is as follows:

/ / smiling mouth Positioned (bottom: 10, height: 40, left: 0, child: AnimatedContainer (alignment: seeLeft? Alignment.bottomLeft: Alignment.bottomRight, padding: EdgeInsets.all, transform: Matrix4.identity ().. translate (seeLeft? 25.0: 35.0,0,0), duration: Duration (seconds: 1), curve: Curves.fastOutSlowIn, child: ClipPath (clipper: SmileClipPath (), child: Container (width: 60, height: 40, color: Colors.yellow,),) ),

The tailoring class SmileClipPath code for the grinning mouth is as follows:

Class SmileClipPath extends CustomClipper {@ override Path getClip (Size size) {return Path ().. moveto (0,0).. arcToPoint (Offset (size.width, 0), radius: Radius.circular (size.width * 0.55), clockwise: false,).. arcToPoint (Offset (0,0), radius: Radius.circular (size.width), clockwise: true,) } @ override bool shouldReclip (covariant CustomClipper oldClipper) {return false;}}

Finally, the change in the state variable seeLeft is triggered by the click of a button.

FloatingActionButton: FloatingActionButton (child: Icon (Icons.play_arrow, color: Colors.white), onPressed: () {setState (() {seeLeft =! seeLeft;});},)

The final running effect is as follows, and the complete code has been submitted to: animation related code.

This is the end of the content about "how to achieve grinning dynamic expressions in Flutter". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.