The animation effect of “peacock opens the screen” by flutter

Time:2021-3-8

The animation effect of

Lao Meng‘s Guide: today we share an animation effect similar to “peacock opens the screen”. When opening a new page, the new page will gradually open from the top right corner of the screen to the full screen.

Let’s look at the specific effect first

The animation effect of

I don’t know the name of this effect? If you have a more suitable name, please let me know in the comments. Here’s how to achieve this effect.

When using navigator to enter a new page, the usual usage is as follows:

Navigator.of(context).push(MaterialPageRoute(
  builder: (context){
    return PageB();
  }
));

MaterialPageRouteIt includes the animation effect when switching pages. On IOS, the effect is sliding left and right. On Android, the effect is sliding up and down. If you want to customize the switching effect, how can you achieve it? The answer is to usePageRouteBuilderThe usage is as follows:

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
    (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
  ...
}));

staypageBuilderFunctionanimationReturn to the animation effect of the new page.

New page tocircularThe effect turns on gradually. Notice that there is no zoom effect, so the new page is openedDownsizingYes, the new page takes the upper right corner as the center of the circle, and the radius gradually becomes larger for cutting, which is the effect we want.

Through the above analysis, using theClipPathCut the new page

Navigator.of(context).push(PageRouteBuilder(pageBuilder:
    (BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
  return AnimatedBuilder(
    animation: animation,
    builder: (context, child) {
      return ClipPath(
        clipper: CirclePath(animation.value),
        child: child,
      );
    },
    child: PageB(),
  );
}));

The point isCirclePathThis is the cutting path,

class CirclePath extends CustomClipper<Path> {
  CirclePath(this.value);

  final double value;

  @override
  Path getClip(Size size) {
    var path = Path();
    double radius =
        value * sqrt(size.height * size.height + size.width * size.width);
    path.addOval(Rect.fromLTRB(
        size.width - radius, -radius, size.width + radius, radius));
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }
}

becausePathThere is no API function to add circles directly, so useellipseMethod, just add theellipseIf you set the rectangular area as a square, you will get a circle.

The maximum radius is not the width or height of the screen, but the diagonal length of the screen.

Since it starts from the top right corner, and the rectangular area to be cut must be square, the rectangular area to be cut is beyond the page area.

If many pages use this effect, you can encapsulate it, similar toMaterialPageRouteThe package is as follows:

class CirclePageRoute extends PageRoute {
  CirclePageRoute({
    @required this.builder,
    this.transitionDuration = const Duration(milliseconds: 500),
    this.opaque = true,
    this.barrierDismissible = false,
    this.barrierColor,
    this.barrierLabel,
    this.maintainState = true,
  });

  final WidgetBuilder builder;

  @override
  final Duration transitionDuration;

  @override
  final bool opaque;

  @override
  final bool barrierDismissible;

  @override
  final Color barrierColor;

  @override
  final String barrierLabel;

  @override
  final bool maintainState;

  @override
  Widget buildPage(BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return AnimatedBuilder(
      animation: animation,
      builder: (context, child) {
        return ClipPath(
          clipper: CirclePath(animation.value),
          child: child,
        );
      },
      child: builder(context),
    );
  }
}

use

Navigator.of(context).push(CirclePageRoute(builder: (context) {
  return PageB();
}));

If you look at itCupertinoPageRouteMaterialPageRoutePageRouteBuilderSource code, you will find that these three are inherited fromPageRouteSo, unconsciously, we learned to customize the routing.

communication

Old Meng flutter blog address (nearly 200 controls usage)http://laomengit.com

Welcome to Flutter exchange group (WeChat: laomengit) and official account [Lao Meng Flutter]:

The animation effect of The animation effect of