Flutter图标变形插件shape_shifter_icon的使用

该插件提供三种不同的动画图标，可以作为独立的小部件或嵌入按钮中使用。它完全自包含，不依赖在线服务和存储库——你可以将图标与应用程序一起打包。

标准动画图标

SelfAnimatedIcon 封装了一个标准的 Flutter AnimatedIcon，其唯一的优势是它是自包含的，不需要外部动画控制器。只需构造它：

SelfAnimatedIcon(
  [key: ...,]
  icon: one of the AnimatedIcons constants,
  state: a boolean,
  /// 可选的持续时间，默认为 kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);

示例代码

Widget buildStockAnimated() {
  return ElevatedButton(
    onPressed: () => setState(() {
      buttonState1 = !buttonState1;
    }),
    child: SelfAnimatedIcon(
      icon: AnimatedIcons.play_pause,
      state: buttonState1,
      duration: const Duration(seconds: 1),
    ),
  );
}

在两个图标之间进行动画

SelfAnimatedTwoIcons 类似于上面的标准动画图标，但它需要两个简单的图标，并使用普通的 Flutter 交叉淡入淡出动画在两者之间进行动画。

SelfAnimatedTwoIcons(
  [key: ...,]
  offIcon: an Icon,
  onIcon: another Icon,
  state: a boolean,
  /// 可选的持续时间，默认为 kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);

示例代码

Widget buildTwoIconAnimated() {
  return ElevatedButton(
    onPressed: () => setState(() {
      buttonState2 = !buttonState2;
    }),
    child: SelfAnimatedTwoIcons(
      offIcon: Icon(Icons.pause, color: Colors.red),
      onIcon: Icon(Icons.play_arrow, color: Colors.green),
      state: buttonState2,
      duration: const Duration(seconds: 1),
    ),
  );
}

完全动画图标

ShapeShifterIcon 当然是压轴之作。你可以访问 https://shapeshifter.design，创建并导出一个形状转换动画，将一个图标转换为另一个。这些工作方式类似于标准的 AnimatedIcons，只是你可以拥有自己的图标，并且不受限于那个类中非常有限的几种。

使用它几乎和上面的一样简单：

ShapeShifterIcon(
  [key: ...,]
  state: a boolean,
  assets: a list of asset names,
  /// 可选的持续时间，默认为 kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);

你只需要传递一个表示单个帧的 SVG 文件列表。Shape Shifter 导出到 30 fps（10 个文件）和 60 fps（19 个文件）。命名它们由你自己决定，你可以将每个图标放入单独的文件夹，或者只命名为 iconname_framenumber.svg，随你喜欢。只需创建一个名称列表并将其传递给图标即可。对于 60 fps 版本，可能像这样简单：

final assets = List.generate(19, (index) => 'assets/$index.svg');

就像底层的 flutter_svg 包一样，此包还支持将 SVG 文件编译为二进制格式，以实现更小的尺寸和更好的加载性能，使用的是 vector_graphics_compiler。

唯一的区别是你需要调用 ShapeShifterIcon.compiled() 构造函数：

ShapeShifterIcon.compiled(
  [key: ...,]
  state: a boolean,
  assets: a list of compiled asset names,
  /// 可选的持续时间，默认为 kThemeAnimationDuration
  duration: const Duration(seconds: 1)
);

编译是一个单一命令：

dart run vector_graphics_compiler -i example/assets/0.svg -o example/assets/0.svg.vec

别忘了你的文件名会有所不同：

final assets = List.generate(19, (index) => 'assets/$index.svg.vec');

示例代码

Widget buildShapeShifter() {
  return ElevatedButton(
    onPressed: () => setState(() {
      buttonState3 = !buttonState3;
    }),
    child: ShapeShifterIcon.compiled(
      state: buttonState3,
      duration: const Duration(seconds: 1),
      assets: assets,
    ),
  );
}