文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter 旋转动画 — RotationTransition

2023-09-13 09:42

关注
  1. Flutter 旋转动画 — RotationTransition
  2. Flutter 平移动画 — 4种实现方式
  3. Flutter 淡入淡出与逐渐出现动画
  4. Flutter 尺寸缩放、形状、颜色、阴影变换动画
  5. Flutter 列表Item动画 — AnimatedList实现Item左进左出、淡入淡出
  6. Flutter Hero 实现共享元素转场动画
  7. Flutter Hero 实现径向变换动画 — 圆形变成矩形的转场动画
  8. Flutter 自定义动画 — 数字递增动画和文字逐行逐字出现或消失动画

文章目录


旋转动画


RotationTransition 继承于AnimatedWidget,是一个提供旋转功能的Widget,需要传入参数 Animation

Animation中的值为 v,则旋转的弧度是 v * 2 * π

3.1 线性变化的旋转动画(补间动画 Tween)

3.1.1 首先创建 Animation 与 AnimationController

  /// 会重复播放的控制器  late final AnimationController _repeatController;  /// 线性动画  late final Animation<double> _animation;  @override  void initState() {    super.initState();    /// 动画持续时间是 3秒,此处的this指 TickerProviderStateMixin    _repeatController = AnimationController(      duration: const Duration(seconds: 3),      vsync: this,    )      ..repeat(); // 设置动画重复播放    // 创建一个从0到360弧度的补间动画 v * 2 * π    _animation = Tween<double>(begin: 0, end: 1).animate(_repeatController);  }

3.1.2 构建Widget RotationTransition

  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: RotationTransition(          turns: _animation,          child: const Icon(Icons.arrow_drop_up, size: 180),        ),      ),    );  }

3.1.3 效果图

在这里插入图片描述


3.2 非线性变化的旋转动画(Curved­Animation)

3.2.1 代码实现

实现方式与线性变化的旋转动画类似,只是需要将 Tween 更改为 Curved­Animation

  class _RotationTransitionPageState extends State<RotationTransitionPage>    with TickerProviderStateMixin {  /// 会重复播放的控制器  late final AnimationController _repeatController;  /// 非线性动画  late final Animation<double> _curveAnimation;  @override  void initState() {    super.initState();    _repeatController = AnimationController(      duration: const Duration(seconds: 3),      vsync: this,    )..repeat();    /// Curves 存在多种模式,具体的效果查看Curves源码,有链接展示动画效果    _curveAnimation = CurvedAnimation(      parent: _repeatController,      curve: Curves.easeInCirc,    );  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: RotationTransition(          turns: _curveAnimation,          child: const Icon(Icons.arrow_drop_up, size: 180),        ),      ),    );  }}

3.2.2 效果图

在这里插入图片描述


3.3 动画延时重复(每次重复播放前停顿一下)

实现思路:监听动画的状态,每当动画播放完成时延时一段时间,然后启动动画开始播放。

3.3.1 代码实现

 class _RotationTransitionPageState extends State<RotationTransitionPage>    with TickerProviderStateMixin {  /// 重复播放前需要停顿一下的控制器  late final AnimationController _delayRepeatController;  /// 延时重复播放动画  late final Animation<double> _delayAnimation;  @override  void initState() {    super.initState();    _delayRepeatController = AnimationController(      duration: const Duration(seconds: 3),      vsync: this,    )    //  添加动画监听      ..addListener(() {        // 获取动画当前的状态        var status = _delayRepeatController.status;        if (status == AnimationStatus.completed) {          // 延时1秒          Future.delayed(const Duration(seconds: 1), () {            //从0开始向前播放            _delayRepeatController.forward(from: 0.0);          });        }      })      ..forward();    _delayAnimation =        Tween<double>(begin: 0, end: 1).animate(_delayRepeatController);  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: RotationTransition(          turns: _delayAnimation,          child: const Icon(Icons.arrow_drop_up, size: 180),        ),      ),    );  }}

3.3.2 效果图

在这里插入图片描述


3.4 手动控制旋转动画

实现方式:使用 AnimationController 的 animateTo 函数。

3.4.1 代码实现

class _RotationTransitionPageState extends State<RotationTransitionPage>    with TickerProviderStateMixin {  /// 手动控制动画的控制器  late final AnimationController _manualController;  /// 手动控制  late final Animation<double> _manualAnimation;  @override  void initState() {    super.initState();    /// 不设置重复,使用代码控制进度,动画时间1秒    _manualController = AnimationController(      vsync: this,      duration: const Duration(seconds: 1),    );    _manualAnimation =        Tween<double>(begin: 0, end: 1).animate(_manualController);  }  @override  Widget build(BuildContext context) {    return Scaffold(      body: Center(        child: RotationTransition(          turns: _manualAnimation,          child: CupertinoButton(            onPressed: () {              /// 获取动画当前的值              var value = _manualController.value;              /// 0.5代表 180弧度              if (value == 0.5) {                _manualController.animateTo(0);              } else {                _manualController.animateTo(0.5);              }            },            child: const Icon(Icons.arrow_drop_up, size: 180),          ),        ),      ),    );  }}

3.4.2 效果图

在这里插入图片描述

别忘了释放AnimationController 资源。

  @override  void dispose() {    _controller.dispose();    super.dispose();  }

来源地址:https://blog.csdn.net/ww897532167/article/details/125280054

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯