【Flutter】显式动画

最新推荐文章于 2025-05-10 14:54:50 发布
最新推荐文章于 2025-05-10 14:54:50 发布
阅读量1.2k 收藏 30
点赞数 14
分类专栏： Flutter学习 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_62511863/article/details/139221014
版权

🔥 本文由 程序喵正在路上 原创，优快云首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月29日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

简介

常见的显式动画有 RotationTransition、FadeTransition、ScaleTransition、SlideTransition、AnimatedIcon。在显示动画中开发者需要创建一个 AnimationController，通过 AnimationController 来控制动画的开始、暂停、重置、跳转、倒播等。

RotationTransition组件

RotationTransition 组件是 Flutter 中的一个动画组件，用于在子组件进行旋转动画。它可以根据指定的旋转角度来对子组件进行旋转，并且可以在动画执行过程中实时更新旋转角度以创建平滑的动画效果。

要使用 RotationTransition 组件，你需要提供一个 Animation<double> 对象作为其参数，该动画对象控制着旋转的角度。通常，你可以使用 Flutter 提供的动画控制器（如AnimationController）来创建一个动画对象，并在控制器的值范围内更新角度值。

以下是 RotationTransition 组件的基本属性：

  • turns: 一个 Animation<double> 对象，控制旋转的角度。可以通过 Tween<double> 来创建这个动画对象，也可以使用动画控制器（如AnimationController）。

  • alignment: 一个 AlignmentGeometry 对象，表示旋转的中心点位置，默认为 Alignment.center，即子组件的中心点。

  • child: 要进行旋转动画的子组件。

AnimationController 普通用法： 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('RotationTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          RotationTransition(
            turns: _controller,
            child: const FlutterLogo(
              size: 100,
            ),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

在这里插入图片描述

lowerBound、upperBound：

AnimationController 用于控制动画，它包含动画的启动 forward() 、停止 stop() 、反向播放 reverse() 等方法。 AnimationController 会在动画的每一帧，就会生成一个新的值。默认情况下， AnimationController 在给定的时间段内线性的生成从 0.0 到 1.0（默认区间）的数字 ，我们也可以通过 lowerbound 和 upperBound 来修改 AnimationController 生成数字的区间。

将前面程序的 initState 方法修改一下：

@override
void initState() {
  super.initState();
  _controller = AnimationController(
    vsync: this,
    /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
    直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
    确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
    duration: const Duration(seconds: 1),
    lowerBound: 3, //第三圈转到第六圈
    upperBound: 6,
  );

  _controller.addListener(() {
    print(_controller.value);
  });
}

设置了 lowerBound 和 upperBound 后，AnimationController 的值就会在它们这个区间中变化，我们可以看到运行后，_controller 就会在 3 到 6 这个区间变化：

在这里插入图片描述

FadeTransition组件

FadeTransition 组件是 Flutter 中的一个动画组件，用于在子组件进行透明度渐变动画。它可以根据指定的透明度值来对子组件进行渐变动画，并且可以在动画执行过程中实时更新透明度值以创建平滑的动画效果。

我们将前面程序中的 RotationTransition 换成 FadeTransition，再将 _controller 赋值给它的参数 opacity 即可：

FadeTransition(
  opacity: _controller,
  child: const FlutterLogo(
    size: 100,
  ),
),

记得将刚刚 lowerBound、upperBound 去掉，如果要设置 lowerBound、upperBound，不能大于1，因为透明度在大于 1 后都是一样的。

ScaleTransition组件

ScaleTransition 组件是 Flutter 中的一个动画组件，用于在子组件进行缩放动画。它可以根据指定的缩放比例来对子组件进行缩放动画，并且可以在动画执行过程中实时更新缩放比例以创建平滑的动画效果。

AnimationController 控制动画：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ScaleTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ScaleTransition(
            scale: _controller,
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

AnimationController 结合 Tween 控制动画：

默认情况下， AnimationController 对象值的范围是 [0.0，1.0]。如果我们需要构建 UI 的动画值在不同的范围或不同的数据类型，则可以使用 Tween 来添加映射以生成不同的范围或数据类型的值。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('ScaleTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          ScaleTransition(
            scale: _controller.drive(Tween(begin: 1, end: 2)),
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

SlideTransition组件

这是一个负责平移的显示动画组件，使用时需要通过 position 属性传入一个 Animated 表示位移程度，通常借助 Tween 实现。

_controller.drive驱动动画：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SlideTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SlideTransition(
            position: _controller.drive(
              Tween(
                begin: const Offset(0, 0),
                end: const Offset(1.2, 0), //表示实际的位置为向右移动自身宽度的1.2倍
              ),
            ),
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Tween.animate 驱动动画：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SlideTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SlideTransition(
            position: Tween(
              begin: const Offset(0, 0),
              end: const Offset(1.2, 0), //表示实际的位置为向右移动自身宽度的1.2倍
            ).animate(_controller),
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

链式操作修改动画效果：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SlideTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SlideTransition(
            position: Tween(
              begin: const Offset(0, -1),
              end: const Offset(0, 3),
            ).chain(CurveTween(curve: Curves.bounceInOut)).animate(_controller),
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

链式操作修改动动画执行时间：

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      /*Vsync 机制可以理解为是显卡与显示器的通信桥梁，显卡在渲染每一帧之前会等待垂
      直同步信号，只有显示器完成了一次刷新时，发出垂直同步信号，显卡才会渲染下一帧，
      确保刷新率和帧率保持同步，以达到供需平衡的效果，防止卡顿现象。 */
      duration: const Duration(seconds: 1),
    );

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SlideTransition'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SlideTransition(
            position: Tween(
              begin: const Offset(0, -1),
              end: const Offset(0, 3),
            )
                .chain(CurveTween(curve: Curves.bounceInOut))
                .chain(
                    CurveTween(curve: const Interval(0.8, 1))) //在最后20%的时间内完成动画
                .animate(_controller),
            child: const FlutterLogo(size: 100),
          ),
          const SizedBox(height: 40),
          Padding(
            padding: const EdgeInsets.fromLTRB(10, 0, 0, 0),
            child: Wrap(
              spacing: 10,
              alignment: WrapAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: () {
                    _controller.forward(); //正序播放一次
                  },
                  child: const Text("Forward"),
                ),
                ElevatedButton(
                    onPressed: () {
                      _controller.reverse(); //倒序播放一次
                    },
                    child: const Text("Reverse")),
                ElevatedButton(
                    onPressed: () {
                      _controller.stop(); //停止播放
                    },
                    child: const Text("Stop")),
                ElevatedButton(
                    onPressed: () {
                      _controller.reset(); //重置
                    },
                    child: const Text("rest")),
                ElevatedButton(
                    onPressed: () {
                      _controller.repeat(); //重复播放
                    },
                    child: const Text("repeat"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

AnimatedIcon组件

AnimatedIcon 顾名思义，是一个用于提供动画图标的组件，它的名字虽然是以 Animated 开头，但是他是一个显式动画组件，需要通过 progress 属性传入动画控制器，另外需要由 Icon 属性传入动画图标数据。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(vsync: this, duration: const Duration(seconds: 1));

    _controller.addListener(() {
      print(_controller.value);
    });
  }

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

  void _toggleAnimation() {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleAnimation,
        child: const Icon(Icons.refresh),
      ),
      appBar: AppBar(
        title: const Text('AnimatedIcon'),
      ),
      body: Center(
        child: AnimatedIcon(
          icon: AnimatedIcons.close_menu,
          progress: _controller,
          size: 40,
        ),
      ),
    );
  }
}

点击浮动按钮后，图标会在关闭和菜单之间变换。

flutter 显式动画
智玲君
02-16 452
前言 显示动画是需要我们手动控制的动画，AnimationController对象是我们控制显示动画的必不可少的控制器，跟全自动的隐式动画不同，显示动画可以实现组件属性的周期性变化，并且可以在任一中间时刻控制动画的暂停和切换，而隐式动画则更像是强制性的完成一次属性变化，例如透明度从0到1的变化，旋转角度，字体大小等的变化，我们无法在变化过程中对其进行控制，相比之下，显示动画就显得灵活很多，我们可以随时对动画进行控制，并且可以实现循环的，交错的变化效果。 跟隐式动画都是以Anminated..开头一样，Flu
flutter 隐式动画
智玲君
02-13 537
前言 隐式动画简单来说就是用 setState 就能呼唤出来的动画。对于实现了隐式动画的组件，只要Widget被更新，那么一个过渡动画就会自动产生并且播放。 Flutter已经内置了很多已经实现了隐式动画的组件，这些组件大多数以Anminated..开头，例如：AnimatedSwitcher，AnimatedContainer，AnimatedAlign，AnimatedPositioned，AnimatedOpacity，AnimatedPadding等，当我们在使用setState改变这些组件的参数的
Flutter 动画（显式动画、隐式动画、Hero动画、页面转场动画、交错动画）
Lan_Se_Tian_Ma的博客
02-16 2094
当前案例 Flutter SDK版本：3.13.2。
`RotationTransition` 是 Flutter 中的一个动画组件，用于实现旋转动画效果
最新发布
DoublePoint的博客
05-10 468
RotationTransition 是 Flutter 中用于实现旋转动画的组件，通过 AnimationController 和 Tween 控制动画的开始、结束和过渡效果。其构造函数包含 turns（旋转动画）、alignment（对齐方式）、origin（旋转原点）和 child（子组件）等参数。示例代码展示了如何创建一个无限循环的旋转动画，使用 AnimationController 控制动画的持续时间和循环播放，Tween 定义旋转的起始和结束值，RotationTransition 将动画应用
Flutter 动画
xiangxiongfly
12-09 1731
Flutter对动画系统进行抽象、封装，使我们可以方便的进行动画开发。AnimationController类： 缩放动画 透明度动画 旋转动画 循环执行动画 Tween 负责两种状态之间的过渡转换。 ColorTween 本质也是由实现的。 平移动画 Curve Flutter中的Curve类似于Android中的Interpolator差值器，控制动画变化的速率，可分为：匀速、加速、减速等速率。 自定义Curve 动画混合使用 多动画同时执行 同时变大变色效果： 多动画依次执行 先变大再
flutter动画
qq_30005223的博客
04-22 2516
Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。 Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。差值器 AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。 Tween：映射生成不同范围的值，.
Flutter动画（四）显式自定义动画Widget
Mamong's blog
12-04 449
本篇介绍显式自定义动画Widget。
flutter 点击旋转动画_Flutter 动画详解（一）
weixin_36469682的博客
12-24 1182
1. 动画介绍动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些封装好的动画库，我们制作酷炫的效果方便了不少。当然了，这些库都是基于各平台基础的动画API实现的，笔者今天要聊的，也就是基...
Flutter(十七)——组合动画
热门推荐
李元静
02-07 2万+
本文目录Staggered Animations组合动画的代码实现 Staggered Animations Staggered Animations就是交错动画，也可以称之为组合动画。在实际的动画使用过程中，动画可能并不是由一个单一方式呈现的。渐变，位移，缩放等都是基础的动画，而我们有时候需要把这些基础的动画组合起来，使其成为一个组合动画，即交错动画。(下图为本文最终实现效果) 在Androi...
Flutter-动画
Chuck Chan的专栏
06-03 553
参考：https://flutter.io/docs/development/ui/animations 一、动画类型 动画分为两类：基于tween或基于物理的。 1）补间(Tween)动画 “介于两者之间”的简称。在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。 2）基于物理的动画 在基于物理的动画中，运动被模拟为与真实...
Flutter Animation 动画
10-11
https://blog.youkuaiyun.com/ruoshui_t/article/details/93393583
Flutter AnimatedIcon 图标也可以动画
Leove的专栏
06-23 1632
AnimatedIcon 图标也可以以动画的方式显示。
Flutter 动画详解（一）
weixin_34162228的博客
10-08 397
本文主要介绍了动画的原理相关概念，对其他平台的动画做了一个简要的梳理，并简要的介绍了Flutter动画的一些知识。 1. 动画介绍 动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些...
深入学习 Flutter 中的动画-从静态变换到动态效果
梁婉玲krysliang的博客
08-12 2000
今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。 我们像前端那样，先从静态的变换中谈论。 一、变换组件 在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。 1、平移 ​ Transform.translate( offset: Offset(...
Flutter动画(全)
Stay hungry, stay foolish!!
09-05 8527
Flutter动画 1.Flutter Api自带的动画部件。 2.自定义动画。 3.结合自定义手势和自定义绘制来搞出各种炫酷的需求。 一 Flutter Api提供了用户足够操作的动画部件。我们可以通过这些部件来达到几乎所有的动画效果。常见的动画部件有一下: (1)AnimatedContainer (2)AnimatedCrossFade (3)Hero (4)AnimatedBui...
flutter 动画_Flutter 中文文档：在 Flutter 应用里实现动画效果
weixin_39632524的博客
11-30 250
在flutter应用里实现动画效果本章内容如何使用动画库中的基本类为 widget 添加动画。AnimatedWidget 和 AnimatedBuilder 的应用区别。本教程将讲解如何在 Flutter 中构建显示动画。我们先来介绍一些动画库中的基本概念，类和方法，然后列举五个动画示例。这些示例互相关联，展示了动画库的不同方面。Flutter SDK 也提供过渡动画，比如 FadeTransi...
Flutter 动画篇
hongxue8888的博客
07-10 3132
文章目录1 概述2 Animation3 AnimationController4 Curve5 Tween 1 概述 Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画。 在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线，然后由框架自动计算如何从开始点过渡到结束点。 在基于物理的动画(遵循物理学定律)中，运动被模拟为与真实世界...
Flutter 中的 AnimatedIcon 小部件：全面指南
smileKH的博客
05-14 949
虽然主要用于内置的图标动画，但你也可以自定义图标动画，只需创建一个继承自的类，并实现所需的属性。是一个在需要图标动画时非常有用的组件。它不仅提供了平滑的过渡动画，还允许你根据应用的风格进行定制。使用可以创建出既美观又实用的交互式图标，同时保持了Material Design的一致性。记住，合理使用可以提升应用的交互性和用户体验。通过上述示例，你应该能够理解如何在Flutter应用中使用，并且可以根据你的需求进行自定义。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值