Animate offsets of Flutter routes

The route animation file of flutter is page-route-animation

PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(0.0.1.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      returnSlideTransition( position: animation.drive(tween), child: child, ); },)Copy the code

For animation, I learned two points:

1. What is the value of Flutter offset? What are the values of 1, 0 and 1 respectively? I have sorted them out, as shown in the figure:

1. When the page is displayed on the screen, dx dy of Offset are all 0; 2. If you want the animation page to pop up from the bottom of the screen, it should be dy=1 to dy=0; 3. If you want the animation page to be pushed to the screen from the right, it should be dx=1 to dx=0; 4. If you want the animation page to pop up from the top of the screen, it should be dy=0 to dy=-1 5. Other similarCopy the code

I suggest you use the case operation in the document to experiment, deepen the impression. Learning this, there will be no mess when writing animations.

2. What is secondaryAnimation for?

Anyone who has written android knows that there is an entry and exit animation, overridexxxx, so how does the flutter get rid of only by this code above, giving a child, which is very strange. Then I realized secondaryAnimation isn’t working yet. What is it? Some documentation to flip through: buildTransitions

See how to use it:

transitionsBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
  ) {
    return SlideTransition(
      position: AlignmentTween(
        begin: const Offset(0.0.1.0),
        end: Offset.zero,
      ).animate(animation),
      child: SlideTransition(
        position: TweenOffset(
          begin: Offset.zero,
          end: const Offset(0.0.1.0),
        ).animate(secondaryAnimation),
        child: child,
      ),
    );
  }
Copy the code

I was surprised to see it just now. How is this operation? How does this work when all entries and exits are tied to a child? At first I wondered if the source code would be used to fetch the child’s child. After reading the source code, I think the design is really clever!!

Dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart: Animation.dart

kAlwaysCompleteAnimation // The animation is stopped at the end

kAlwaysDismissedAnimation // The animation is stopped at the beginning

The two animation constants are used to switch between one animation at a time.

Then I printed the corresponding callback using the following animation (an animation where the new page slides in from the right screen and the old page slides out from the left screen) :

SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(1.0.0.0),
        end: Offset.zero,
      ).animate(animation),
      child: SlideTransition(
        position: Tween<Offset>(
          begin: Offset.zero,
          end: const Offset(1.0.0.0),
        ).animate(secondAnimation),
        child: child,
      ),
    )
Copy the code

The resulting log, after simplification:

Animation #1c77c:

The first parameter is animated from 0-1, the second parameter is left unchanged in the start state (offset.zero), that is, the interface slides in from the right by changing the position of the first widge, and the second widget is always visible.

If we look at fc1fe animation, we find that the first widge stays in the end state, i.e. offset. zero (on-screen), and the second animation runs from 0-1, i.e. offset.dx from 0- > -1, i.e. the page slides out from the screen to the left.

From the above, we can draw the conclusion that the animation parameter value is used to make entry animation for the new push page, while secondaryAnimation is used to make original animation for the previous page. Flexibly use the change value of the two animations to realize animation, and only one child is required for the parameter. I also learned a new idea from it, and I suggest you test it out.