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

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

news 2025/8/24 23:07:35

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

1. 只用AnimationController实现简单动画

1.1 完整代码案例

import 'package:flutter/material.dart';class AnimationDemo extends StatefulWidget {const AnimationDemo({super.key});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;@overridevoid 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);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget 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});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画取消late CurvedAnimation curve;@overridevoid 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);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget 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});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid 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);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget 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});@overrideState<AnimationDemo> createState() => _AnimationDemoState();
}class _AnimationDemoState extends State<AnimationDemo> with TickerProviderStateMixin {late AnimationController animationDemoController;late Animation animation;late Animation animationColor;// 设置动画曲线late CurvedAnimation curve;@overridevoid 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);});}@overridevoid dispose() {super.dispose();// 销毁 animationDemoControlleranimationDemoController.dispose();}@overrideWidget 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);@overrideWidget 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();}},);}
}
http://www.lryc.cn/news/537600.html

相关文章：

  • 【java】for (int num : numbers) { System.out.print(num + “ “)； } for里的是什么意思
  • 内容中台驱动企业CMS架构优化与高效策略
  • 我用 Cursor 开发了一款个人小记系统
  • 百问网(100ask)提供的烧写工具的原理和详解；将自己编译生成的u-boot镜像文件烧写到eMMC中
  • doris:异步物化视图概述
  • 图像缩放的双线性插值实现方式
  • 深入剖析 Vue 的响应式原理：构建高效 Web 应用的基石
  • 40.日常算法
  • CAS单点登录（第7版）11.SSO SLO
  • Bob the Canadian
  • CAS单点登录（第7版）16.模仿
  • 预留：大数据Hadoop之——部署hadoop+hive+Mysql环境（Linux）
  • RabbitMQ介绍以及基本使用
  • C++演示中介模式
  • Vue的简单入门 一
  • 【免费送书活动】《MySQL 9从入门到性能优化（视频教学版）》
  • export default与export区别
  • 最佳的出牌方法
  • Kotlin 2.1.0 入门教程（二十一）数据类
  • 30天开发操作系统 第 20 天 -- API
  • WEB安全--SQL注入--floor报错注入
  • 【java面向对象的三大特性】封装、继承和多态
  • Hermite 插值
  • 【推理llm论文精度】DeepSeek-R1：强化学习驱动LLM推理能力飞跃
  • arm linux下的中断处理过程。
  • C语言：指针详解
  • github用户名密码登陆失效了
  • 【删除tomcat默认管理控制台】
  • 动态库与静态库：深入解析与应用
  • 【鱼眼镜头12】Scaramuzza的鱼眼相机模型实操，不依赖于具体的相机几何结构，直接从图像数据出发，因此更具灵活性。