android - 什么相当于 Flutter 中的圆形显示动画？

Question

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

Answer 1

对于 Reveal Effect，您必须使用 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

在做reveal effect 的时候要顺利打开副屏。为此用途 Fluro用于路由和导航的库。这将为您提供过渡类型。

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