Flutter_RotateTransition实现动画旋转效果

前记:每天学习一点点,总会成为厉害的人

Flutter_RotateTransition

还是在写简单X音界面的时候遇到的问题,除了RotateTransiton()组件外,还有CircleAvatar()组件。

实现的效果如下

右下角是一个旋转的动画,就是RotateTransiton()和CircleAvatar()的结合。

上代码:

解释参数用途,因为需要一直刷新,选择了StatefulWidget然后混入SingleTickerProviderMixin,

①定义controller

选择AnimationController()。

②初始化状态

初始化_controller,vsync垂直同步,解决屏幕刷新和tearing等问题,这个是必须实现的!

duration,控制动画从开始到结束的时间,我这里设置了6s。

③关于controller的用法

这里我是这么理解的,百度了一下AnimationCotroller是一个特殊的Animation对象在屏幕刷新的每一帧,就会生成一个新的值,

我觉得应该是为了监听Animationstatus,更方便的去执行controller的方法。

方法描述
controller.forward();开始正向运行动画
controller.reset();重置动画
controller.reverse();开始反向执行动画
controller.dispose();停止动画

这里在初始状态中我调用了controller.forward();开始动画。

④关于CircleAvatar();

在这里我真的是踩了很大一个坑,前面使用了ClipRRect()组件去修改以图片为背景的父组件Container(),Container()外层还有个Positioned()组件,然后我一直修改Container的w和h一直没用,这里我就想吐槽一下flutter,为什么必须去修改最外层positioned()的大小才会去改变,后面我选了CirlcleAvatar()组件用起来比较方便,指定了他的bg就可以了不用包裹那么多层,然后这个radius半径也是必须要最外层组件没有设置w和h的时候才会有用(坑爹啊)。

⑤turns和逻辑问题。

关于turns就是状态的运用和简单的逻辑问题来定义一个无限旋转的Animation,

关于AnimationStatus:

状态说明
AnimationStaus.completed正向执行完动画所到的状态
AnimationStatus.dismissed反向执行完动画所到的状态

意思是调用了controller()一定会监听到AnimationStaus.completed,

所以我在turns里面写了监听controller的状态,这里用了..addStatuslistenner(),因为不改变他的返回值所以用了两个点,

监听状态的时候当status=AnimationStatus.completed的时候,重置_controller.reset(),然后在启动_controller.forward(),

这样一来就实现了无限循环了,根据不同的逻辑还可以实现其他的旋转方式。

 

 

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
实现 Flutter Markdown 的打字效果,您可以使用 Flutter动画机制。具体而言,您可以将 Markdown 文本分成多个部分,并在每个部分之间添加适当的延迟,以便在一段时间内逐个添加 Markdown 部分。 以下是一个实现 Flutter Markdown 打字效果的示例代码: ``` import 'package:flutter/material.dart'; import 'package:flutter_markdown/flutter_markdown.dart'; class TypingMarkdownWidget extends StatefulWidget { final String markdown; TypingMarkdownWidget({@required this.markdown}); @override _TypingMarkdownWidgetState createState() => _TypingMarkdownWidgetState(); } class _TypingMarkdownWidgetState extends State<TypingMarkdownWidget> with SingleTickerProviderStateMixin { AnimationController _controller; List<String> _markdownParts; int _currentPartIndex = 0; @override void initState() { super.initState(); // 将 Markdown 文本分成多个部分 _markdownParts = widget.markdown.split('\n'); // 初始化动画控制器 _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 500), ); // 添加动画监听器 _controller.addListener(() { setState(() {}); }); // 开始动画 _controller.forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { // 获取当前部分的文本 String currentPart = _markdownParts[_currentPartIndex]; // 计算当前部分的长度 int currentPartLength = (currentPart.length * _controller.value).round(); // 截取当前部分的文本 String currentText = currentPart.substring(0, currentPartLength); // 如果动画已完成,移动到下一个部分 if (_controller.isCompleted) { _currentPartIndex++; if (_currentPartIndex < _markdownParts.length) { // 开始下一个部分的动画 _controller.reset(); _controller.forward(); } } return Markdown(data: currentText); } } ``` 在上面的示例中,我们创建了一个名为 TypingMarkdownWidget 的 StatefulWidget,它接受一个名为 markdown 的必需参数。在 initState 方法中,我们将 Markdown 文本分成多个部分,并初始化动画控制器。在 build 方法中,我们获取当前部分的文本,并计算当前部分的长度。然后,我们使用 Markdown 组件来渲染当前部分的文本。如果动画已完成,我们将移动到下一个部分,并开始下一个部分的动画。 请注意,上面的示例仅演示了如何实现 Flutter Markdown 的打字效果。如果您想要实现更复杂的打字效果,例如在 Markdown 文本中添加动态效果或自定义动画曲线,您需要进一步自定义上面的示例代码。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值