Flutter使用BorderRadiusTween实现由矩形变成圆形的动画

sun_weitao2025-01-12 17:23

BorderRadiusTween 是插值动画中，用于组件边框半径的类，专门作用于组件边框和半径动化过度。

这个类继承自Tween，用法相似。

下面是示例写法

复制代码

class BorderRadiusTweenPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _BorderRadiusTweenPageState();
  }
}

class _BorderRadiusTweenPageState extends State<BorderRadiusTweenPage>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation _animation;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(seconds: 2))
          ..repeat(reverse: true);
    _animation = BorderRadiusTween(
            begin: BorderRadius.circular(0), end: BorderRadius.circular(100))
        .animate(_animationController)
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          _animationController.reverse();
        } else if (status == AnimationStatus.dismissed) {
          _animationController.forward();
        }
      });
    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(Object context) {
    return Center(
      child: AnimatedBuilder(
          animation: _animation,
          builder: (context, child) {
            return Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                  color: Colors.amber, borderRadius: _animation.value),
            );
          }),
    );
  }
}

与其他构造动画时候的套路是一致的，首先需要AnimateController和Animation这两个类。

在Tween的begin和end中，参数需要指定BorderRadius.circular 用于指定矩形圆角的过渡。

在下方build方法中的BoxDecoration类是用于修饰Container类，用于指定边框，圆角，阴影等等。