preface
Let's start by introducing the animation components that realize the source code conversion of marriage and dating. In fact, this kind of conversion animation components can also be completed by AnimatedBuilder or AnimatedWidget. In order to simplify development, fluent provides many conversion animation components, which are usually named xxTransition. This article is about SlideTransition. As the name suggests, it is known as slide conversion animation. We use this article to realize the sliding switching of the source pictures of marriage and dating.
SlideTransition introduction
SlideTransition is actually a subclass of AnimatedWidget. Its construction method is defined as follows:
const SlideTransition({ Key? key, required Animation<Offset> position, this.transformHitTests = true, this.textDirection, this.child, })
Position is the key parameter. It represents an Animation of position Offset. In fact, the source code of marriage and dating completes the sliding Animation effect by modifying the position Offset of sub components. As long as we control the Animation object through an Animation controller, we can realize the control of Animation. The same is true when using SlideTransition. If we want to realize component sliding, we can use the Animation controller to control an Animation < Offset > object. It should be noted here that the position set by position is a scale parameter, that is, the position is the size of the sub component multiplied by the value of the Offset object.
new_x = width * dx; new_y = height * dy; Copy code
For example, if we want the component to slide in from the left, we can set dx to a negative value; If you want to slide in from the right, you can set dx to a positive value. Similarly, if you want to slide up or down, just adjust the value of dy. Through the combination of dx and Dy, you can achieve the sliding in and out effect in the slash direction of the source code of marriage and dating.
Example effect implementation
In fact, we use a Stack component to Stack two pictures as sub components of two SlideTransition. Set the initial horizontal position of the picture that does not appear outside the left display area. When the animation is started, the horizontal position of the previously displayed picture is adjusted outside the right display area, so as to achieve the right slide out effect; The horizontal position of the picture originally outside the left display area is adjusted to 0 to occupy the position of the previous picture, so as to achieve the effect of sliding in on the left. When you click the button, you control the forward method of the AnimationController to drive the animation, and then click again. At that time, you can call the reverse method to restore. The code is as follows:
class SlideTransitionDemo extends StatefulWidget { SlideTransitionDemo() : super(key: key); @override _SlideTransitionDemoState createState() => _SlideTransitionDemoState(); } class _SlideTransitionDemoState extends State<SlideTransitionDemo> with SingleTickerProviderStateMixin { bool _forward = true; final begin = Offset.zero; // The end position of the first picture moves out of the right screen final end1 = Offset(1.1, 0.0); // The initial position of the second picture is on the left screen final begin2 = Offset(-1.1, 0.0); late Tween<Offset> tween1 = Tween(begin: begin, end: end1); late Tween<Offset> tween2 = Tween(begin: begin2, end: begin); late AnimationController _controller = AnimationController(duration: const Duration(seconds: 1), vsync: this); //Animate transition effects using custom curves late Animation<Offset> _animation1 = tween1.animate( CurvedAnimation( parent: _controller, curve: Curves.easeInOut, ), ); late Animation<Offset> _animation2 = tween2.animate(CurvedAnimation( parent: _controller, curve: Curves.easeInOut, )); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('SlideTransition'), brightness: Brightness.dark, backgroundColor: Colors.black, ), backgroundColor: Colors.black, body: Center( child: Container( padding: EdgeInsets.all(10.0), child: Stack( children: [ SlideTransition( child: ClipOval( child: Image.asset('images/beauty.jpeg'), ), position: _animation1, ), SlideTransition( child: ClipOval( child: Image.asset('images/beauty2.jpeg'), ), position: _animation2, ), ], ), ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.swap_horizontal_circle_sharp), onPressed: () { setState(() { if (_forward) { _controller.forward(); } else { _controller.reverse(); } _forward = !_forward; }); }, ), ); } }
summary
This article introduces the SlideTransition conversion animation class and its application. Through SlideTransition, we can also realize the source code of marriage and dating and many other animation effects, such as picture browsing, sliding cards, etc.
Statement: This article is forwarded by cloudleopard technology from the code farmer blog on the island. If there is any infringement, please contact the author to delete it