Flutter_学习记录_动画的简单了解

用AnimationController简单实现如下的效果图：
在这里插入图片描述

1. 只用AnimationController实现简单动画

1.1 完整代码案例

import 'package:flutter/material.dart';

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({super.key});

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {

  late AnimationController animationDemoController;
  @override
  void initState() {
    super.initState();

    animationDemoController = AnimationController(
      vsync: this,
      // 初始值，要在 lowerBound 和 upperBound 之间
      value: 32.0,
      // 最小值
      lowerBound: 32.0,
      // 最大值
      upperBound: 100.0,
      // 设置动画的时间
      duration: Duration(milliseconds: 3000)
    );

    animationDemoController.addListener((){
      // 更新页面
      setState(() {
        
      });
    });

    // 添加status的监听
    animationDemoController.addStatusListener((AnimationStatus status){
      print(status);
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁 animationDemoController
    animationDemoController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimationDemo"),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: animationDemoController.value,
          onPressed: (){
            switch (animationDemoController.status) {
              case AnimationStatus.completed:
                // 反转动画
                animationDemoController.reverse();
                break;
              default:
                // 开始动画
                animationDemoController.forward();
            }
          },
        ),
      ),
    );
  }
}

1.2 代码说明

(1) AnimationController

  • animationDemoController 是动画的核心控制器。
  • duration 定义了动画的持续时间（例如 2 秒）。
  • vsync 参数确保动画与屏幕刷新同步，避免资源浪费。
  • value 设置初始值。
  • lowerBound 设置最小值。
  • upperBound 设置 最大值。

(2) addListener 添加监听，可以监听到 animationDemoController.value的值的变化。

  • 如果需要需要用到 animationDemoController.value的值更新UI，则需要调用 setState的方法。
animationDemoController.addListener((){
      // 更新页面
      setState(() {
        
      });
    });

（3）addStatusListener 添加动画状态的监听，只有添加了这个监听，才能在后面获取到动画状态的变化。

            switch (animationDemoController.status) {
              case AnimationStatus.completed:
                // 反转动画
                animationDemoController.reverse();
                break;
              default:
                // 开始动画
                animationDemoController.forward();
            }

（4） 开始动画

animationDemoController.forward()

（5）反转动画

animationDemoController.reverse();

2. 用AnimationController 和 Animation实现简单动画

2.1 完整代码示例

import 'package:flutter/material.dart';

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({super.key});

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {

  late AnimationController animationDemoController;
  late Animation animation;
  late Animation animationColor;
  // 设置动画取消
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();

    animationDemoController = AnimationController(
      vsync: this,
      // 设置动画的时间
      duration: Duration(milliseconds: 3000)
    );

    animation = Tween(begin: 32.0, end: 100.0).animate(animationDemoController);
    animationColor = ColorTween(begin: Colors.red, end: Colors.green).animate(animationDemoController);

    animationDemoController.addListener((){
      // 更新页面
      setState(() {
        
      });
    });

    // 添加status的监听
    animationDemoController.addStatusListener((AnimationStatus status){
      print(status);
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁 animationDemoController
    animationDemoController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimationDemo"),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: animation.value,
          color: animationColor.value,
          onPressed: (){
            switch (animationDemoController.status) {
              case AnimationStatus.completed:
                // 反转动画
                animationDemoController.reverse();
                break;
              default:
                // 开始动画
                animationDemoController.forward();
            }
          },
        ),
      ),
    );
  }
}

2.2 代码说明

(1) Tween

  • Tween(begin: xx, end:xx) 定义了动画的范围：
  • begin 是起始值。
  • end 是结束值。

(2) animationDemoController.value 用 animation.value 来替代

3. 用AnimationController 和 Animation、CurvedAnimation实现简单动画

CurvedAnimation 可以添加缓动效果（如 Curves.easeInOut），完整代码示例：

import 'package:flutter/material.dart';

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({super.key});

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {

  late AnimationController animationDemoController;
  late Animation animation;
  late Animation animationColor;
  // 设置动画曲线
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();

    animationDemoController = AnimationController(
      vsync: this,
      // 设置动画的时间
      duration: Duration(milliseconds: 3000)
    );

    curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);
    animation = Tween(begin: 32.0, end: 100.0).animate(curve);
    animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);

    animationDemoController.addListener((){
      // 更新页面
      setState(() {
        
      });
    });

    // 添加status的监听
    animationDemoController.addStatusListener((AnimationStatus status){
      print(status);
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁 animationDemoController
    animationDemoController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimationDemo"),
      ),
      body: Center(
        child: IconButton(
          icon: Icon(Icons.favorite),
          iconSize: animation.value,
          color: animationColor.value,
          onPressed: (){
            switch (animationDemoController.status) {
              case AnimationStatus.completed:
                // 反转动画
                animationDemoController.reverse();
                break;
              default:
                // 开始动画
                animationDemoController.forward();
            }
          },
        ),
      ),
    );
  }
}

4 用AnimationController 和 AnimatedWidget实现简单动画

完整代码实例：

import 'package:flutter/material.dart';

class AnimationDemo extends StatefulWidget {
  const AnimationDemo({super.key});

  @override
  State<AnimationDemo> createState() => _AnimationDemoState();
}

class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {

  late AnimationController animationDemoController;
  late Animation animation;
  late Animation animationColor;
  // 设置动画曲线
  late CurvedAnimation curve;

  @override
  void initState() {
    super.initState();

    animationDemoController = AnimationController(
      vsync: this,
      // 设置动画的时间
      duration: Duration(milliseconds: 3000)
    );

    curve = CurvedAnimation(parent: animationDemoController, curve: Curves.bounceOut);
    animation = Tween(begin: 32.0, end: 100.0).animate(curve);
    animationColor = ColorTween(begin: Colors.green, end: Colors.red).animate(curve);

    // 添加status的监听
    animationDemoController.addStatusListener((AnimationStatus status){
      print(status);
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁 animationDemoController
    animationDemoController.dispose();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimationDemo"),
      ),
      body: Center(
      	//  AnimationHeart 是基于 AnimatedWidget 创建的
        child: AnimationHeart(
          animations: [animation, animationColor], 
          controller: animationDemoController
        ),
      ),
    );
  }
}

// 基于 AnimatedWidget 创建 AnimationHeart的控件
class AnimationHeart extends AnimatedWidget {

  final List animations;
  final AnimationController controller;

  const AnimationHeart({
    super.key, 
    required this.animations, 
    required this.controller
  }) : super(listenable: controller);

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.favorite),
      iconSize: animations[0].value,
      color: animations[1].value,
      onPressed: (){
        switch (controller.status) {
          case AnimationStatus.completed:
            // 反转动画
            controller.reverse();
            break;
          default:
            // 开始动画
            controller.forward();
        }
      },
    );
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/970693.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

数据结构与算法之排序算法-选择排序

数据结构与算法之排序算法-选择排序

排序算法是数据结构与算法中最基本的算法之一&#xff0c;其作用就是将一些可以比较大小的数据进行有规律的排序&#xff0c;而想要实现这种排序就拥有很多种方法~ 那么我将通过几篇文章&#xff0c;将排序算法中各种算法细化的&#xff0c;详尽的为大家呈现出来&#xff1a; &…
阅读更多...
IOTDB安装部署

IOTDB安装部署

IOTDB一般用于工业互联网&#xff0c;至于具体的介绍请自行搜索 1.环境准备 安装前需要保证设备上配有 JDK>1.8 的运行环境&#xff0c;并配置好 JAVA_HOME 环境变量。 设置最大文件打开数为 65535。 关闭防火墙 systemctl stop firewalld.service systemctl disable …
阅读更多...
游戏引擎学习第100天

游戏引擎学习第100天

仓库:https://gitee.com/mrxiao_com/2d_game_2 昨天的回顾 今天的工作重点是继续进行反射计算的实现。昨天&#xff0c;我们开始了反射和环境贴图的工作&#xff0c;成功地根据法线显示了反射效果。然而&#xff0c;我们还没有实现反射向量的计算&#xff0c;导致反射交点的代…
阅读更多...
分布式 NewSQL 数据库（TiDB）

分布式 NewSQL 数据库（TiDB）

TiDB 是一个分布式 NewSQL 数据库。它支持水平弹性扩展、ACID 事务、标准 SQL、MySQL 语法和 MySQL 协议&#xff0c;具有数据强一致的高可用特性&#xff0c;是一个不仅适合 OLTP 场景还适合 OLAP 场景的混合数据库。 TiDB是 PingCAP公司自主设计、研发的开源分布式关系型数据…
阅读更多...
Vue响应式原理实现总结（数据劫持Object.defineProperty/Proxy+发布订阅者设计模式）

Vue响应式原理实现总结（数据劫持Object.defineProperty/Proxy+发布订阅者设计模式）

Vue的响应式主要分为数据劫持和发布订阅模式。Vue2用的是Object.defineProperty，而Vue3改用Proxy。数据劫持就是在访问或修改对象属性时进行拦截，然后触发相应的更新。发布订阅模式则是用来收集依赖（比如视图更新函数），当数据变化时通知这些依赖执行。 总结一下，关键点包…
阅读更多...
以若依移动端版为基础，实现uniapp的flowable流程管理

以若依移动端版为基础，实现uniapp的flowable流程管理

1.前言 此代码是若依移动端版为基础&#xff0c;实现flowable流程管理&#xff0c;支持H5、APP和微信小程序三端。其中&#xff0c;APP是在安卓在雷电模拟器环境下完成的&#xff0c;其他环境未测试&#xff0c;此文章中所提及的APP均指上述环境。移动端是需要配合若依前后端分…
阅读更多...
封装一个sqlite3动态库

封装一个sqlite3动态库

作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一、项目案例 二…
阅读更多...
Qt Creator 5.0.2 (Community)用久了突然变得很卡

Qt Creator 5.0.2 (Community)用久了突然变得很卡

目录 1.现象 2.解决方案 1.现象 很久没有用Qt Creator开发项目了&#xff0c;刚刚结束的项目又是用VS2019开发的&#xff1b;这两天刚好有时间去学习一下Qt&#xff0c;刚好要用Qt Creator&#xff0c;结果一打开就没反应&#xff0c;主界面显示出来要好几分钟&#xff0c;最…
阅读更多...
[C++]多态详解

[C++]多态详解

目录 一、多态的概念 二、静态的多态 三、动态的多态 3.1多态的定义 3.2虚函数 四、虚函数的重写&#xff08;覆盖&#xff09; 4.1虚函数 4.2三同 4.3两种特殊情况 &#xff08;1&#xff09;协变 &#xff08;2&#xff09;析构函数的重写 五、C11中的final和over…
阅读更多...
mac 意外退出移动硬盘后再次插入移动硬盘不显示怎么办

mac 意外退出移动硬盘后再次插入移动硬盘不显示怎么办

第一步&#xff1a;sudo ps aux | grep fsck 打开mac控制台输入如下指令&#xff0c;我们看到会出现两个进程&#xff0c;看进程是root的这个 sudo ps aux|grep fsck 第二步&#xff1a;杀死进程 在第一步基础上我们知道不显示u盘的进程是&#xff1a;62319&#xff0c;我们…
阅读更多...
国家队出手！DeepSeek上线国家超算互联网平台！

国家队出手！DeepSeek上线国家超算互联网平台！

目前，国家超算互联网平台已推出 DeepSeek – R1 模型的 1.5B、7B、8B、14B 版本，后续还会在近期更新 32B、70B 等版本。 DeepSeek太火爆了！在这个春节档，直接成了全民热议的话题。 DeepSeek也毫无悬念地干到了全球增速最快的AI应用。这几天，国内的云计算厂家都在支持Dee…
阅读更多...
ElasticSearch基础和使用

ElasticSearch基础和使用

ElasticSearch基础 1 初识ES相关组件 &#xff08;1&#xff09;Elasticsearch是一款非常强大的开源搜索引擎&#xff0c;可以帮助我们从海量数据中快速找到需要的内容。Elasticsearch结合kibana、Logstash、Beats组件 也就是elastic stack&#xff08;ELK&#xff09; 广泛应…
阅读更多...
使用Python爬虫实时监控行业新闻案例

使用Python爬虫实时监控行业新闻案例

目录 背景环境准备请求网页数据解析网页数据定时任务综合代码使用代理IP提升稳定性运行截图与完整代码总结 在互联网时代&#xff0c;新闻的实时性和时效性变得尤为重要。很多行业、技术、商业等领域的新闻都可以为公司或者个人发展提供有价值的信息。如果你有一项需求是要实时…
阅读更多...
vs2022支持.netframework4.0

vs2022支持.netframework4.0

下载nuget包 .netframework4.0 解压nuget 复制到C:\Program Files (x86)\Reference Assemblies\Microsoft\Framework\.NETFramework 参考 https://www.cnblogs.com/bdqczhl/p/18670152 https://blog.csdn.net/xiaomeng1998_/article/details/135979884
阅读更多...
【云安全】云原生- K8S kubeconfig 文件泄露

【云安全】云原生- K8S kubeconfig 文件泄露

什么是 kubeconfig 文件&#xff1f; kubeconfig 文件是 Kubernetes 的配置文件&#xff0c;用于存储集群的访问凭证、API Server 的地址和认证信息&#xff0c;允许用户和 kubectl 等工具与 Kubernetes 集群进行交互。它通常包含多个集群的配置&#xff0c;支持通过上下文&am…
阅读更多...
IoTDB 常见问题 QA 第五期

IoTDB 常见问题 QA 第五期

关于 IoTDB 的 Q & A 情人节之际&#xff0c;让 IoTDB Q&A 陪您一起共度解惑&#xff01;我们将定期汇总我们将定期汇总社区讨论频繁的问题&#xff0c;并展开进行详细回答&#xff0c;通过积累常见问题“小百科”&#xff0c;方便大家使用 IoTDB。 Q1&#xff1a;导入…
阅读更多...
SwiftUI 5.0 中宝藏视图修改器 containerRelativeFrame 趣谈（下）

SwiftUI 5.0 中宝藏视图修改器 containerRelativeFrame 趣谈（下）

概览 小伙伴们都知道，为了将 SwiftUI 中多如牛毛的视图井然有序、有条不紊的组织起来，我们必须借助容器（Container）伏虎降龙般地威力。而如何最大限度的让容器中的子视图能根据容器尺寸安排自己的空间，则需要一些技术手段来洞幽察微。 在过去，我们往往使用 GeometryRead…
阅读更多...
家里WiFi信号穿墙后信号太差怎么处理？

家里WiFi信号穿墙后信号太差怎么处理？

一、首先在调制解调器&#xff08;俗称&#xff1a;猫&#xff09;测试网速&#xff0c;网速达不到联系运营商&#xff1b; 二、网线影响不大&#xff0c;5类网线跑500M完全没问题&#xff1b; 三、可以在卧室增加辅助路由器&#xff08;例如小米AX系列&#xff09;90~200元区…
阅读更多...
windows，docker停止所有容器

windows，docker停止所有容器

CMD命令窗口 你可以尝试使用以下命令来停止所有正在运行的Docker容器&#xff1a; FOR /f "tokens*" %i IN (docker ps -q) DO docker stop %i这条命令的工作原理是&#xff1a; docker ps -q 列出所有正在运行的容器的ID。 FOR /f "tokens*" %i IN (c…
阅读更多...
Jenkins介绍

Jenkins介绍

什么是Jenkins Jenkins 是一个开源的自动化服务器&#xff0c;主要用于持续集成和持续交付&#xff08;CI/CD&#xff09;。它帮助开发团队自动化构建、测试和部署软件&#xff0c;从而提高开发效率和软件质量。 如果一个系统是前后端分离的开发模式&#xff0c;在集成阶段会需…
阅读更多...
最新文章

Copyright @ 2022~2023