Flutter动画图标插件animate_icons的使用

Animate Any two icons with this plugin

animate_icons 插件允许你创建两个图标之间的平滑过渡动画。这个插件非常容易上手，只需几个步骤就可以让你的应用程序中的图标变得生动起来。

Demo:

How to use:

1. 添加依赖

在你的 pubspec.yaml 文件中添加 animate_icons 依赖：

dependencies:
  flutter:
    sdk: flutter
  animate_icons: ^latest_version # 替换为最新版本号

然后运行 flutter pub get 来安装包。

2. 导入库

在 Dart 文件顶部导入 animate_icons 库：

import 'package:animate_icons/animate_icons.dart';

3. 使用 AnimateIcons Widget

这里是一个简单的例子，演示如何使用 AnimateIcons widget：

AnimateIcons(
  startIcon: Icons.add_circle,
  endIcon: Icons.add_circle_outline,
  size: 60.0,
  controller: controller, // 需要定义并初始化一个 AnimateIconController
  onStartIconPress: () {
    print("Clicked on Add Icon");
    return true;
  },
  onEndIconPress: () {
    print("Clicked on Close Icon");
    return true;
  },
  duration: Duration(milliseconds: 500),
  startIconColor: Colors.deepPurple,
  endIconColor: Colors.deepOrange,
  clockwise: false,
)

Use AnimateIconController

为了更灵活地控制动画，你可以使用 AnimateIconController 类。这允许你在不点击图标的前提下，在开始和结束图标之间进行动画切换，并且可以检查当前显示的是哪个图标。

Define AnimateIconController

首先，在你的 StatefulWidget 中定义控制器：

late AnimateIconController controller;

Initialize controller

在 initState() 方法中初始化控制器：

@override
void initState() {
  controller = AnimateIconController();
  super.initState();
}

Pass controller to widget

将控制器传递给 AnimateIcons widget：

AnimateIcons(
  startIcon: Icons.add,
  endIcon: Icons.close,
  controller: controller,
  size: 60.0,
  onStartIconPress: () {
    print("Clicked on Add Icon");
    return true;
  },
  onEndIconPress: () {
    print("Clicked on Close Icon");
    return true;
  },
  duration: Duration(milliseconds: 500),
  startIconColor: Colors.deepPurple,
  endIconColor: Colors.deepOrange,
  clockwise: false,
),

Use controller functions

你可以通过控制器的方法来触发动画：

if (controller.isStart()) {
  controller.animateToEnd();
} else if (controller.isEnd()) {
  controller.animateToStart();
}

示例代码

下面是一个完整的示例应用程序，展示了如何结合多个 AnimateIcons 和 AnimateIconController 使用：

import 'package:animate_icons/animate_icons.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIOverlays([]);
  runApp(MaterialApp(
    home: MyApp(),
    debugShowCheckedModeBanner: false,
  ));
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late AnimateIconController c1, c2, c3, c4, c5, c6;

  @override
  void initState() {
    c1 = AnimateIconController();
    c2 = AnimateIconController();
    c3 = AnimateIconController();
    c4 = AnimateIconController();
    c5 = AnimateIconController();
    c6 = AnimateIconController();
    super.initState();
  }

  bool onEndIconPress(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("onEndIconPress called"),
        duration: Duration(seconds: 1),
      ),
    );
    return true;
  }

  bool onStartIconPress(BuildContext context) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text("onStartIconPress called"),
        duration: Duration(seconds: 1),
      ),
    );
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(builder: (context) {
        return Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Wrap(
                children: [
                  AnimateIcons(
                    startIcon: Icons.add_circle,
                    endIcon: Icons.add_circle_outline,
                    controller: c1,
                    size: 45.0,
                    onEndIconPress: () => onEndIconPress(context),
                    onStartIconPress: () => onStartIconPress(context),
                  ),
                  // 其他 AnimateIcons...
                ],
              ),
              SizedBox(height: 20.0),
              AnimateIcons(
                startIcon: Icons.play_arrow,
                endIcon: Icons.play_arrow_outlined,
                size: 45.0,
                controller: AnimateIconController(),
                onEndIconPress: () {
                  // 控制其他 AnimateIcons 的动画
                  return true;
                },
                onStartIconPress: () {
                  // 控制其他 AnimateIcons 的动画
                  return true;
                },
              ),
            ],
          ),
        );
      }),
    );
  }
}

通过上述步骤，你应该能够轻松地在你的 Flutter 应用程序中集成并使用 animate_icons 插件。如果你有任何问题或需要进一步的帮助，请随时提问！