This is the 19th day of my participation in the More text Challenge. For details, see more text Challenge

Fluro transition animation source code before using a custom transition animation, first grab a fluro source code, through the source code can be found such a standard transition method:

RouteTransitionsBuilder _standardTransitionsBuilder(
      TransitionType? transitionType) {
    return (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation, Widget child) {
      if (transitionType == TransitionType.fadeIn) {
        return FadeTransition(opacity: animation, child: child);
      } else {
        const Offset topLeft = const Offset(0.0.0.0);
        const Offset topRight = const Offset(1.0.0.0);
        const Offset bottomLeft = const Offset(0.0.1.0);

        Offset startOffset = bottomLeft;
        Offset endOffset = topLeft;
        if (transitionType == TransitionType.inFromLeft) {
          startOffset = const Offset(1.0.0.0);
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromRight) {
          startOffset = topRight;
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromBottom) {
          startOffset = bottomLeft;
          endOffset = topLeft;
        } else if (transitionType == TransitionType.inFromTop) {
          startOffset = Offset(0.0.1.0);
          endOffset = topLeft;
        }

        returnSlideTransition( position: Tween<Offset>( begin: startOffset, end: endOffset, ).animate(animation), child: child, ); }}; }Copy the code

The TransitionType. FadeIn uses the FadeTransition that comes with Flutter and changes the transparency to complete the animation. The rest of the left slide, right slide, slide and up slide from the initial offset position to the end position, using the SlideTransition. In addition to the FadeTransition and SlideTransition mentioned above, Flutter has the following common transitions:

  • RotationTransition: rotation
  • ScaleTransition: Zoom transitions

In this case, we can follow suit and create a custom transition using the rest of the system’s transitions.

Rotate the animation

Let’s first look at the RotationTransition. The constructor for RotationTransition is defined as follows:

const RotationTransition({
    Key? key,
    required Animation<double> turns,
    this.alignment = Alignment.center,
    this.child,
  })  : assert(turns ! =null),
        super(key: key, listenable: turns);

Copy the code

Where turns is the animation control, indicating the number of radians of rotation, equal to the animation control value times 2 PI. Alignment Indicates the center of the rotation. The default is center. The radian of rotation should not be too large, otherwise the animation will be too fast, which will lead to a bad look. After verification, the recommended starting value is between 0.2 and 0.3, and the end value is 0, which means to return to the normal position. If the starting value is negative, it is clockwise; If regular is counterclockwise, the example code is as follows:

// Rotate counterclockwise around the center
RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      turns: Tween<double>(
        begin: 0.25,
        end: 0.0, ).animate(animation), child: child, ); });/ /...
// Rotate clockwise around the lower left corner
RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return RotationTransition(
      alignment: Alignment.bottomLeft,
      turns: Tween<double>(
        begin: 0.25,
        end: 0.0, ).animate(animation), child: child, ); });Copy the code

Tween is the system’s own linear interpolation method.

Zoom in and out

Zoom transitions are common in image previews, usually from a smaller scale to a 1:1 scale. It is used in a similar way to a rotating field. The example code is as follows:

RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return ScaleTransition(
      scale: Tween<double>(
        begin: 0.5,
        end: 1.0, ).animate(animation), child: child, ); });Copy the code

Custom transitions

By reading the source code, we can find that RotationTransition and ScaleTransition are inherited from AnimatedWidget. Therefore, we can write a custom Transition inherited from AnimatedWidget. Just return a Transform object in the build method. This way you can create custom transitions. For example, we can use the Skew method of Matrix4 to transform the X and y axes to get a card-like effect. It is also possible to deform only on the X or Y axis (skewX and skewY methods). Here we define a transition animation by simultaneously morphing the x and y axes:

class SkewTransition extends AnimatedWidget {
  const SkewTransition({
    Key key,
    Animation<double> turns,
    this.alignment = Alignment.center,
    this.child,
  })  : assert(turns ! =null),
        super(key: key, listenable: turns);

  Animation<double> get turns => listenable as Animation<double>;

  final Alignment alignment;

  final Widget child;

  @override
  Widget build(BuildContext context) {
    final double turnsValue = turns.value;
    final Matrix4 transform =
        Matrix4.skew(turnsValue * pi * 2.0, turnsValue * pi * 2.0);
    returnTransform( transform: transform, alignment: alignment, child: child, ); }}Copy the code

It is used in a similar way to RotationTransition:

RouterManager.router.navigateTo(
  context,
  RouterManager.transitionPath,
  transition: TransitionType.custom,
  transitionBuilder:
      (context, animation, secondaryAnimation, child) {
    return SkewTransition(
      turns: Tween<double>(
        begin: 0.05,
        end: 0.0, ).animate(animation), child: child, ); });Copy the code

It is also possible to try different animation transitions using rotation around the X axis, rotation around the Y axis, and alignment changes. If you need more complex animation effects, you can study the implementation of animation, which will be introduced in the following chapters.

Running effect

The running effect is shown in the figure below:

conclusion

This section describes how fluro navigates to other pages with a custom transition animation implementation. Flutter itself provides a number of predefined transitions that can be designed using the transitionBuilder parameters. You can also use custom AnimatedWidgets to create personalized transitions.