当前位置: 首页 > news >正文

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

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

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

下面是示例写法

class BorderRadiusTweenPage extends StatefulWidget {@overrideState<StatefulWidget> createState() {return _BorderRadiusTweenPageState();}
}class _BorderRadiusTweenPageState extends State<BorderRadiusTweenPage>with SingleTickerProviderStateMixin {late AnimationController _animationController;late Animation _animation;@overridevoid initState() {// TODO: implement initStatesuper.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();}@overridevoid dispose() {_animationController.dispose();// TODO: implement disposesuper.dispose();}@overrideWidget 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类,用于指定边框,圆角,阴影等等。

http://www.lryc.cn/news/520120.html

相关文章:

  • VSCode 中的 launch.json 配置使用
  • 深度学习张量的秩、轴和形状
  • Redis有哪些常用应用场景?
  • vue3+ts+element-plus 输入框el-input设置背景颜色
  • Ubuntu 磁盘修复
  • 使用RSyslog将Nginx Access Log写入Kafka
  • 通过Apache、Nginx限制直接访问public下的静态文件
  • uniapp小程序中隐藏顶部导航栏和指定某页面去掉顶部导航栏小程序
  • Agile Scrum 敏捷开发方法
  • 【算法与数据结构】—— 回文问题
  • 用vscode写latex-1
  • 爬虫基础之爬取歌曲宝歌曲批量下载
  • GitLab CI/CD使用runner实现自动化部署前端Vue2 后端.Net 7 Zr.Admin项目
  • web前端第五次作业---制作菜单
  • 软件系统安全逆向分析-混淆对抗
  • HAMi + prometheus-k8s + grafana实现vgpu虚拟化监控
  • Java基于SSM框架的在线视频教育系统小程序【附源码、文档】
  • mysql本地安装和pycharm链接数据库操作
  • Unity编程与游戏开发-编程与游戏开发的关系
  • 2025年第三届“华数杯”国际赛A题解题思路与代码(Python版)
  • 针对服务器磁盘爆满,MySql数据库始终无法启动,怎么解决
  • [Android]service命令的使用
  • 【芯片封测学习专栏 -- Substrate | RDL Interposer | Si Interposer | 嵌入式硅桥(EMIB)详细介绍】
  • spring cloud注册nacos并从nacos上拉取配置文件,spring cloud不会自动读取bootstrap.yml文件
  • 【深度学习地学应用|滑坡制图、变化检测、多目标域适应、感知学习、深度学习】跨域大尺度遥感影像滑坡制图方法:基于原型引导的领域感知渐进表示学习(一)
  • Spring Boot 支持哪些日志框架
  • 【翻译】2025年华数杯国际赛数学建模题目+翻译pdf自取
  • qt 窗口(window/widget)绘制/渲染顺序 QPainter QPaintDevice Qpainter渲染 失效 无效 原因
  • TIOBE编程语言排行靠前的编程语言的吉祥物
  • 【前端动效】HTML + CSS 实现打字机效果