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

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类,用于指定边框,圆角,阴影等等。

相关推荐
新镜7 分钟前
【Flutter】drag_select_grid_view: ^0.6.2 使用
flutter
程序员老刘19 分钟前
Google突然“变脸“,2026年要给全球开发者上“紧箍咒“?
android·flutter·客户端
鹏多多.5 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
新镜20 小时前
【Flutter】RefreshIndicator 无法下拉刷新问题
flutter
星秋Eliot20 小时前
Flutter的三棵树
前端·flutter
humiaor1 天前
Flutter之riverpod状态管理Widget UI详解
flutter·consumer·widget·hooks·provider·riverpod·hookwidget
农夫三拳_有点甜1 天前
Flutter Stack 组件总结
flutter
MaoJiu1 天前
Flutter混合开发:在iOS工程中嵌入Flutter Module
flutter·ios
新镜1 天前
【Flutter】flutter_local_notifications并发下载任务通知实践
flutter
农夫三拳_有点甜1 天前
Flutter SafeArea 组件总结
flutter