Flutter动画集合插件 animated_collection 的使用

animated_collection 是一个提供简单动画组件和实用方法的Flutter库，用于简化动画的实现。本文将详细介绍如何使用该插件，并提供完整的示例代码。

主要功能

1. AnimatedVisibility

• 控制Widget的显示与隐藏。
• 示例：点击按钮切换Widget的可见性。

2. AnimatedBoolean

• 动态更新布尔值，并触发相应的动画。
• 示例：通过开关控制文本内容的变化。

3. AnimatedLocation

• 动态改变Widget的位置。
• 示例：点击按钮使Widget在不同位置间移动。

4. AnimatedAppearing

• 动态添加或移除列表项，并带有动画效果。
• 示例：点击按钮向列表中添加新的颜色块。

5. Animated Flex

• 包括 AnimatedFlexible, AnimatedExpanded, 和 AnimatedSpacer，用于动态调整布局中的弹性空间。
• 示例：点击按钮改变弹性空间的比例。

示例代码

以下是完整的示例代码，展示了如何使用上述功能：

import 'dart:math';
import 'package:animated_collection/animated_collection.dart';
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(
      theme: ThemeData(useMaterial3: true),
      darkTheme: ThemeData.dark(useMaterial3: true),
      home: const DefaultTabController(
        length: 5,
        child: MyHomePage(),
      ),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _visible = true;
  static const _alignments = [
    Alignment.topLeft,
    Alignment.topCenter,
    Alignment.topRight,
    Alignment.centerLeft,
    Alignment.center,
    Alignment.centerRight,
    Alignment.bottomLeft,
    Alignment.bottomCenter,
    Alignment.bottomRight,
  ];

  var _alignment = Alignment.center;
  final _random = Random();
  final _colors = <Color>[];
  bool _boolean = false;
  int _flex = 100;

  @override
  void initState() {
    super.initState();
    _colors.addAll([_generateColor(), _generateColor()]);
  }

  Color _generateColor() {
    return Color(0xff000000 + _random.nextInt(0xffffff));
  }

  void _onPressed() {
    switch (DefaultTabController.of(context).index) {
      case 0:
        setState(() {
          _visible = !_visible;
        });
        break;
      case 1:
        final currentIndex = _alignments.indexOf(_alignment);
        final newIndex = (currentIndex + 1) % _alignments.length;
        setState(() {
          _alignment = _alignments[newIndex];
        });
        break;
      case 2:
        setState(() {
          _colors.addAll([_generateColor(), _generateColor()]);
        });
        break;
      case 3:
        setState(() {
          _boolean = !_boolean;
        });
        break;
      case 4:
        setState(() {
          _flex = _random.nextInt(500);
        });
        break;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('animated_collection'),
        bottom: const TabBar(
          tabs: [
            Tab(text: 'AnimatedVisibility'),
            Tab(text: 'AnimatedLocation'),
            Tab(text: 'AnimatedAppearing'),
            Tab(text: 'AnimatedBoolean'),
            Tab(text: 'AnimatedExpanded'),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _onPressed,
        child: const Icon(Icons.loop),
      ),
      body: TabBarView(
        children: [
          Center(
            child: Container(
              color: Colors.red,
              child: AnimatedVisibility(
                visible: _visible,
                child: ColoredBox(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  child: const SizedBox(
                    height: 200,
                    width: 200,
                    child: Center(
                      child: Text('Hide me'),
                    ),
                  ),
                ),
              ),
            ),
          ),
          AnimatedLocationScope(
            child: Align(
              alignment: _alignment,
              child: AnimatedLocation(
                tag: 'tag',
                child: ColoredBox(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  child: SizedBox.square(
                    dimension: 30 + 5 * _alignments.indexOf(_alignment).toDouble(),
                  ),
                ),
              ),
            ),
          ),
          ListView.builder(
            itemCount: _colors.length,
            itemBuilder: (context, index) {
              return AnimatedAppearing(
                child: ListTile(
                  tileColor: _colors[index],
                ),
              );
            },
          ),
          Center(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Switch(value: _boolean, onChanged: (_) => _onPressed()),
                AnimatedBoolean(
                  value: _boolean,
                  duration: const Duration(seconds: 5),
                  builder: (context, _, value) {
                    return Text('Value: ${value.toStringAsFixed(2)}');
                  },
                ),
              ],
            ),
          ),
          Center(
            child: Row(
              mainAxisSize: MainAxisSize.max,
              children: [
                Expanded(
                  flex: 100,
                  child: ColoredBox(
                    color: Theme.of(context).colorScheme.primaryContainer,
                    child: const Center(
                      child: Text(
                        'Expanded 100',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
                AnimatedExpanded(
                  flex: _flex,
                  child: ColoredBox(
                    color: Theme.of(context).colorScheme.secondaryContainer,
                    child: Center(
                      child: Text(
                        'Expanded $_flex',
                        textAlign: TextAlign.center,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

总结

通过使用 animated_collection 插件，您可以轻松地为您的Flutter应用添加各种动画效果。希望这个示例能够帮助您更好地理解和使用该插件。