Flutter动画效果插件flutter_pretty_animation的使用

Flutter动画效果插件flutter_pretty_animation的使用

flutter_pretty_animation 是一个功能强大的动画库，提供了多种动画效果，能够帮助开发者快速实现复杂的动画需求。以下是该库的主要动画组件及其使用方法。

1. AnimationGroupWidget

AnimationGroupWidget 可以传入一组 Widget，并实现它们的横向排序与随机发散收拢动画效果。

使用示例：

AnimationGroupWidget(
    [
      Icon(Icons.audiotrack, size: 50),
      Icon(Icons.audiotrack),
      Icon(Icons.audiotrack),
      Icon(Icons.favorite, size: 50),
      Icon(Icons.audiotrack),
      Icon(Icons.audiotrack),
    ],
)

效果展示：

2. AnimationlikeWidget

AnimationlikeWidget 基于贝塞尔曲线实现了点赞/取消点赞的动画效果。

参数说明：

使用示例：

AnimationlikeWidget(
  isLike: false,
  width: 180,
)

效果展示：

3. AnimationDiscreteWidget

AnimationDiscreteWidget 实现了一种离散的动画效果，例如动态飞出的图标。

参数说明：

使用示例：

AnimationDiscreteWidget(
  width: 400,
  height: 650,
  milliseconds: 100,
  icon: Icons.ac_unit_outlined,
)

效果展示：

4. MultipleFabWidget

MultipleFabWidget 实现了一个多功能浮动按钮组，支持展开和收起操作。

参数说明：

使用示例：

MultipleFabWidget(
  children: [
    FloatingActionButton(
      onPressed: () => print("FloatingActionButton"),
      child: IconButton(
        icon: Icon(Icons.format_color_reset_rounded),
        onPressed: () {},
      ),
      foregroundColor: Colors.white,
      backgroundColor: Colors.blue,
      shape: CircleBorder(),
    ),
    FloatingActionButton(
      onPressed: () => print("FloatingActionButton"),
      child: IconButton(
        icon: Icon(Icons.save_sharp, size: 20),
        onPressed: () {},
      ),
      foregroundColor: Colors.white,
      backgroundColor: Colors.indigo,
      shape: CircleBorder(),
    ),
    FloatingActionButton(
      onPressed: () => print("FloatingActionButton"),
      child: Icon(Icons.style),
      foregroundColor: Colors.white,
      backgroundColor: Colors.red,
      shape: CircleBorder(),
    ),
  ],
)

效果展示：

5. CustomBottomNavigationBar

CustomBottomNavigationBar 提供了自定义底部导航栏的动画效果。

使用示例：

CustomBottomNavigationBar(
  items: bottomNavItems,
  currentIndex: currentIndex,
  selectedLabelStyle: TextStyle(fontSize: 18, color: Colors.blueAccent),
  unselectedLabelStyle: TextStyle(fontSize: 18, color: Colors.grey),
  unselectedIconTheme: IconThemeData(size: 30, color: Colors.grey),
  selectedIconTheme: IconThemeData(size: 30, color: Colors.blueAccent),
  onTap: (index) {
    _changePage(index);
  },
)

效果展示：

6. Rive 动画

Rive 是一个强大的动画制作工具，可以将设计好的动画文件导入到 Flutter 中。

使用示例：

Container(
  width: 220,
  height: 220,
  child: _riveArtboard == null
      ? Container(color: Colors.blue)
      : Rive(
          artboard: _riveArtboard,
          alignment: Alignment.center,
          fit: BoxFit.contain,
        ),
)

效果展示：

7. RiveBottomTab

RiveBottomTab 实现了基于 Rive 的底部 Tab 图标切换动画，支持中间悬浮按钮的效果。

参数说明：

使用示例：

RiveBottomTab(
  children: [
    // Tab 项配置
  ],
  floatWidget: Icon(Icons.add),
  floatText: "新增",
  tabSelect: (index) {
    // 回调处理
  },
  centerRadius: 30,
)

效果展示：

8. PrettyElevatedButton

PrettyElevatedButton 在 ElevatedButton 的基础上扩展了按钮状态动画，例如加载、成功、失败等。

状态及方法：

使用示例：

PrettyElevatedButton(
  style: ButtonStyle(
    minimumSize: MaterialStateProperty.all(Size(150, 45)),
    backgroundColor: MaterialStateProperty.resolveWith((states) {
      if (states.contains(MaterialState.pressed)) {
        return Colors.blue[200];
      }
      return Colors.blue;
    }),
  ),
  onPressed: () {
    _processControler.setLoad();
    Future.delayed(Duration(milliseconds: 2000), () {
      _processControler.setFail();
      tips = '密码错误';
      setState(() {});
    });
  },
  icon: Icon(Icons.autorenew_rounded),
  label: Text(tips),
  processControler: _processControler,
)