Come on, slide to the next little sister

Preface

Let's start by introducing the animation components of the transformation class , In fact, this kind of conversion animation component can also be used by itself  

AnimatedBuilder

  or  

AnimatedWidget

  complete , Flutter  To simplify development , Provides many conversion animation components , Such components are usually named  xxTransition. What this article wants to introduce is  

SlideTransition

, seeing the name of a thing one thinks of its function , I knew it was a sliding conversion animation . In this article, we will realize the sliding switching of two little sister pictures , The effect is shown below .

SlideTransition  Introduce

SlideTransition

  It's actually  

AnimatedWidget

  Subclass , Its construction method is defined as follows ：

const SlideTransition({
 Key? key,
 required Animation<Offset> position,
 this.transformHitTests = true,
 this.textDirection,
 this.child,
})


among  

position

  Is the key parameter , He represents an animation of a position offset , In fact, the sliding animation effect is completed by modifying the position offset of sub components . In retrospect, we  AnimatedWidget  Introduction to the use of ：

Flutter  Build 3D space animation effect

. As long as we pass a  

AnimationController

  control  

Animation

  Object can realize the control of animation . Use  

SlideTransition

  Is the same . We want to implement component sliding , Use it  

AnimationController

  Control one  

Animation<Offset>

  Objects will do . Here we need to pay attention to ,position  The set position is a proportional parameter , That is, the position is the size of the sub assembly multiplied by  

Offset

  The value of the object .

new_x = width * dx;
new_y = height * dy;


For example, we want the component to slide in from the left , Then you can set  

dx

  negative ; And if you want to slide in from the right , Then you can set  

dx

  Positive value . Empathy , The same is true if you want to slide up or down , It's just adjustment  

dy

  The value of . And by  

dx

  and  

dy

  The combination of , The effect of sliding in and out in the direction of slash can be realized .

The example effect is

In fact, we are using a  Stack  Components , Take two pictures as two  

SlideTransition

  The sub components of are stacked together . Set the initial horizontal position of the picture that does not appear outside the left display area . When starting the animation , The horizontal position of the previously displayed picture is adjusted outside the right display area , So as to achieve the effect of sliding out on the right ; The horizontal position of the picture originally outside the left display area is adjusted to 0, Make it occupy the position of the previous picture , So as to achieve the effect of sliding in on the left . When the button is clicked , It's control  

AnimationController

  Of

forward

Method driven animation , Then click again to call  

reverse

  The method can be restored . The code is as follows ：

class SlideTransitionDemo extends StatefulWidget {
 SlideTransitionDemo({Key? key}) : 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);

 // Use custom curves to animate transition effects
 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  

SlideTransition

  Conversion animation class and its application . adopt  

SlideTransition

  We can also achieve many other animation effects , For example, picture browsing 、 Sliding card, etc .