Flutter动画组合管理插件animation_groups的使用

Flutter动画组合管理插件animation_groups的使用

AnimationGroup

这是Flutter的一个自定义动画库。它可以帮助你创建复杂的动画效果。

特性

  1. 可以输入AnimationPart，这是当前时刻的动画信息。
  2. 创建AnimationDriver来控制动画的执行（前进或后退）。
  3. 目前这个库比较简单，可能有更多的功能等待开发。
  4. 你可以使用TransitionAnimation、ScaleAnimation、RotationAnimation。

AnimationPart支持X、Y、Z三个坐标轴，并且可以设置曲线。多个AnimationPart可以组成一个AnimationGroup。

使用方法

以下是一个使用示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late AnimationDriver animationDriver;
  
  [@override](/user/override)
  void initState() {
    super.initState();
    animationDriver = AnimationDriver();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimationGroupWidget(
          animationDriver: animationDriver,
          animationGroups: [
            TransitionAnimationGroup(parts: [
              AnimationPart(moment: 0, x: 0, y: 0),
              AnimationPart(moment: 1000, x: 100, y: 100, curve: Curves.easeIn),
              AnimationPart(moment: 2000, x: 100, y: 200, curve: Curves.easeIn),
              AnimationPart(moment: 3000, x: 200, y: 200),
              AnimationPart(moment: 4000, x: 300, y: 300),
            ]),

            ScaleAnimationGroup(parts: [
              AnimationPart(moment: 4000, x: 1.0, y: 1.0, z: 1.0, curve: Curves.bounceIn),
              AnimationPart(moment: 5000, x: 2.0, y: 2.0, z: 1.0),
            ]),

            RotationAnimationGroup(parts: [
              AnimationPart(moment: 4000, x: 0, y: 0, z: 0),
              AnimationPart(moment: 5000, x: 0, y: 0, z: pi),
            ]),
          ],
          child: Container(
            child: Text("xxxxx"),
            width: 20,
            height: 20,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

代码解释

  1. 导入必要的包：

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

  2. 定义AnimationDriver：

    late AnimationDriver animationDriver;

[@override](/user/override)
void initState() {
  super.initState();
  animationDriver = AnimationDriver();
}

  3. 使用AnimationGroupWidget：

    AnimationGroupWidget(
  animationDriver: animationDriver,
  animationGroups: [
    TransitionAnimationGroup(parts: [
      AnimationPart(moment: 0, x: 0, y: 0),
      AnimationPart(moment: 1000, x: 100, y: 100, curve: Curves.easeIn),
      AnimationPart(moment: 2000, x: 100, y: 200, curve: Curves.easeIn),
      AnimationPart(moment: 3000, x: 200, y: 200),
      AnimationPart(moment: 4000, x: 300, y: 300),
    ]),

    ScaleAnimationGroup(parts: [
      AnimationPart(moment: 4000, x: 1.0, y: 1.0, z: 1.0, curve: Curves.bounceIn),
      AnimationPart(moment: 5000, x: 2.0, y: 2.0, z: 1.0),
    ]),

    RotationAnimationGroup(parts: [
      AnimationPart(moment: 4000, x: 0, y: 0, z: 0),
      AnimationPart(moment: 5000, x: 0, y: 0, z: pi),
    ]),
  ],
  child: Container(
    child: Text("xxxxx"),
    width: 20,
    height: 20,
    color: Colors.blue,
  ),
)

更多关于Flutter动画组合管理插件animation_groups的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画组合管理插件animation_groups的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


animation_groups 是一个 Flutter 插件，用于管理和组合多个动画，使得复杂的动画效果更容易实现。它允许你同时控制多个动画的启动、暂停、停止等操作，并且可以轻松地实现动画的序列化或并行化。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 animation_groups 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animation_groups: ^1.0.0

然后运行 flutter pub get 来安装插件。

基本使用

animation_groups 提供了 AnimationGroup 类来管理多个动画。你可以通过 AnimationGroup 来同时控制多个动画的播放。

1. 创建动画控制器

首先，你需要创建多个 AnimationController 来控制不同的动画。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late AnimationController _controller1;
  late AnimationController _controller2;
  late Animation<double> _animation1;
  late Animation<double> _animation2;

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

    _controller1 = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );

    _controller2 = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    );

    _animation1 = Tween<double>(begin: 0, end: 300).animate(_controller1);
    _animation2 = Tween<double>(begin: 0, end: 200).animate(_controller2);
  }

  @override
  void dispose() {
    _controller1.dispose();
    _controller2.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Groups Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            AnimatedBuilder(
              animation: _animation1,
              builder: (context, child) {
                return Container(
                  width: _animation1.value,
                  height: 100,
                  color: Colors.blue,
                );
              },
            ),
            SizedBox(height: 20),
            AnimatedBuilder(
              animation: _animation2,
              builder: (context, child) {
                return Container(
                  width: _animation2.value,
                  height: 100,
                  color: Colors.red,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 使用 AnimationGroup 来同时启动两个动画
          AnimationGroup([
            AnimationControllerGroupItem(controller: _controller1),
            AnimationControllerGroupItem(controller: _controller2),
          ]).forward();
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

2. 使用 AnimationGroup 控制动画

在上面的代码中，我们创建了两个 AnimationController 和对应的 Animation 对象。然后，我们使用 AnimationGroup 来同时启动这两个动画。

AnimationGroup([
  AnimationControllerGroupItem(controller: _controller1),
  AnimationControllerGroupItem(controller: _controller2),
]).forward();

AnimationGroup 可以接受一个 AnimationControllerGroupItem 列表，每个 AnimationControllerGroupItem 对应一个 AnimationController。你可以通过 forward()、reverse()、stop() 等方法来控制动画的播放。

3. 序列化动画

你也可以使用 AnimationSequence 来实现动画的序列化播放：

AnimationSequence([
  AnimationControllerGroupItem(controller: _controller1),
  AnimationControllerGroupItem(controller: _controller2),
]).forward();

AnimationSequence 会按照顺序依次播放每个动画。

4. 并行化动画

如果你想同时播放多个动画，可以使用 AnimationParallel：

AnimationParallel([
  AnimationControllerGroupItem(controller: _controller1),
  AnimationControllerGroupItem(controller: _controller2),
]).forward();
回到顶部