Shulou(Shulou.com)06/01 Report--

This article mainly explains "Android Flutter how to achieve 3D animation effect", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn "Android Flutter how to achieve 3D animation effect" bar!

Introduction to AnimatedWidget

AnimatedWidget is an abstract StatefulWidget, which is constructed as follows.

Const AnimatedWidget ({Key? Key, required this.listenable,}): assert (listenable! = null), super (key: key)

The main thing is to receive a listenable parameter, which is usually an Animation object. In the _ AnimatedState class inside AnimatedWidget, the object change listening callback is added to refresh the interface.

Class _ AnimatedState extends State {@ override void initState () {super.initState (); widget.listenable.addListener (_ handleChange);} @ override void didUpdateWidget (AnimatedWidget oldWidget) {super.didUpdateWidget (oldWidget); if (widget.listenable! = oldWidget.listenable) {oldWidget.listenable.removeListener (_ handleChange); widget.listenable.addListener (_ handleChange);} @ override void dispose () {widget.listenable.removeListener (_ handleChange); super.dispose () } void _ handleChange () {setState (() {/ / The listenable's state is our build state, and it changed already. });} / /.}

As you can see, we just need to pass the Animation object to the AnimatedWidget object, so we don't have to write our own addListener and so on. The whole animation can be controlled by other external objects, so as to realize the reuse of animation components.

Realization of 3D rotation Animation

The implementation of 3D rotation is relatively simple. There are two parameter control transformations (transform) in the Container component, which are:

Transform:Matrix4 object, which can achieve rotation, translation, deformation and other effects around the X, Y, Z axes. About Matrix4 involves a lot of matrix operations and linear algebra knowledge, you can refer to the source code of Matrix4 to review the university's mathematical knowledge.

TransformAlignment: the alignment of the transformation can be understood as the starting position, which can be set using the Alignment object.

With this basis, we can define 3D rotational dynamic effects, and we define a general component, ThreeDAnimatedWidget:

Class ThreeDAnimatedWidget extends AnimatedWidget {final Widget child; const ThreeDAnimatedWidget ({Key? Key, required Animation animation, required this.child}): super (key: key, listenable: animation); @ override Widget build (BuildContext context) {final animation = listenable as Animation; return Center (child: Container (transform: Matrix4.identity ().. rotateY (2 * pi * animation.value).. setEntry (1,0,0.01), transformAlignment: Alignment.center, child: child,)) }}

What we set here is to rotate around the Y axis around the center point, and set a certain tilt angle using setEntry (which will be more three-dimensional). In fact, we can also set the rotation around the X axis or Z axis. Next is the application of this animation component. We build a text with shadow (which looks like a three-dimensional character) as a sub-component of this animation. The other controls are similar to those in the previous article. The complete code is as follows:

Class AnimatedWidgetDemo extends StatefulWidget {const AnimatedWidgetDemo ({Key? Key}): super (key: key); @ override _ AnimatedWidgetDemoState createState () = > _ AnimatedWidgetDemoState ();} class _ AnimatedWidgetDemoState extends State with SingleTickerProviderStateMixin {late Animation animation; late AnimationController controller; @ override void initState () {super.initState (); controller = AnimationController (duration: const Duration (seconds: 3), vsync: this); animation = Tween (begin: 0.0, end: 1.0) .animate (controller) } @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: Text ('AnimatedWidget Animation'),), body: ThreeDAnimatedWidget (animation: animation, child: Text ('Island programmer', style: TextStyle (fontSize: 42.0, color: Colors.blue, fontWeight: FontWeight.bold Shadows: [Shadow (blurRadius: 2, offset: Offset (2.0,1.0), color: Colors.blue [900]!),], floatingActionButton: FloatingActionButton (child: Icon (Icons.play_arrow, color: Colors.white) OnPressed: () {if (controller.status = = AnimationStatus.completed) {controller.reverse () } else {controller.forward ();},),); @ override void dispose () {controller.dispose (); super.dispose ();}}

As you can see, the ThreeDAnimatedWidget can be reused, and in scenarios where such dynamic effects are needed, just pass it Animation objects and subcomponents in the above way. For example, we change the text to a picture.

/ /... body: ThreeDAnimatedWidget (animation: animation, child: Image.asset ('images/avatar.jpg', width: 100, height: 100,), / /.

Thank you for your reading, the above is the content of "how to achieve 3D animation effects in Android Flutter". After the study of this article, I believe you have a deeper understanding of how to achieve 3D animation effects in Android Flutter, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.