Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

preface

Let’s start by introducing the animation component of the transform class, which can actually pass by itselfAnimatedBuilder 或 AnimatedWidgetFlutter provides a number of transition animation components, usually named xxTransition, to simplify Flutter development. This is what we are going to introduceSlideTransitionAs the name implies, it is known as sliding conversion animation. In this paper, we will realize the sliding switch of two little sister pictures, as shown below.

SlideTransition introduction

SlideTransition is actually a subclass of AnimatedWidget, and its constructor is defined as follows:

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

Position is the key parameter, which represents a position offset animation. In fact, the sliding animation effect is accomplished by modifying the position offset of the child component. Review our introduction to the use of the AnimatedWidget: Introduction to Flutter and Practice (94) : Make your components have 3d dynamic effects. We can control the Animation as long as we control the Animation object through an AnimationController. Same thing with SlideTransition. To implement component sliding, we use the AnimationController to control an Animation

object. It is important to note that the position set by position is a scaling parameter, i.e. the position is the size of the child component multiplied by the value of the Offset object.

new_x = width * dx;
new_y = height * dy;
Copy the 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. Same thing if you want to slide up or slide down, you just adjust the dy. By combining dx and dy, you can slide in and out of the diagonal direction.

Example effect implementation

We actually use a Stack component, stacking two images on top of each other as children of two Slidetransitions. The original horizontal position of the missing image is set outside the display area on the left. When the animation is started, the horizontal position of the previously displayed picture is adjusted to the right display area, so as to achieve the right slide out effect; The horizontal position of the image that was originally outside the left display area is adjusted to 0 to occupy the position of the previous image, thus achieving the effect of sliding in on the left. When the button is clicked, the forward method that controls the AnimationController drives the animation, and then clicked again to call the Reverse method to restore it. 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 image is moved out of the right screen
  final end1 = Offset(1.1.0.0);
  // The initial position of the second image 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 curve animation transitions
  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; }); },),); }}Copy the code

conclusion

This article introduces the SlideTransition animation class and its application. There are a lot of other animations you can do with SlideTransition, like browsing images, sliding cards, etc.

I am dao Code Farmer with the same name as my wechat official account. This is a column about the introduction and practice of Flutter, providing systematic learning articles about Flutter. See the corresponding source code here: The source code of Flutter Introduction and Practical column. If you have any questions, please add me to the wechat account: island-coder. If you feel you have something to gain, please give three pairs of love as follows:

👍🏻 : a praise to encourage!

🌟 : Collect articles, easy to look back!

💬 : Comment exchange, mutual progress!