Flutter动画图标插件simple_animated_icon的使用

Flutter动画图标插件simple_animated_icon的使用

simple_animated_icon 是一个实现“简单”过渡的Flutter插件，用于Material Design中定义的动画图标。该插件提供了一个 SimpleAnimatedIcon 小部件，可以用于在任何两个Material图标之间进行动画转换。

示例图片

开始使用

1. 添加依赖项

   首先，在 pubspec.yaml 文件中添加 simple_animated_icon 依赖项：

   dependencies:
     simple_animated_icon: ^1.1.0
   

2. 导入包

   在您的应用程序中导入该包：

   import 'package:simple_animated_icon/simple_animated_icon.dart';
   

3. 准备 AnimationController 和 动画进度

   准备一个 AnimationController 和一个动画数字来指示动画进度：

   _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 300));
   _progress = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
   

4. 创建动画图标

   在 build 方法中，通过提供起始图标、结束图标和 _progress 创建动画图标：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return YourWidget(
       ...
       child: SimpleAnimatedIcon(
         startIcon: Icons.add, // 起始图标
         endIcon: Icons.close, // 结束图标
         progress: _progress,  // 动画进度
       ),
     );
   }
   

5. 启动或反转动画

   通过控制器启动或反转动画：

   if (_isOpened) {
     _animationController.reverse(); // 反转动画
   } else {
     _animationController.forward(); // 启动动画
   }
   

设计目标

SimpleAnimatedIcon 的设计目标是为Flutter中的内置 AnimatedIcon 提供一种替代方案，因此它具有与 AnimatedIcon 相同的接口，并且可以在使用 AnimatedIcon 或 Icon 的任何地方使用。示例项目展示了使用 FloatingActionButton 和 IconButton 的两种用例，但也可以在其他小部件中使用。

由于上述目标，SimpleAnimatedIcon 只接受一个动画控制参数 progress，其余部分由使用者决定。这给使用者提供了最大的灵活性。

完整示例代码

以下是完整的示例代码，包括 FloatingActionButton 和 IconButton 的动画图标示例：

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

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

/// 示例：动画FAB
class AnimatedFab extends StatefulWidget {
  [@override](/user/override)
  _AnimatedFabState createState() => _AnimatedFabState();
}

class _AnimatedFabState extends State<AnimatedFab> with SingleTickerProviderStateMixin {
  bool _isOpened = false;
  late AnimationController _animationController;
  late Animation<Color?> _color;
  late Animation<double> _progress;

  [@override](/user/override)
  void initState() {
    super.initState();

    _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 300))
      ..addListener(() {
        // 动画进度时调用 `build`
        setState(() {});
      });

    var curve = CurvedAnimation(
      parent: _animationController,
      curve: Interval(0.0, 1.0, curve: Curves.easeOut),
    );

    _progress = Tween<double>(begin: 0.0, end: 1.0).animate(curve);
    _color = ColorTween(begin: Colors.blue, end: Colors.red).animate(curve);
  }

  [@override](/user/override)
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void animate() {
    if (_isOpened) {
      _animationController.reverse(); // 反转动画
    } else {
      _animationController.forward(); // 启动动画
    }

    setState(() {
      _isOpened = !_isOpened;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: animate,
      backgroundColor: _color.value, // 动态背景颜色
      child: SimpleAnimatedIcon(
        startIcon: Icons.add, // 起始图标
        endIcon: Icons.close, // 结束图标
        progress: _progress,  // 动画进度
      ),
    );
  }
}

/// 示例：动画图标按钮
class AnimatedIconButton extends StatefulWidget {
  [@override](/user/override)
  _AnimatedIconButtonState createState() => _AnimatedIconButtonState();
}

class _AnimatedIconButtonState extends State<AnimatedIconButton> with SingleTickerProviderStateMixin {
  bool _isOpened = false;
  late AnimationController _animationController;
  late Animation<double> _progress;

  [@override](/user/override)
  void initState() {
    super.initState();

    _animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 300))
      ..addListener(() {
        // 动画进度时调用 `build`
        setState(() {});
      });

    _progress = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
  }

  [@override](/user/override)
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void animate() {
    if (_isOpened) {
      _animationController.reverse(); // 反转动画
    } else {
      _animationController.forward(); // 启动动画
    }

    setState(() {
      _isOpened = !_isOpened;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: animate,
        iconSize: 48.0, // 图标大小
        icon: SimpleAnimatedIcon(
          color: Colors.black, // 自定义图标颜色
          size: 48.0, // 自定义图标大小
          startIcon: Icons.search, // 起始图标
          endIcon: Icons.mail, // 结束图标
          progress: _progress, // 动画进度

          // 多个过渡效果从左到右应用。
          // 顺序很重要，特别是当涉及到 `slide_in_*` 过渡时。
          transitions: [
            Transitions.zoom_in, // 缩放效果
            Transitions.slide_in_left // 左滑效果
          ],
        ));
  }
}

class MyApp extends StatelessWidget {
  // 这个小部件是应用程序的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Animated Icon Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Animated Icon Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedIconButton(), // 动画图标按钮
          ],
        ),
      ),
      floatingActionButton: AnimatedFab(), // 动画FAB
    );
  }
}