Flutter 中的圆形显示动画相当于什么？答案

【问题标题】：What is the equivalent of a circular reveal animation in Flutter?Flutter 中的圆形显示动画相当于什么？
【发布时间】：2018-10-18 00:06:09
【问题描述】：

我想知道如何从 Android 到 Flutter 中实现循环显示动画。还有关于 Flutter 动画示例的资源吗？

【问题讨论】：

标签： android dart flutter

【解决方案1】：

对于显示效果，您必须使用 CustomPainter 类。

class RevealProgressButtonPainter extends CustomPainter {
  double _fraction = 0.0;
  Size _screenSize;

  RevealProgressButtonPainter(this._fraction, this._screenSize);

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..color = Colors.green
      ..style = PaintingStyle.fill;

    var finalRadius =
        sqrt(pow(_screenSize.width / 2, 2) + pow(_screenSize.height / 2, 2));
    var radius = 24.0 + finalRadius * _fraction;

    canvas.drawCircle(Offset(size.width / 2, size.height / 2), radius, paint);
  }

  @override
  bool shouldRepaint(RevealProgressButtonPainter oldDelegate) {
    return oldDelegate._fraction != _fraction;
  }
}

您可以阅读此awesome tutorial for Circular reveal effect. 了解详细信息。

Github Code

在进行显示效果时，您必须顺利打开第二个屏幕。为此，使用Fluro 库进行路由和导航。这将为您提供转换类型。

router.navigateTo(context, "/profile_screen",transition: TransitionType.fadeIn,);

【讨论】：