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

一人前行2025-02-16 16:54

用AnimationController简单实现如下的效果图：

1. 只用AnimationController实现简单动画

1.1 完整代码案例

dart 复制代码 
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的方法。
dart 复制代码 
animationDemoController.addListener((){
      // 更新页面
      setState(() {
        
      });
    });

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

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

（4） 开始动画

dart 复制代码 
animationDemoController.forward()

（5）反转动画

dart 复制代码 
animationDemoController.reverse();

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

2.1 完整代码示例

dart 复制代码 
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），完整代码示例：

dart 复制代码 
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实现简单动画

完整代码实例：

dart 复制代码 
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();
        }
      },
    );
  }
}
相关推荐
小哥Mark4 小时前
Flutter开发鸿蒙年味 + 实用实战应用｜绿色烟花：电子烟花 + 手持烟花
flutter·华为·harmonyos
一只大侠的侠5 小时前
Flutter开源鸿蒙跨平台训练营 Day 3
flutter·开源·harmonyos
一只大侠的侠6 小时前
【Harmonyos】Flutter开源鸿蒙跨平台训练营 Day 2 鸿蒙跨平台开发环境搭建与工程实践
flutter·开源·harmonyos
微祎_7 小时前
Flutter for OpenHarmony：构建一个 Flutter 平衡球游戏，深入解析动画控制器、实时物理模拟与手势驱动交互
flutter·游戏·交互
ZH15455891318 小时前
Flutter for OpenHarmony Python学习助手实战：面向对象编程实战的实现
python·学习·flutter
renke33649 小时前
Flutter for OpenHarmony：构建一个 Flutter 色彩调和师游戏，RGB 空间探索、感知色差计算与视觉认知训练的工程实现
flutter·游戏
王码码20359 小时前
Flutter for OpenHarmony 实战之基础组件：第三十一篇 Chip 系列组件 — 灵活的标签化交互
android·flutter·交互·harmonyos
ujainu11 小时前
Flutter + OpenHarmony 实现经典打砖块游戏开发实战—— 物理反弹、碰撞检测与关卡系统
flutter·游戏·openharmony·arkanoid·breakout
微祎_11 小时前
构建一个 Flutter 点击速度测试器：深入解析实时交互、性能度量与响应式 UI 设计
flutter·ui·交互
王码码203511 小时前
Flutter for OpenHarmony 实战之基础组件：第二十七篇 BottomSheet — 动态底部弹窗与底部栏菜单
android·flutter·harmonyos
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03OpenClaw Chrome扩展使用教程 - 浏览器中继控制04Linux下V2Ray安装配置指南05使用 1panel面板 部署 php网站06openclaw配置教程（linux+局域网ollama）07UV安装并设置国内源08从零搭建一个 PHP 登录注册系统（含完整源码）09Vue-skills的中文文档10让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南