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

相关推荐
Cao_Shixin攻城狮3 小时前
Flutter运行Android项目时显示java版本不兼容(Unsupported class file major version 65)的处理
android·java·flutter
人生游戏牛马NPC1号10 小时前
学习 Flutter (四):玩安卓项目实战 - 中
android·学习·flutter
YueYaTech14 小时前
【Flutter 必备插件】屏幕适配方案 flutter_screenutil
flutter
耳東陈15 小时前
【重磅发布】Flutter 生态首个可商用 K线图表库flutter_chen_kchart
flutter
程序员老刘15 小时前
AI智能体正在颠覆App开发,不转型就淘汰
flutter·客户端·mcp
worxfr17 小时前
Flutter 入门指南:从基础到实战
flutter
yuanlaile17 小时前
Flutter Android打包学习指南
android·flutter·flutter打包·flutter android
0wioiw018 小时前
Flutter基础(前端教程①①-底部导航栏)
flutter
sunly_1 天前
Flutter:上传图片,选择相机或相册:wechat_assets_picker
数码相机·flutter·微信
_Shirley1 天前
安卓开发使用Android Studio配置flutter环境
android·flutter·android studio